iview table后端分页多选翻页选中回显

最新推荐文章于 2024-12-12 15:06:00 发布

原创

最新推荐文章于 2024-12-12 15:06:00 发布 · 3.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#iview

在使用iview的Table组件进行后端分页时，遇到多选问题，即翻页会导致之前页码的选择状态丢失。解决办法是通过在data中保存选中项，并在获取新数据时恢复选中状态。可以参考相关博客文章进行实现。

问题：在iview的table组件中，前端在多选时如果点击下一页则丢失了上一页table的多选数据（由于采用的后端分页，每次翻页会直接刷新为新数据）

定义data

 @Provide() selectedIds: any = new Set();

<Table border ref="selection" :columns="orderColums" :data="orderData" :loading="loadings.table" @on-select="handleSelectRow" @on-select-cancel="handleCancelRow" @on-select-all="handleSelectAll" @on-select-all-cancel="handleSelectAll">
            <template slot="loading"><Spin fix><Icon type="ios-loading" size=22 class="demo-spin-icon-load"></Icon></Spin></template>
          </Table>

// 处理table翻页选中的回显回来
    // cy 全选和取消全选时触发
    handleSelectAll (selection) {
      // 取消全选 数组为空
      if (selection.length === 0) {
        // cy 若取消全选，删除保存在selectedIds里和当前table数据的id一致的数据，达到，当前页取消全选的效果
        // 当前页的table数据
        let data