feat: 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)

This commit is contained in:
dap
2025-05-16 16:48:22 +08:00
parent 10b8b81954
commit 96b8ae94fd
4 changed files with 43 additions and 5 deletions

View File

@@ -1,4 +1,5 @@
import type { VxeGridPropTypes } from '@vben/plugins/vxe-table';
import type { MaybePromise } from '@vben/types';
import { h } from 'vue';
@@ -133,3 +134,25 @@ export function addSortParams(
params.orderByColumn = orderByColumn;
params.isAsc = isAsc;
}
/**
* 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)
*
* @param tableApi 表格api
* @param callback 回调
*/
export async function preserveTreeTableState(
tableApi: ReturnType<typeof useVbenVxeGrid>[1],
callback: () => MaybePromise<void>,
) {
// 保存当前状态
const scrollState = tableApi.grid.getScroll();
const expandRecords = tableApi.grid.getTreeExpandRecords();
// 执行回调
await callback();
// 恢复状态
tableApi.grid.setTreeExpand(expandRecords, true);
tableApi.grid.scrollTo(scrollState.scrollLeft, scrollState.scrollTop);
}