el-table加分页后多选翻页后仍保持选中状态

在el-table中加 :row-key=“getRowKeys”,在type为selection的el-table-column中添加:reserve-selection=“true”,在js的methods中加getRowKeys方法,即可实现table翻页及搜索查询后仍保持之前的选中状态;

<el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      size="mini"
      stripe
      height="560px"
      @row-click="handleClickTableRow"
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys"
    >
    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
getRowKeys(row) {
      return row.id;
    },

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤实现el-table的跨页多选: 1. 在el-table中添selection属性,用于存储选中的行数据。 2. 在el-table-column中添type属性,设置为selection,用于显示复选框。 3. 在el-pagination中添@current-change事件,用于监听分页器的页码变化。 4. 在@current-change事件中,判断当前页是否为第一页,如果是,则将选中的行数据存储到selection中;如果不是,则将选中的行数据追到selection中。 5. 在el-table中添@select-all事件,用于全选当前页的数据。 6. 在@select-all事件中,判断当前页是否为第一页,如果是,则将当前页的所有数据存储到selection中;如果不是,则将当前页的所有数据追到selection中。 以下是示例代码: ``` <template> <div> <el-table :data="tableData" :row-key="row => row.id" @select-all="handleSelectAll"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <el-pagination :total="total" :page-size="pageSize" @current-change="handlePageChange"></el-pagination> </div> </template> <script> export default { data() { return { tableData: [], selection: [], total: 0, pageSize: 10, currentPage: 1 } }, methods: { handlePageChange(currentPage) { if (currentPage === 1) { this.selection = [] } this.currentPage = currentPage }, handleSelectAll(selection) { if (this.currentPage === 1) { this.selection = selection } else { this.selection = this.selection.concat(selection) } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值