el-table中全选中和控制选中

table表格

写一个table表格，加上ref,添加一个el-table-column，设type属性为selection用于选中数据

// 给el-table  添加上ref=""
<el-table
        :data="dataList"
        border
        :row-style="{height:10+'px'}"
        :cell-style="{padding:5+'px'}"
        ref="mainTable"
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
</el-table>
<el-table-column
      type="selection"
      width="55">
</el-table-column>

toggleAllSelection全选中

获取完数据在后面加上这段代码即可。
this.$ refs.mainTable获取名字为mainTable的组件。
this.$nextTick的作用是在DOM更新之后再执行的，防止table列表为渲染上就改变选中方式而导致无效。

// 获取完数据调用
this.$nextTick(() => {
   this.$refs.mainTable.toggleAllSelection()
})

toggleRowSelection控制选中

toggleRowSelection 用于选中表格多行数据，第一个参数是某行数据（可以多行），如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

 <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>

写对应的方法，这里是官网示例代码，实际应用可加$nextTick

 toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }