When antd's form has multiple selection boxes, turn the page to remember the previously selected data

1. Scenario description:
The table data of antd has the function of providing multiple selection boxes, as long as the rowSelection property is set, the data of the table can be selected. But sometimes the data in the table is paged, and the paged generally needs to re-request the background data, so that the selected state of the data on the previous page is gone.
Solution:
antd provides preserveSelectedRowKeys, the type is  Boolean , when it is true, it will remember the previously selected data after the data is updated. (rowKey needs to be specified)
The html code is as follows

        <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 code

    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 is the selected data

Guess you like

Origin blog.csdn.net/slow097/article/details/126173756