From aa27b039e14d7374e3766d50aeee2ea708f910e1 Mon Sep 17 00:00:00 2001 From: K <1175047471@qq.com> Date: Tue, 19 Mar 2024 11:51:19 +0800 Subject: [PATCH] feat(BasicTable): asynchronous loading children node --- src/components/Table/src/BasicTable.vue | 21 +++++++++-- .../Table/src/components/ExpandIcon.vue | 37 +++++++++++++++++++ .../Table/src/hooks/useDataSource.ts | 17 ++++++++- src/components/Table/src/props.ts | 4 ++ src/components/Table/src/types/table.ts | 4 ++ 5 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 src/components/Table/src/components/ExpandIcon.vue diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index e70f4552..489b1ece 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -5,6 +5,7 @@ import { Table } from 'ant-design-vue' import { omit } from 'lodash-es' import type { BasicTableProps, ColumnChangeParam, InnerHandlers, SizeType, SlotBodyCellProps, TableActionType } from './types/table' import HeaderCell from './components/HeaderCell.vue' +import ExpandIcon from './components/ExpandIcon.vue' import { usePagination } from './hooks/usePagination' import { useColumns } from './hooks/useColumns' @@ -64,7 +65,8 @@ const { prefixCls } = useDesign('basic-table') const [registerForm, formActions] = useForm() const getProps = computed(() => { - return { ...props, ...unref(innerPropsRef) } as BasicTableProps + // Because there are a lot of ts errors using BasicTableProps, use any + return { ...props, ...unref(innerPropsRef) } as BasicTableProps }) const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false) @@ -109,6 +111,7 @@ const { reload, getAutoCreateKey, updateTableData, + loadData, } = useDataSource( getProps, { @@ -315,19 +318,29 @@ emit('register', tableAction, formActions) + + - - - + + diff --git a/src/components/Table/src/components/ExpandIcon.vue b/src/components/Table/src/components/ExpandIcon.vue new file mode 100644 index 00000000..5c015694 --- /dev/null +++ b/src/components/Table/src/components/ExpandIcon.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts index d75173d0..eb3c620a 100644 --- a/src/components/Table/src/hooks/useDataSource.ts +++ b/src/components/Table/src/hooks/useDataSource.ts @@ -23,7 +23,7 @@ interface SearchState { filterInfo: Record } export function useDataSource( - propsRef: ComputedRef, + propsRef: ComputedRef>, { getPaginationInfo, setPagination, @@ -176,7 +176,7 @@ export function useDataSource( const row = data[i] let targetKeyName: string = rowKeyName as string if (isFunction(rowKeyName)) - targetKeyName = rowKeyName(row) + targetKeyName = rowKeyName(row) as string if (row[targetKeyName] === key) return { index: i, data } @@ -348,6 +348,18 @@ export function useDataSource( } } + async function loadData(record: T & { children?: T[] }) { + const { load } = propsRef.value + if (!load || record.children?.length) + return + + try { + const res = await load(record) + record.children = res + } + catch {} + } + function setTableData(values: T[]) { dataSourceRef.value = values as Recordable[] } @@ -385,5 +397,6 @@ export function useDataSource( insertTableDataRecord, findTableDataRecord, handleTableChange, + loadData, } } diff --git a/src/components/Table/src/props.ts b/src/components/Table/src/props.ts index d214c94c..d225bc05 100644 --- a/src/components/Table/src/props.ts +++ b/src/components/Table/src/props.ts @@ -52,6 +52,10 @@ export function defineTableProps() { >, default: null, }, + load: { + type: Function as PropType<(record: T) => Promise>, + default: null, + }, beforeFetch: { type: Function as PropType, default: null, diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts index e25e56ab..6e68f732 100644 --- a/src/components/Table/src/types/table.ts +++ b/src/components/Table/src/types/table.ts @@ -173,6 +173,10 @@ export interface BasicTableProps> { * 接口请求对象, 返回类型同 `src/settings/componentSetting.ts > table > fetchSetting` */ api?: (...arg: any) => Promise + /** + * 树形懒加载请求对象 + */ + load?: (record: T & { children?: T[] }) => Promise // 请求之前处理参数 beforeFetch?: Fn // 自定义处理接口返回参数