element-ui的表格有多选框时翻页记住之前选择的数据

场景描述:
element-ui的table表格数据有提供多选框的功能,只要在表格列中多加一列就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。
解决办法:
element-ui提供了reserve-selection,它仅对 type=selection 的列有效,类型为 Boolean,为 true时会在数据更新之后记住之前选择的数据。(需要指定row-key
代码如下:

<el-table

  :data="tableData"

  :row-key="getRowKey"

  ref="dataTable"

  @selection-change="handleSelectionChange"

  border>

  <el-table-column type="selection" :reserve-selection="true"> </el-table-column>

  <el-table-column prop="name" label="姓名"> </el-table-column>

  <el-table-column prop="phone" label="手机号"> </el-table-column>

</el-table>

methods: {

  // 指定一个key标识这一行的数据

  getRowKey (row) { return row.id }, // val表示选中的表格行数据

  handleSelectionChange (val) { console.log(val) },

}

posted @ 2020-10-15 16:25  之鹿喵  阅读(732)  评论(0编辑  收藏  举报