Vue A-Table 分页改变后保留选中行数据

在使用 Vue A-Table 组件时,当进行分页操作时,默认情况下选中的行数据会随着分页改变而清空。如果需要在分页改变后依然保留之前选中的行数据,需要进行一些处理。

步骤:

  1. 定义一个数组保存选中行数据

    data 中定义一个数组 selectedRows 用于保存选中的行数据:

    data() {
      return {
        selectedRows: [], // 保存选中的行数据
        // 其他数据...
      }
    }
    
  2. 在分页改变之前保存选中行数据

    handleTableChange 方法中,在分页改变之前将当前选中的行数据保存到 selectedRows 数组中:

    handleTableChange(pagination, filters, sorter) {
      // 保存当前选中的行数据
      this.selectedRows = this.$refs.table.selectionRows;
      // 其他处理逻辑...
    }
    
  3. onSelectChange 方法中重新设置选中行数据

    onSelectChange 方法中,将 selectedRows 数组的数据赋值给 selectionRows 参数:

    onSelectChange(selectedRowKeys, selectionRows) {
      // 将selectedRows数组的数据赋值给selectionRows参数
      selectionRows = this.selectedRows;
      // 其他处理逻辑...
    }
    

代码示例:

<template>
  <a-table
    ref="table"
    size="middle"
    bordered
    rowKey="id"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="ipagination"
    :loading="loading"
    :rowSelection="rowSelection"
    class="j-table-force-nowrap"
    @change="handleTableChange">
  </a-table>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';

export default {
  setup() {
    const columns = ref([]);
    const dataSource = ref([]);
    const ipagination = ref({});
    const loading = ref(false);
    const selectedRows = ref([]);

    const rowSelection = {  // 定义选中行配置
      onChange: (selectedRowKeys, selectionRows) => {
        selectionRows = selectedRows.value;
        // 其他处理逻辑...
      }
    };

    const handleTableChange = (pagination, filters, sorter) => {
      // 保存当前选中的行数据
      selectedRows.value = tableRef.value.selectionRows;
      // 其他处理逻辑...
    };

    const tableRef = ref(null);

    onMounted(() => {
      // 初始化数据
      // ...
    });

    return {
      columns,
      dataSource,
      ipagination,
      loading,
      rowSelection,
      handleTableChange,
      tableRef
    };
  }
};
</script>

注意:

  • 以上代码示例仅供参考,实际使用中需要根据具体情况进行调整。
  • 在分页改变之前保存选中行数据时,需要确保 selectionRows 属性是可访问的,并且数据已经被更新。
  • 在重新设置选中行数据时,需要确保 selectionRows 属性是可修改的,并且能够正确更新选中的行数据。

通过以上方法,就可以在分页改变后依然保留之前选中的行数据。

Vue A-Table 分页改变后保留选中行数据

原文地址: https://www.cveoy.top/t/topic/qlG6 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录