ant desgin vue 的表格多选的disabled的问题

Question

页面分两部分 上面是一些单选的盒子 下面是表格 表格中有多选框 选择上面的盒子的时候 会去循环下面的盒子 如果过上面盒子的某个字段跟下面列表每行的字段一样 则列表的这行的多选框 要置灰

<a-table
          v-if="tableShow"
          ref="table"
          :columns="enterColumns"
          :data-source="this.selectArr || []"
          :row-selection="rowSelection2"
          bordered
          :pagination="false"
          :rowKey="
            (record, index) => {
              record.consumerId
            }
          "
        >
          <template slot="apiName" slot-scope="apiName, item">
            <a href="javascript:void(0)" @click="onDetail(item)">{{ apiName }}</a>
          </template>
          <template slot="consumerName" slot-scope="consumerName, record">
            <div v-for="(item, index) in consumerName" :key="index">
              <a-button
                size="small"
                :class="record.chooseIndex !== null && index == record.chooseIndex ? 'abtnClass-blue' : 'abtnClass'"
              >{{ item }}
              </a-button>
            </div>
          </template>
          <template slot="action" slot-scope="record">
            <a @click="onDel(record)">删除</a>
          </template>
          <template slot="select" slot-scope="record">
            <a-checkbox @change="selectChange(e)" :default-checked="false" />
          </template>
          <template slot="apiStatus" slot-scope="apiStatus">
            <span :class="apiStatus == '已下线' ? 'redSpan' : 'bottomSpan'">{{ apiStatus }}</span>
          </template>
        </a-table>

 rowSelection2 () {
      const { selectedRowKeys2 } = this
      return {
        selectedRowKeys2,
        onChange: this.onSelectChange2,
        hideDefaultSelections: true,

        onSelection: this.onSelection,
        // getCheckboxProps: this.getCheckboxProps
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.chooseIndex !== null && record.chooseIndex !== undefined // Column configuration not to be checked
          }
        })
      }
    }



   // 当我选择上面的盒子触发的事件   这里就是拿字段跟下面列表每行的字段来做对比 然后做一个chooseIndex的标识 来判断是否置灰
    chooseAppBox (item, index) {
      this.applyCallShow = true
      // 应用id
      this.chooseArr = item.consumerId.toString()
      // 应用名称
      this.appName = item.consumerName

      // Vue.set(item, 'newData', hour)
      for (let i = 0; i < this.selectArr.length; i++) {
        if (this.selectArr[i].consumerId) {
          if (this.selectArr[i].consumerId.indexOf(this.chooseArr) !== -1) {
            console.log('存在,索引是：', this.selectArr[i].consumerId.indexOf(this.chooseArr))
            this.selectArr[i].chooseIndex = this.selectArr[i].consumerId.indexOf(this.chooseArr)
          } else {
            console.log('不存在')
            this.selectArr[i].chooseIndex = null
          }
        } else {
          console.log('不存在')
          this.selectArr[i].chooseIndex = null
        }
      }

      console.log('列表的数据', this.selectArr)
      console.log('选中的数据', this.selectArr2)
      // this.tableShow = false
      // this.$nextTick(function () {
      //   this.tableShow = true
      // })
      // 调用验证申请
      // if (this.chooseArr !== '' || this.chooseArr !== undefined) {
      //   this.verifyBasket()
      // }
    },

当我选择上面的盒子触发的事件 这里就是拿字段跟下面列表每行的字段来做对比 然后做一个chooseIndex的标识 来判断是否置灰 在这个方法里面 有看到用这个nexttick来做 这个是可以达到效果的 但是有bug 相当于我刷新了表格 有标识的多选框是置灰了 但是我之前选中的其他没有标识的多选框也会一并取消勾选了 有什么好的解决方法

Answer 1

保存一下 之前选中的其他没有标识的多选框 的 key值