elementui表格多选取消选择 elementui取消表格选中

1、效果图

2、一些思路+碰到的报错

（1）row：表格的行数据，选中/取消选中哪行，就是哪行的数据

注意：row只能是表格的data属性指定的数组中的数据，放其它数组中数据是无效的

（2）selected：true-选中；false-取消选中

this.$refs.table.toggleRowSelection(row, selected)

（3）在打开弹窗时，需要先让弹窗的visible变为true，再调获取表格数据的接口。

明明this.$refs里面有东西，但是打印this.$refs.xxx的时候却是undefined。

 ref 只有等页面加载完成好之后你才能调用 this.$refs ，如果你使用v-if 、v-for渲染页面的话，那么在刚开始页面没没渲染之前你是拿不到this.$refs的，所以要等到页面渲染之后拿才可以。

解决方法：

如果写在method中，那么可以使用 this.$nextTick(() => {})等页面渲染好再调用this.$refs.xxx，这样就可以了。

（4）控制台报错：“Error: row is required when get row identity”

参考1（主要的）：“Error: row is required when get row identity“-CSDN博客

参考2：element-ui之“row is required when get row identity”报错 - 知乎

（5）设置表格勾选

 参考1: 

【解决】Element UI表格Table组件，点击翻页后之前选中的数据仍保留，勾选中的样式也会回显_@selection-change="" 已选中的数据,从其他地方移除,表格的数据还是选中的-CSDN博客

参考2: ElementUI的表格设置勾选toggleRowSelection_element table togglerowselection-CSDN博客

注意：选中表格数据的数组要赋值1个创建的新数组

参考3:

基于el-table二次封装的表格组件，toggleRowSelection 默认选中事件被清空的问题_toggleselect 对应的清空-CSDN博客

注意：

有的时候会提示toggleRowSelection is not a function 

此时打印this.$refs.table。看看它是什么，有时候他是个数组，所以需要改成

this.$refs.table[0].toggleRowSelection(item, true);

有时候他是个对象，在对象里找，可能会找到$children，这个$children是个数组，里面的第一项里有toggleRowSelection属性，所以这种情况下可以改成(这种情况一般都是因为各个公司基于el-table进行了二次封装导致的，所以得在里面慢慢找)

this.$refs.table.$children[0].toggleRowSelection(item, true);

3、代码

<el-table ref="multipleClusterTable" v-loading="dialogClusterLoading" :data="dialogClusterDataList" :row-key="getDialogClusterRowId" @selection-change="selectedDialogClusterDataCurrentRow">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column label="集群名称" prop="name" min-width="120" show-overflow-tooltip></el-table-column>
  <el-table-column label="URL" prop="accessUrl" min-width="120" show-overflow-tooltip></el-table-column>
</el-table>

getDialogClusterRowId(row){
  return row.id;  // row-key绑定的必须为唯一值
},

selectedDialogClusterDataCurrentRow(val){
  this.currentDialogClusterData = val;
},

if(this.isModify == false){
  //新增的时候,表格当前选中数据为空
  this.currentDialogClusterData= [];
}else{
  //修改的时候，判断是否有已经选择过的数据
  var selectionClusterArr = [];
  selectionClusterArr = this.currentDialogClusterData;
  if (selectionClusterArr.length > 0) { // 判断是否存在勾选过的数据
    this.$nextTick(() => {
      selectionClusterArr.forEach( selectItem => { // 勾选到的数据
        let row = this.dialogClusterDataList.filter(item => item.id == selectItem.id)[0];
        if (row) {
          this.$refs.multipleClusterTable.toggleRowSelection(row,true);
        }
      });
    })
  }
}