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

1.页面实现效果:

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

2.代码如下

html 复制代码
<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>
相关推荐
前端小趴菜0541 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~2 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele4 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子5 小时前
React状态管理最佳实践
前端
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts