实现点击选择按钮时候选中对应选中的行,当点击某一行单元格时候就清除其他选中行然后选中对应点击的那一行

时间:2024-03-24 21:19:57

 

实现点击选择按钮时候选中对应选中的行,当点击某一行单元格时候就清除其他选中行然后选中对应点击的那一行实现点击选择按钮时候选中多行,当点击某一行单元格时候就清除其他选中行

 

 

<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);

},