element-ui中多选表格，配合分页的情况实现数据回显打勾。

---

element-ui中多选表格，配合分页的情况实现数据回显打勾。很常见的需求，element-ui官方实际上也给出了解决方案：

官方的解决方案

实际上我们就可以用reserve-selection与row-key结合的方式来实现这个需求。

---

实现

在<el-table>上指定row-key，并在<el-table-column :reserve-selection="true" type="selection">添加属性:reserve-selection为true，即可实现回显.
hasSelected即为所有选择的rows的id数组.

关键代码如下：

<el-table
  ref="multipleTable"
  :row-key="getRowKeys"
  :data="tableData.content"
  border
  style="width: 100%"
  highlight-current-row
  @current-change="handleRowChange"
  @selection-change="handleSelectionChange"
>
  <el-table-column :reserve-selection="true" type="selection" width="50"></el-table-column>
  <el-table-column type="index" width="50"></el-table-column>
  <el-table-column prop="name" label="姓名(id)" width="180"></el-table-column>
  <el-table-column prop="company.companyName" label="单位名称"></el-table-column>
  <el-table-column prop="company.companyType" label="单位类型"></el-table-column>
  <el-table-column prop="phone" label="联系方式"></el-table-column>
  <el-table-column prop="idCard" label="身份证号码"></el-table-column>
  <el-table-column prop="enabled.type" label="激活状态"></el-table-column>
</el-table>
<el-footer class="marginTop h40">
    <el-pagination
      class="pagination-compact"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage+1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="sizes, total, prev, pager, next, jumper"
      :total="tableData.totalElements"
    ></el-pagination>
</el-footer>

  data() {
    return {
      hasSelected:[],
      getRowKeys(row) {
        return row.id;
      },
    };
  },
  methods: {
    handleSelectionChange(rows) {
      this.hasSelected = [];
      if (rows) {
          rows.forEach(row => {
              if (row) {
                  this.hasSelected.push(row.id);
              }
          });
      }
      console.log(this.hasSelected);
    },
  },