1

2

<el-dialog
      title="banner排序"
      :visible.sync="sortDialogVisible"
      width="30%"
    >
      <el-table
        :data="gridSortData"
        border
        height="300"
      >
        <el-table-column property="title" label="分类名称" />
        <el-table-column property="activityStatus" label="banner状态">
          <template slot-scope="scope">
            // 这是自己封装的组件
            <dict-tag
              :options="dict.type.sass_banner_status"
              :value="scope.row.activityStatus"
            />
          </template>
        </el-table-column>
        <el-table-column property="sort" label="当前排序">
          <template #default="{row,$index}">
            <el-select
              :value="row.sort"
              class="select-spec"
              @change="sortChange($event,row,$index)"
            >
              <el-option
                v-for="item in bannerSortOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div class="sort-number">总共{{ sortOptions.length }}条数据</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sortDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSortConfirm">确 定</el-button>
      </span>
    </el-dialog>

data(){
  sortOptions: [], // 排序选项
  bannerSortOptions: [] // 过滤排序选项
},
methods:{
  // 获取banner排序列表
    async headSortClick() {
      this.sortDialogVisible = true
      this.loading = true
      await bannerSortList().then(({ code, data }) => {
        if (code === 0) {
          this.gridSortData = data
          this.sortOptions = data

          this.sortOptions.map((item, index) => {
            item.label = index + 1
            item.value = index + 1
          })
          const temp = JSON.parse(JSON.stringify(this.sortOptions))
          const res = this.filterArr(this.sortOptions, temp)
          this.bannerSortOptions = res
          this.loading = false
        }
      })
        .catch(() => {
          this.loading = false
        })
    },

    // 过滤
    filterArr(a, b) {
      const sortSet = new Set()
      for (const item of a) {
        sortSet.add(item.sort * 1)
      }

      // 遍历数组b，根据id是否在sortSet中设置disabled属性
      for (const item of b) {
        if (sortSet.has(item.value)) {
          item.disabled = true
        } else {
          item.disabled = false
        }
      }
      return b
    },
    // 修改排序
    sortChange($event, row) {
      this.sortBannerId = row.id
      this.sortId = row.sort = $event

      for (var i = 0; i < this.sortArray.length; i++) {
        if (this.sortArray[i].bannerId == this.sortBannerId) {
          this.sortArray[i].bannerId = this.sortBannerId
          this.sortArray[i].sort = parseInt(this.sortId)
          return
        }
      }

      this.sortArray.push({
        bannerId: this.sortBannerId,
        sort: parseInt(this.sortId)
      })

      // 这里是修改当前行生效的,你可以忽略  ok
      // this.sortOptions.filter((item, index) => index + 1 == this.sortId).map(item => {
      //   item.disabled = true
      // })
    },
}