实现el-table 两列多选框且不可同时勾选，可单选，可多选

1.页面实现效果：

审核通过可批量处理，可单选；审核不通过，单选，但两者不可同时勾选☑️

2.代码如下

<template lang="pug">
.financing-order-tab
  .table-container
    .btns(style="margin-bottom: 15px")
        el-button(type="primary" size="mini", @click="handleCheck") 批量初审
        el-button(type="primary" size="mini", @click="handleReview") 批量复审
    el-table.no-wrap-cell(:data="tableData",ref="multipleTable",style="width: 100%", size="small" show-summary, :summary-method="getSummaries",@selection-change="handleSelectionChange",:row-key="getRowKey")
      el-table-column(fixed="left", label="审核通过",width="60",align="center")
        el-table-column(fixed="left",type="selection",align="center", width="60", :selectable="disableSelect")
      el-table-column(fixed="left", label="审核不通过",width="60",align="center",:render-header="renderCustomHeader")
        template(slot-scope="scope")
          el-checkbox(:disabled="disableRow(scope.row)",v-model="scope.row.isChecked",@change="handleSecondColumnCheckboxChange(scope.$index, scope.row)")
      el-table-column(prop="projectCode", label="项目编号", width="180")
      el-table-column(prop="orgName", label="服务商", width="180")
      el-table-column(prop="stationDetailAddress", label="预约安装详细地址", width="180")
      el-table-column(prop="realCapacity", label="装机容量(W)", width="100")
        template(slot-scope="{row}") {{row.realCapacity}}
</template>

<script>

export default {
  data() {
    return {
      tableData: [],  
      passList: [],
      rejectList: [],
      firstColumnSelection: [], // 第一列选中项
      secondColumnSelection: new Set(), // 使用Set来存储第二列选中项的索引，方便去重
      customSelections: [], // 第二列自定义选中项
      loading: false,
    }
  },

  created() {
  },
  methods: {
    getRowKey(row) {
      return row.id // 假设每行数据都有唯一的 'id' 字段
    },

    handleSelectionChange (rows) {
      this.firstColumnSelection = rows
      rows.map(item => this.tableData.indexOf(item)).forEach(el => {
        Array.from(this.secondColumnSelection).length && Array.from(this.secondColumnSelection).forEach(ele => {
          if (el === ele) {
            // 当选中第一列的时候，自动取消第二列对应行的选中状态
            this.$set(this.tableData[el], 'isChecked', false)
            this.secondColumnSelection.delete(ele)
            this.customSelections = this.tableData.filter((row, index) => this.secondColumnSelection.has(index))
          }
        })
      })
    },

    disableSelect(row) {
      return row.loanAuditStatus === 'WAIT_AUDIT' || row.loanAuditStatus === 'WAIT_REVIEW'
    },
    disableRow(row) {
      if (row.loanAuditStatus === 'WAIT_AUDIT' || row.loanAuditStatus === 'WAIT_REVIEW') {
        return false
      } else {
        return true
      }
    },

    handleSecondColumnCheckboxChange(index, row) {
      // 切换第二列的选中状态
      if (this.secondColumnSelection.has(index)) {
        this.secondColumnSelection.delete(index)
      } else {
        this.secondColumnSelection.add(index)
      }
      // 当第二列选中项变化时，自动取消第一列对应行的选中状态
      if (this.secondColumnSelection.has(index)) {
        const rowIndex = this.tableData.findIndex(row => this.tableData.indexOf(row) === index)
        this.$refs.multipleTable.toggleRowSelection(this.tableData[rowIndex], false)
      }
      this.customSelections = this.tableData.filter((row, index) => this.secondColumnSelection.has(index))
    },

    renderCustomHeader(h, { column, $index }) {
      return h('span', '审核不通过')
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-form::v-deep{
  .el-input--mini{
    width: 175px;
  }
}
.table-container {
  margin-top: 20px;
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>