实现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>
相关推荐
Sheldon一蓑烟雨任平生6 分钟前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
詩句☾⋆᭄南笙6 分钟前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒19 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌23 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip29 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙34 分钟前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
Rhys..39 分钟前
JS - npm init
开发语言·javascript·npm
夏天想42 分钟前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界1 小时前
这个 CSS 特性,可能终结样式冲突
前端·css
zzzsde1 小时前
【C++】深入理解string类(5)
java·前端·算法