emement-ui e-table表格使用多选,当翻页时已选择数据丢失

element-ui中使用el-table表格进行多选操作时,当勾选了第一页数据,再点击第二页后第一页的选中数据被清空

查询官方文档发现给出了 row-key 和 reserve-selection
  • row-key
    行数据的Key,用来优化Table的渲染;在使用reserve-selection功能与显示树形数据时,该属性是必填的。
  • reserve-selection
    仅对type=selection 的列有效,类型为Boolean,为true则会在数据更新之后保留之前选中的数据(需指定row-key)
解决方法
  • :row-key="getRowKey"
    写在el-table 中,methods中声明getRowKey()方法
<el-table :data="holidayTableData" border :row-key="getHolidayRowKey"
  ref="holidayTableDataRef"
  @select="handleSelectAddSingle"
  @select-all="handleSelectAddAll"
>
  <el-table-column align="center" type="selection" width="55" reserve-selection="true"></el-table-column>
  <el-table-column align="center" prop="name" label="名称"></el-table-column>:formatter="formatterHolidayDate"></el-table-column>
</el-table>
getHolidayRowKey(row){
  return row.id;
},
  • :reserve-selection="true"
    写在el-table-column中type为select的行中
 <el-table-column align="center" type="selection" width="55" reserve-selection="true"></el-table-column>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容