Vue A-Table 分页改变后保留选中行数据
Vue A-Table 分页改变后保留选中行数据
在使用 Vue A-Table 组件时,当进行分页操作时,默认情况下选中的行数据会随着分页改变而清空。如果需要在分页改变后依然保留之前选中的行数据,需要进行一些处理。
步骤:
-
定义一个数组保存选中行数据
在
data中定义一个数组selectedRows用于保存选中的行数据:data() { return { selectedRows: [], // 保存选中的行数据 // 其他数据... } } -
在分页改变之前保存选中行数据
在
handleTableChange方法中,在分页改变之前将当前选中的行数据保存到selectedRows数组中:handleTableChange(pagination, filters, sorter) { // 保存当前选中的行数据 this.selectedRows = this.$refs.table.selectionRows; // 其他处理逻辑... } -
在
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属性是可修改的,并且能够正确更新选中的行数据。
通过以上方法,就可以在分页改变后依然保留之前选中的行数据。
原文地址: https://www.cveoy.top/t/topic/qlG6 著作权归作者所有。请勿转载和采集!