Element UI el-table 表格多选的使用

开启多线功能

新增一列，并将其 type 属性设置为 selection

<el-table-column type="selection"></el-table-column>

的select-on-indeterminate属性：【逻辑值】

当有部分行被选中时，单机“全选”功能，此时对其他复选框的解决方法。

<el-table :select-on-indeterminate = 'false'></el-table> // 全部不选中
<el-table :select-on-indeterminate = 'true'></el-table> // 全部选中

的selectable属性：

功能：设置哪些行可以被选择，那些行不能被选择。
取值：是一个函数，返回true的条件行可以被选择，返回false条件行不可以被选择。

  <el-table-column type=“selection” :selectable=“selectable”>
   selectable(row,index){
     if(!(index%2)){
        return false;   //偶数行不能被选择
}
return true;   //奇数行可以被选择
}

的事件

1. select（selection, row）：selection - 存储当前被选中的所有行数据；row - 存储用户手动单击的那一行数据；
2. select-all（selection）：selection - 存储当前被选中的所有行数据
3. selection-change（selection）：selection - 存储当前被选中的所有行数据

的方法

toggleRowSelection(row, selected) 将指定行的选中状态切换为selected状态。若省略selected参数，则将指定行在选中和未被选中之间切换。

toggleAllSelection()：切换所有行的选中状态。
this.$refs.refName.toggleRowSelection（this.tableData[2], [ false / true ]）; selected参数的取值时逻辑值。

clearSelection()：清除掉所有选中状态
this.$refs.refName.clearSelection()

1. 给table添加 ref 属性，用于获取真实 DOM
2. this.$nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。