element表格分页选中、限制多选条数

1. 在标签上添加row-key，值可以是你在当前表格里面循环数组的任意唯一值，我这里是id

<el-table row-key="id" ref="multipleTable" @selection-change="handleSelectionChange" ></el-table>

2. 在多选列上面添加:reserve-selection=“true”，在数据更新之后会保留当前选中的数据

<el-table-column type="selection" width="55" :reserve-selection="true" />

3. 监听@selection-change="handleSelectionChange"事件，当选择项发生变化时会触发该事件

4.定义一个全局的数组保存选中数组 当数组长度大于等于20时，执行响应的操作

// 选择项发生改变
handleSelectionChange(val) {
     this.selectList = val;
          if (this.selectList.length >= 20) {
               // 截取前20位
               this.selectList = val.slice(0, 20);
               // 截取20位之后的数组  禁止选中
               let tempArr = val.slice(20);
               if (tempArr.length !== 0) {
                    tempArr.forEach((ele) => {
                        this.$refs.multipleTable.toggleRowSelection(ele, false);
                    });
               }
         }
            // 获取已选择数组长度，展示已选择数量
            this.count = this.selectList.length;
            // 保持一个静态数组，不参与任何选中数组逻辑  关闭弹窗重新赋值
            this.staticList = this.selectList;
        },