实现点击选择按钮时候选中多行,当点击某一行单元格时候就清除其他选中行
<el-table :data="data" showOverflowTooltip ref="multipleTable" @selection-change="handleSelectionChange" @row-click="rowClick" border style="width: 100%">
:data="data" :绑定到后台数据中取得的值。
ref="multipleTable":为了后面的 rowClick中使用
@selection-change :当选择项发生变化时会触发该事件 传入一个参数,这个参数是一个数组,就是你选择的哪一些项的对象数组。
handleSelectionChange(val) {
this.multipleTable = val;
},
@row-click: 当某一行被点击时会触发该事件 实现当点击某一行时其他选中的行都将不选中,只选中点击的哪行
rowClick(row, event, column){
this.toggleSelection(row);
},
toggleSelection(rows) {
if (this.multipleTable.length>0) {
this.$refs.multipleTable.clearSelection();
}
this.$refs.multipleTable.toggleRowSelection(rows);
},