项目场景：

根据项目需求，要求在表格外加【全选】复选框，切换分页也需将每一行都勾选上

---

实现方式：

借用element-ui文档的这几个方法和属性

<el-checkbox
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
:reserve-selection="true"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="0">
    </el-pagination>

 

handleCheckAllChange(val){
    if (val == true) {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable.toggleAllSelection();
        
      } else {
        this.$refs.multipleTable.clearSelection();
      }
}

若分页数据是由后端提供的则需要在获取表格数据时，判断【全选】复选框是否勾选

if (this.checkAll == true) {
  this.$refs.multipleTable.clearSelection();
  this.$refs.multipleTable.toggleAllSelection();
 } else {
  this.$refs.multipleTable.clearSelection();
}