From dbc206336d420b977cfe77a6d77061120c1b0de4 Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 19:07:36 +0800 Subject: [PATCH 1/4] fix(table): enhanced table reset expanded tree nodes --- src/table/hooks/usePagination.tsx | 8 +++++++- src/table/hooks/useTreeData.tsx | 6 ++++-- src/table/table.en-US.md | 2 +- src/table/table.md | 2 +- src/table/type.ts | 2 +- 5 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/table/hooks/usePagination.tsx b/src/table/hooks/usePagination.tsx index 9c72b5193..720fbb3c7 100644 --- a/src/table/hooks/usePagination.tsx +++ b/src/table/hooks/usePagination.tsx @@ -44,7 +44,13 @@ export default function usePagination(props: TdBaseTableProps, context: SetupCon [data], () => { if (!pagination.value || !pagination.value.defaultCurrent) return; - updateDataSourceAndPaginate(pagination.value.defaultCurrent, pagination.value.defaultPageSize); + const isControlled = Boolean(pagination.value.current); + // 存在受控属性时，立即返回不再执行后续内容 + if (isControlled) return; + updateDataSourceAndPaginate( + innerPagination.value.current ?? pagination.value.defaultCurrent, + innerPagination.value.pageSize ?? pagination.value.defaultPageSize, + ); }, { immediate: true }, ); diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index 096fbb28e..a91414ed7 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -98,8 +98,10 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC ); function resetData(data: TableRowData[]) { - store.value.initialTreeStore(data, props.columns, rowDataKeys.value); - if (tExpandedTreeNode.value?.length) { + const { columns, expandedTreeNodes, defaultExpandedTreeNodes } = props; + store.value.initialTreeStore(data, columns, rowDataKeys.value); + const hasSettingExpandedTreeNodes = !!(expandedTreeNodes?.length || defaultExpandedTreeNodes?.length); + if (tExpandedTreeNode.value?.length && hasSettingExpandedTreeNodes) { updateExpandOnDataChange(data); } else { dataSource.value = [...data]; diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md index ca2a6cf57..f3d373257 100644 --- a/src/table/table.en-US.md +++ b/src/table/table.en-US.md @@ -309,7 +309,7 @@ validateTrigger | String | 'exit' | when to trigger validate。Typescript：`'ex name | type | default | description | required -- | -- | -- | -- | -- -checkStrictly | Boolean | true | \- | N +checkStrictly | Boolean | false | \- | N childrenKey | String | children | \- | N defaultExpandAll | Boolean | false | \- | N expandTreeNodeOnClick | Boolean | false | \- | N diff --git a/src/table/table.md b/src/table/table.md index ccf71a819..82824db0c 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -309,7 +309,7 @@ validateTrigger | String | 'exit' | 触发校验的时机，有 2 种：退出 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -checkStrictly | Boolean | true | 表示树形结构的行选中（多选），父子行选中是否独立 | N +checkStrictly | Boolean | false | 表示树形结构的行选中（多选），父子行选中是否独立 | N childrenKey | String | children | 树形结构子节点字段，示例：`childrenKey='list'`。一般应用在数据 `data` 的子节点字段不是 `children` 的场景 | N defaultExpandAll | Boolean | false | 是否默认展开全部，仅默认情况有效。如果希望自由控制树形结构的展开或收起，可使用实例方法 `expandAll` 和 `foldAll` | N expandTreeNodeOnClick | Boolean | false | 是否在点击行时展开树形结构节点 | N diff --git a/src/table/type.ts b/src/table/type.ts index e050c84c4..2fb5fde12 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -928,7 +928,7 @@ export interface TableEditableCellConfig export interface TableTreeConfig { /** * 表示树形结构的行选中（多选），父子行选中是否独立 - * @default true + * @default false */ checkStrictly?: boolean; /** From 9e28eb73279033aa17d254345fb86c344da5b215 Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 19:21:50 +0800 Subject: [PATCH 2/4] fix(table): tree expand --- src/table/hooks/useTreeData.tsx | 18 ++++++++++-------- src/table/hooks/useTreeDataExpand.ts | 2 ++ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index a91414ed7..1846b9e3e 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -39,12 +39,13 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC })); const { - tExpandedTreeNode, expandAll, foldAll, updateExpandOnDataChange, onExpandFoldIconClick, - } = useTreeDataExpand( - props, - context, - { store, dataSource, rowDataKeys }, - ); + tExpandedTreeNode, + isDefaultExpandedTreeNodesExecute, + expandAll, + foldAll, + updateExpandOnDataChange, + onExpandFoldIconClick, + } = useTreeDataExpand(props, context, { store, dataSource, rowDataKeys }); const checkedColumn = computed(() => columns.value.find((col) => col.colKey === 'row-select')); @@ -100,9 +101,10 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC function resetData(data: TableRowData[]) { const { columns, expandedTreeNodes, defaultExpandedTreeNodes } = props; store.value.initialTreeStore(data, columns, rowDataKeys.value); - const hasSettingExpandedTreeNodes = !!(expandedTreeNodes?.length || defaultExpandedTreeNodes?.length); - if (tExpandedTreeNode.value?.length && hasSettingExpandedTreeNodes) { + const defaultNeedExpand = Boolean(!isDefaultExpandedTreeNodesExecute.value && defaultExpandedTreeNodes?.length); + if (tExpandedTreeNode.value?.length && !!(expandedTreeNodes || defaultNeedExpand)) { updateExpandOnDataChange(data); + isDefaultExpandedTreeNodesExecute.value = true; } else { dataSource.value = [...data]; } diff --git a/src/table/hooks/useTreeDataExpand.ts b/src/table/hooks/useTreeDataExpand.ts index 872dcc1f7..a6822bc18 100644 --- a/src/table/hooks/useTreeDataExpand.ts +++ b/src/table/hooks/useTreeDataExpand.ts @@ -19,6 +19,7 @@ export function useTreeDataExpand( const { data, expandedTreeNodes, tree } = toRefs(props); const isDefaultExpandAllExecute = ref(false); + const isDefaultExpandedTreeNodesExecute = ref(false); const [tExpandedTreeNode, setTExpandedTreeNode] = useDefaultValue( expandedTreeNodes, props.defaultExpandedTreeNodes, @@ -138,6 +139,7 @@ export function useTreeDataExpand( return { tExpandedTreeNode, + isDefaultExpandedTreeNodesExecute, expandAll, foldAll, onExpandFoldIconClick, From a285deb338edac21dc0efe7509a8f49b1c0b156c Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 19:42:39 +0800 Subject: [PATCH 3/4] fix(table): drag sort in pagination --- src/table/hooks/useDragSort.ts | 20 ++++++++++++++------ src/table/interface.ts | 7 +++++++ src/table/primary-table.tsx | 8 +++++++- 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index 2aa0c8368..cecf6a1cc 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -13,9 +13,11 @@ import useClassName from './useClassName'; import log from '../../_common/js/log'; import swapDragArrayElement from '../../_common/js/utils/swapDragArrayElement'; import { getColumnDataByKey, getColumnIndexByKey } from '../utils'; +import { SimplePageInfo } from '../interface'; export default function useDragSort(props: TdPrimaryTableProps, context: SetupContext) { const { sortOnRowDraggable, dragSort, data } = toRefs(props); + const innerPagination = ref(props.pagination); const { tableDraggableClasses, tableBaseClass, tableFullRowClasses } = useClassName(); const columns = ref(props.columns || []); const primaryTableRef = ref(null); @@ -59,11 +61,12 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo ); // 本地分页的表格，index 不同，需加上分页计数 - function getDataPageIndex(index: number) { - const { pagination } = props; + function getDataPageIndex(index: number, pagination: SimplePageInfo) { + const current = pagination.current ?? pagination.defaultCurrent; + const pageSize = pagination.pageSize ?? pagination.defaultPageSize; // 开启本地分页的场景 - if (!props.disableDataPage && pagination && data.value.length > pagination.pageSize) { - return pagination.pageSize * (pagination.current - 1) + index; + if (!props.disableDataPage && pagination && data.value.length > pageSize) { + return pageSize * (current - 1) + index; } return index; } @@ -93,13 +96,17 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo currentIndex -= 1; targetIndex -= 1; } + if (innerPagination.value) { + currentIndex = getDataPageIndex(currentIndex, innerPagination.value); + targetIndex = getDataPageIndex(targetIndex, innerPagination.value); + } const params: DragSortContext = { data: data.value, currentIndex, current: data.value[currentIndex], targetIndex, target: data.value[targetIndex], - newData: swapDragArrayElement([...props.data], getDataPageIndex(currentIndex), getDataPageIndex(targetIndex)), + newData: swapDragArrayElement([...props.data], currentIndex, targetIndex), e: evt, sort: 'row', }; @@ -207,7 +214,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo } // 注册拖拽事件 - watch([primaryTableRef], ([val]: [any]) => { + watch([primaryTableRef, columns, dragSort], ([val]: [any]) => { if (!val || !val.$el) return; // regis after table tr rendered const timer = setTimeout(() => { @@ -229,6 +236,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo isRowDraggable, isRowHandlerDraggable, isColDraggable, + innerPagination, setDragSortPrimaryTableRef, setDragSortColumns, }; diff --git a/src/table/interface.ts b/src/table/interface.ts index 6037f3fcd..51fadc01c 100644 --- a/src/table/interface.ts +++ b/src/table/interface.ts @@ -74,3 +74,10 @@ export interface FixedColumnInfo { export type RowAndColFixedPosition = Map; export type TableTreeExpandType = 'expand-all' | 'fold-all' | 'user-reaction-change' | 'props-change'; + +export interface SimplePageInfo { + current?: number; + defaultCurrent?: number; + pageSize?: number; + defaultPageSize?: number; +} diff --git a/src/table/primary-table.tsx b/src/table/primary-table.tsx index 28fbe9a70..633ee269f 100644 --- a/src/table/primary-table.tsx +++ b/src/table/primary-table.tsx @@ -96,7 +96,12 @@ export default defineComponent({ // 拖拽排序功能 const { - isRowHandlerDraggable, isRowDraggable, isColDraggable, setDragSortPrimaryTableRef, setDragSortColumns, + isRowHandlerDraggable, + isRowDraggable, + isColDraggable, + innerPagination, + setDragSortPrimaryTableRef, + setDragSortColumns, } = useDragSort(props, context); const { renderTitleWidthIcon } = useTableHeader(props); @@ -241,6 +246,7 @@ export default defineComponent({ }); const onInnerPageChange = (pageInfo: PageInfo, newData: Array) => { + innerPagination.value = { ...innerPagination.value, ...pageInfo }; currentPaginateData.value = newData; props.onPageChange?.(pageInfo, newData); // Vue3 ignore next line From e2d970b87e62df18f016a4c0410d989429f47ebb Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Mon, 28 Aug 2023 20:38:48 +0800 Subject: [PATCH 4/4] feat(table): drag sort pagination --- src/table/_example/drag-sort.vue | 34 +++- test/snap/__snapshots__/csr.test.js.snap | 248 ++++++++++++++++++++++- test/snap/__snapshots__/ssr.test.js.snap | 2 +- 3 files changed, 275 insertions(+), 9 deletions(-) diff --git a/src/table/_example/drag-sort.vue b/src/table/_example/drag-sort.vue index c4067f1a2..9e5077b5b 100644 --- a/src/table/_example/drag-sort.vue +++ b/src/table/_example/drag-sort.vue @@ -3,7 +3,16 @@
- +