<r-table v-loading="dataListLoading" :data="dataList" ref="mainTable" :sup_this="sup_this"
:total="total" :multiSelect="true" @row-click="getValId" grid-id="corAccBnkAccount"
@selection-change="dataListSelectionChangeHandle">
</r-table>
- 其中:multiSelect="true"负责设置多选按钮
- @selection-change="dataListSelectionChangeHandle"代表每次选中多选按钮会执行的事件,下面是事件:
//每次选中或者取消复选框的时候,把选中行的id传给selectId数组
dataListSelectionChangeHandle(data){
this.selectId = []
for(let i=0;i<data.length;i++){
if(data[i].id!=''){
this.selectId.push(data[i].id)
}
}
},
明白以上操作后就可以根据需求进行批量修改删除,但如果还需要在修改完后取消所有选中,就要注意了,这里面有个坑!!!
很多博客会告诉你用clearSelection方法来取消选中,这是对的,但如果你按照那些博客说的进行下一步,用该方法
this.$refs.mainTable.clearSelection()
就会发现多选按钮并没有被取消选中,这是为什么?
让我们打开浏览器控制台将this.$refs.mainTable打印一下
console.log(this.$refs.mainTable)
会发现,在this.$refs.mainTable下没有clearSelection()方法(原因可能是因为标签是公司封装的标签,所以原本标签中方法的位置发生了改变)
它其实在这里
所以需要这样写
this.$refs.mainTable.$children[0].clearSelection()
注意:mainTable是table里面的ref=“mainTable”
至于为啥只有数组的第一个数据里面有clearSelection()方法,这个我就不知道了,没学过vue,这算是一边解决问题一边学习了。
补充知识点:
事件:
select:当用户手动勾选数据行的 Checkbox 时触发的事件,参数:selection, row
select-all:当用户手动勾选全选 Checkbox 时触发的事件,参数:selection
selection-change:当选择项发生变化时会触发该事件,参数:selection
方法:
clearSelection:多选表格,清空用户选择
toggleRowSelection:用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) row, selected
toggleAllSelection:用于多选表格,切换所有行的选中状态