原创
在做后台管理系统的时候遇到这样的需求——点击表格的某一行时使这行第一列的checkbox
选中,再次点击时取消选中。而el-table
组件checkbox
的状态改变事件是挂在勾选框上的。那该如何实现点击行选中呢?
我当时的大概思路是:
- 查找表示
checkbox
状态的属性 - 给行添加点击事件
- 在事件中让
checked != checked
理清了思路就开始行动,查找文档之后,在Table Methods
栏找到了toggleRowSelection
方法。
toggleRowSelection(row, selected)
用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
很显然,这是饿了么团队开的口子,便于我们来控制chckbox
,且省去了逻辑上的处理,直接调用就可以切换状态。
解决了控制状态问题,剩下就是绑定事件了,在Table Events
栏,我找到了cell-click
方法。
cell-click( (row, column, cell, event) => { } )
当某个单元格被点击时会触发该事件
有了状态切换,有了事件,一切都变得很简单了,直接贴代码:
rowChecked(row, event, column){
this.$refs.tableData.toggleRowSelection(row);
}
另外,vue
中想要拿到dom
节点,需要在组件上加上ref = domName
属性,然后在用this.$refs[domName]
操作节点,在这里,我们先在组件上绑定cell-click
事件,触发事件名取为rowChecked
,在事件中使用this.$refs.tableData
拿到表格节点,然后调用它的toggleRowSelection
方法切换状态。