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;},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！