How to keep check state in el-table(ElementUI) when using Paging

el-table with paging

If your page has el-table which including paging. el-table doesn't keep checked state by default when switching pages.

The solution is, set reserve-selection option to true. Then you can keep checked even if you switch page using paging. Also, don't forget to set row-key option too, otherwise you can't get row key.

<el-table
  ref="deviceListTable"
  class="device_list_form"
  :data="list"
  :row-key="getRowKey"
  @selection-change="handleTableSelectionChange"
>
  <el-table-column type="selection" width="55" :reserve-selection="true" />
  <el-table-column prop="uuid" label="UUID" width="200" />
  <el-table-column label="DeviceName">
    <template slot-scope="scope">
      <SelectItem :label="scope.row.deviceName" name="DeviceName" />
    </template>
  </el-table-column>
  <el-table-column label="DeviceLabel">
    <template slot-scope="scope">
      <SelectItem :labels="scope.row.labels" name="DeviceLabel" />
    </template>
  </el-table-column>
</el-table>