el-table单击行改变列头的checkbox状态

原创

在做后台管理系统的时候遇到这样的需求——点击表格的某一行时使这行第一列的checkbox选中，再次点击时取消选中。而el-table组件checkbox的状态改变事件是挂在勾选框上的。那该如何实现点击行选中呢？

我当时的大概思路是：

1. 查找表示checkbox状态的属性
2. 给行添加点击事件
3. 在事件中让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方法切换状态。