element 表格使用多选框时 如何限制选择数量_el-table 复选框勾选数量限制

问题：在项目中遇见，使用element表格加多选框，需要限制选择数量的情况

解决办法：max就是最多可以选择的条数

  <el-table
    ref="multipleTable"
    v-loading="loading"
    :data="tableData"
    @selection-change="handleSelectionChange"
    @current-change="handleCurrentChange"
    row-key="id"
  >
   <el-table-column
     :selectable="selectable"
     :reserve-selection="true"
     type="selection"
     align="center"
 />

// 回调表格选择的数据 当选择项发生变化时会触发该事件
    handleSelectionChange(list) {
      if (list.length > this.max) {
        this.limitFn(list);
        return;
      }
      this.multiSelectedGroups = [...list];
    },
    // 限制数量方法
    limitFn(list) {
      this.$refs.multipleTable.clearSelection(); //用于多选表格，清空用户的选择
      for (let i = 0; i < this.max; i++) {
        this.$refs.multipleTable.toggleRowSelection(list[i]); //用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
      }
    },

 // 判断复选框是否可以选择
    selectable(row) {
      let index = this.multiSelectedGroups.findIndex((v) => v.id === row.id);
      return this.multiSelectedGroups.length >= this.max
        ? index !== -1
          ? true
          : false
        : true;
    },

项目中这一块我是做的一个组件，调用的时候可能传入之前选中的数据，所以需要渲染之前选中的数据。hadSelected是调用组件时传入的默认选择的数据

//用于多选表格  回显的数据    等DOM元素渲染完毕之后再处理回显
        if (this.hadSelected.length) {
          let idArr = this.hadSelected.map((val) => val.id);
          this.$nextTick((res) => {
            this.tableData.forEach((val) => {
              if (idArr.includes(val.id)) {
                this.$refs.multipleTable.toggleRowSelection(val, true);
              }
            });
          });
        }

需要注意一下，reserve-selection，仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）