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

1.场景描述:
antd的table表格数据有提供多选框的功能,只要设置rowSelection属性就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。
解决办法:
antd提供了preserveSelectedRowKeys,类型为 Boolean,为 true时会在数据更新之后记住之前选择的数据。(需要指定rowKey)
html代码如下

        <a-table
              :loading="loadingShow"
              :pagination="false"
              :rowSelection="rowSelection"
              :columns="columns"
              :data-source="dataSource"
              :scroll="{ x: scrollX ? scrollX : false, y: scrollY ? scrollY : false }"
              :bordered="bordered"
              :customRow="Dclick"
              :size="'middle'"
              :rowKey="(record) => record.id"
            >
            </s-table>

js代码

    data() {
    return {
      select_rows: [], // 批量选中的行
      selectedRowKeys: [], // 批量选中的key
    };
  },
computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return !this.hideCheckBox
        ? {
            // preserveSelectedRowKeys: true, //翻页选择上一页数据办法1
            columnWidth: this.columnWidth ? this.columnWidth : 100,
            selectedRowKeys, // 一定要加上这一行代码,清除才会有作用
            onChange: (selectedRowKeys, selectedRows) => {
              //   console.log(
              //     `selectedRowKeys: ${selectedRowKeys}`,
              //     'selectedRows: ',
              //     selectedRows,
              //   );
              this.selectedRowKeys = selectedRowKeys;
              this.select_rows = selectedRows;
            },
            //翻页选择上一页数据办法2
            onSelect: (record, selected) => {
              console.log('勾选', selected);
              selected
                ? this.selectedRowKeys.push(record)
                : this.selectedRowKeys.splice(
                    this.selectedRowKeys.findIndex(x => x.id === record.id),

                    1,
                  );
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
              console.log('all');
              this.selectedRowKeys = selected
                ? this.selectedRowKeys.concat(changeRows)
                : this.selectedRowKeys.filter(
                    x => !changeRows.find(i => i.id === x.id),
                  );
            },
          }
        : null;
    },
  },

this.selectedRowKeys 就是选中的数据

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值