el-table多选时最大选中条数

718 阅读1分钟

需求: 1.比如最多只能选中100条 2.选中达到100条后,其他没选中的是禁选的,已选中的可以去掉选中状态。 解决方法:

<el-table ref="table" row-key="id" border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="110" :reserve-selection="true" fixed :selectable="checkSelectable"></el-table-column>
</el-table>

data() {
    return {
        maxCount: 100,
        selection: []
    }
},
methods: {
 handleSelectionChange(selection) {
      if (selection.length >= this.maxCount) {
        this.$message.warning('已超过' + this.maxCount + '条数据,请在下一批处理')
        // 超出的数据改变选中状态
        let tempArr = selection.slice(this.maxCount)
        tempArr.forEach(ele => {
          this.$refs.table.toggleRowSelection(ele, false)
        })
        // 截取前100位
        selection = selection.slice(0, this.maxCount)
      }
      this.selection = selection
    },

    checkSelectable(row, index) {
      let isSelected = this.$refs.table.selection.includes(row)
      return !(this.$refs.table.selection.length >= this.maxCount) || isSelected
    }
}