From f8d704795e0173c988016b114ff85c1e2e4b6d20 Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 14:47:37 +0800 Subject: [PATCH 1/7] feat(upload): loading text do not need --- src/upload/themes/dragger-file.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/upload/themes/dragger-file.tsx b/src/upload/themes/dragger-file.tsx index 7da499f68a..650249ad07 100644 --- a/src/upload/themes/dragger-file.tsx +++ b/src/upload/themes/dragger-file.tsx @@ -71,7 +71,7 @@ export default defineComponent({
} + trigger={(h, { open }: any) => } >
); From e7361313a6550dcb5146d77e7445ff36664723ea Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 14:48:01 +0800 Subject: [PATCH 2/7] docs(table): default value of tree.checkStrictly should be false --- src/table/table.en-US.md | 2 +- src/table/table.md | 2 +- src/table/type.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md index e1b9800ab8..dbe3db0d78 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 e8fbdf74c7..bec76f786f 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 e050c84c4f..2fb5fde125 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 b5edf405a16f2be20d01382027eccb985900df83 Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 18:33:11 +0800 Subject: [PATCH 3/7] fix(table): drag sort in pagination --- src/table/_example/drag-sort.vue | 60 ++-- src/table/_example/pagination-ajax.vue | 4 - src/table/hooks/useDragSort.ts | 24 +- src/table/hooks/usePagination.tsx | 3 + src/table/primary-table.tsx | 15 +- .../__snapshots__/vitest-upload.test.jsx.snap | 40 --- test/unit/snap/__snapshots__/csr.test.js.snap | 264 ++++++++++++++---- test/unit/snap/__snapshots__/ssr.test.js.snap | 4 +- 8 files changed, 292 insertions(+), 122 deletions(-) diff --git a/src/table/_example/drag-sort.vue b/src/table/_example/drag-sort.vue index 320e58674e..2925bc2b4e 100644 --- a/src/table/_example/drag-sort.vue +++ b/src/table/_example/drag-sort.vue @@ -3,7 +3,14 @@
- +
@@ -18,23 +25,44 @@ const statusNameListMap = { 2: { label: '审批过期', theme: 'warning', icon: }, }; -const initialData = []; -for (let i = 0; i < 5; i++) { - initialData.push({ - index: i + 1, - applicant: ['贾明', '张三', '王芳'][i % 3], - status: i % 3, - channel: ['电子签署', '纸质签署', '纸质签署'][i % 3], - detail: { - email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3], - }, - matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4], - time: [2, 3, 1, 4][i % 4], - createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4], - }); +function getData(total = 500) { + const initialData = []; + for (let i = 0; i < total; i++) { + initialData.push({ + index: i + 1, + applicant: `${['贾明', '张三', '王芳'][i % 3]}${i + 1}`, + status: i % 3, + channel: ['电子签署', '纸质签署', '纸质签署'][i % 3], + detail: { + email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3], + }, + matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4], + time: [2, 3, 1, 4][i % 4], + createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4], + }); + } + return initialData; } -const data = ref([...initialData]); +const data = ref(getData()); + +// 受控用法 +const pagination = ref({ + current: 2, + pageSize: 5, + total: 500, + onChange: (pageInfo) => { + pagination.value.current = pageInfo.current; + pagination.value.pageSize = pageInfo.pageSize; + }, +}); + +// 非受控用法 +// const pagination1 = ref({ +// defaultCurrent: 1, +// defaultPageSize: 5, +// total: 500, +// }) const columns = [ { colKey: 'applicant', title: '申请人', width: '100' }, diff --git a/src/table/_example/pagination-ajax.vue b/src/table/_example/pagination-ajax.vue index 4881c56e52..10e29587ac 100644 --- a/src/table/_example/pagination-ajax.vue +++ b/src/table/_example/pagination-ajax.vue @@ -32,7 +32,6 @@ const columns = [ width: 46, }, { - width: 200, colKey: 'name', title: '姓名', render(h, { type, row: { name } }) { @@ -43,7 +42,6 @@ const columns = [ { colKey: 'status', title: '申请状态', - width: '150', cell: (h, { _row, rowIndex }) => { const status = rowIndex % 3; return ( @@ -55,7 +53,6 @@ const columns = [ }, }, { - width: 200, colKey: 'phone', title: '联系方式', render(h, { row: { phone } }) { @@ -65,7 +62,6 @@ const columns = [ { colKey: 'email', title: '邮箱', - width: 180, ellipsis: true, }, ]; diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index d087966941..da74fcf85f 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -1,5 +1,5 @@ // 表格 行拖拽 + 列拖拽功能 -import { SetupContext, computed, toRefs, ref, watch, h } from 'vue'; +import { SetupContext, computed, toRefs, ref, watch, h, Ref } from 'vue'; import Sortable, { SortableEvent, SortableOptions, MoveEvent } from 'sortablejs'; import get from 'lodash/get'; import isFunction from 'lodash/isFunction'; @@ -10,9 +10,11 @@ import { hasClass } from '../../utils/dom'; import swapDragArrayElement from '../../_common/js/utils/swapDragArrayElement'; import { BaseTableColumns } from '../interface'; import { getColumnDataByKey, getColumnIndexByKey } from '../utils'; +import { PaginationProps } from '../../pagination'; export default function useDragSort(props: TdPrimaryTableProps, context: SetupContext) { const { sortOnRowDraggable, dragSort, data, rowKey } = toRefs(props); + const innerPagination = ref(props.pagination); const { tableDraggableClasses, tableBaseClass, tableFullRowClasses } = useClassName(); const primaryTableRef = ref(null); const columns = ref(props.columns || []); @@ -75,11 +77,12 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo ); // 本地分页的表格，index 不同，需加上分页计数 - function getDataPageIndex(index: number) { - const { pagination } = props; + function getDataPageIndex(index: number, pagination: PaginationProps) { + 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; } @@ -108,13 +111,19 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo currentIndex -= 1; targetIndex -= 1; } + if (innerPagination.value) { + // @ts-ignore + currentIndex = getDataPageIndex(currentIndex, innerPagination.value); + // @ts-ignore + 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', }; @@ -216,7 +225,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo } // 注册拖拽事件 - watch([primaryTableRef], ([val]: [any]) => { + watch([primaryTableRef, columns, dragSort], ([val]: [any]) => { if (!val || !val.$el) return; registerRowDragEvent(val.$el); registerColDragEvent(val.$el); @@ -230,6 +239,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo }); return { + innerPagination, isRowDraggable, isRowHandlerDraggable, isColDraggable, diff --git a/src/table/hooks/usePagination.tsx b/src/table/hooks/usePagination.tsx index e700eb6a43..97727c96e7 100644 --- a/src/table/hooks/usePagination.tsx +++ b/src/table/hooks/usePagination.tsx @@ -43,6 +43,9 @@ export default function usePagination(props: TdBaseTableProps, context: SetupCon [data], () => { if (!pagination.value || !pagination.value.defaultCurrent) return; + const isControlled = Boolean(pagination.value.current); + // 存在受控属性时，立即返回不再执行后续内容 + if (isControlled) return; updateDataSourceAndPaginate( innerPagination.value.current ?? pagination.value.defaultCurrent, innerPagination.value.pageSize ?? pagination.value.defaultPageSize, diff --git a/src/table/primary-table.tsx b/src/table/primary-table.tsx index 8ea3f178ea..188af2e88d 100644 --- a/src/table/primary-table.tsx +++ b/src/table/primary-table.tsx @@ -15,7 +15,7 @@ import useFilter from './hooks/useFilter'; import useDragSort from './hooks/useDragSort'; import useAsyncLoading from './hooks/useAsyncLoading'; import EditableCell, { EditableCellProps } from './editable-cell'; -import { PageInfo } from '../pagination'; +import { PageInfo, PaginationProps } from '../pagination'; import useClassName from './hooks/useClassName'; import useEditableRow from './hooks/useEditableRow'; import useStyle from './hooks/useStyle'; @@ -57,7 +57,7 @@ export default defineComponent({ ...primaryTableProps, }, - setup(props: TdPrimaryTableProps, context: SetupContext) { + setup(props, context) { const renderTNode = useTNodeJSX(); const { columns, columnController } = toRefs(props); const primaryTableRef = ref(null); @@ -90,8 +90,14 @@ export default defineComponent({ } = useFilter(props, context); // 拖拽排序功能 - const { isRowHandlerDraggable, isRowDraggable, isColDraggable, setDragSortPrimaryTableRef, setDragSortColumns } = - useDragSort(props, context); + const { + isRowHandlerDraggable, + isRowDraggable, + isColDraggable, + innerPagination, + setDragSortPrimaryTableRef, + setDragSortColumns, + } = useDragSort(props, context); const { renderTitleWidthIcon } = useTableHeader(props); const { renderAsyncLoading } = useAsyncLoading(props); @@ -247,6 +253,7 @@ export default defineComponent({ }); const onInnerPageChange = (pageInfo: PageInfo, newData: Array) => { + innerPagination.value = { ...innerPagination.value, ...pageInfo }; currentPaginateData.value = newData; props.onPageChange?.(pageInfo, newData); const changeParams: Parameters = [ diff --git a/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap b/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap index 2a2cf9708c..2dbf2f442a 100644 --- a/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap +++ b/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap @@ -63,14 +63,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, fail -
- 图片加载中 -
- - - @@ -233,14 +225,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, progr -
- 图片加载中 -
- - - @@ -408,14 +392,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe -
- 图片加载中 -
- - - @@ -578,14 +554,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe -
- 图片加载中 -
- - - @@ -748,14 +716,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, waiti -
- 图片加载中 -
- - - diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap index 344c14a0cb..ea710bd719 100644 --- a/test/unit/snap/__snapshots__/csr.test.js.snap +++ b/test/unit/snap/__snapshots__/csr.test.js.snap @@ -126748,35 +126748,35 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort.vue 1`] = ` - 贾明 + 王芳6 - 审批通过 + 审批过期 @@ -126784,7 +126784,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort.vue 1`] = ` - 电子签署 + 纸质签署 csr test ./src/table/_example/drag-sort.vue 1`] = ` class="t-table__ellipsis t-text-ellipsis" > - w.cezkdudy@lhll.au + p.cumx@rampblpa.ru - 2022-01-01 + 2022-02-01 - 张三 + 贾明7 - 审批失败 + 审批通过 @@ -126842,7 +126842,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort.vue 1`] = ` - 纸质签署 + 电子签署 csr test ./src/table/_example/drag-sort.vue 1`] = ` class="t-table__ellipsis t-text-ellipsis" > - r.nmgw@peurezgn.sl + w.cezkdudy@lhll.au - 2022-02-01 + 2022-03-01 - 王芳 + 张三8 - 审批过期 + 审批失败 @@ -126909,48 +126909,48 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort.vue 1`] = ` class="t-table__ellipsis t-text-ellipsis" > - p.cumx@rampblpa.ru + r.nmgw@peurezgn.sl - 2022-03-01 + 2022-04-01 - 贾明 + 王芳9 - 审批通过 + 审批过期 @@ -126958,7 +126958,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort.vue 1`] = ` - 电子签署 + 纸质签署 csr test ./src/table/_example/drag-sort.vue 1`] = ` class="t-table__ellipsis t-text-ellipsis" > - w.cezkdudy@lhll.au + p.cumx@rampblpa.ru - 2022-04-01 + 2022-01-01 - 张三 + 贾明10 - 审批失败 + 审批通过 @@ -127016,7 +127016,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort.vue 1`] = ` - 纸质签署 + 电子签署 csr test ./src/table/_example/drag-sort.vue 1`] = ` class="t-table__ellipsis t-text-ellipsis" > - r.nmgw@peurezgn.sl + w.cezkdudy@lhll.au - 2022-01-01 + 2022-02-01 @@ -127051,7 +127051,173 @@ exports[`csr snapshot test > csr test ./src/table/_example/drag-sort.vue 1`] = ` class="t-table__pagination-wrap" style="opacity: 1;" > - +
+
+
+ 共 500 项数据 +
+
+
+ +
+
+ +
+ + + + +
+ + + 5 条/页 + + + + + + + + +
+ +
+ + + +
+
+ +
+ + + +
+
    +
  • + 1 +
    • + + +
  • + 2 +
    • +
  • + 3 +
    • +
  • + 4 +
    • +
  • + 5 +
    • + +
  • + + + +
    • +
  • + 100 +
    • +
+ +
+ + + +
+ + +
+
csr test ./src/table/_example/pagination-ajax.vue 1 style="width: 46px;" /> diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap index 0b103efccf..237c4a09b1 100644 --- a/test/unit/snap/__snapshots__/ssr.test.js.snap +++ b/test/unit/snap/__snapshots__/ssr.test.js.snap @@ -1008,7 +1008,7 @@ exports[`ssr snapshot test > ssr test ./src/table/_example/data-sort.vue 1`] = ` exports[`ssr snapshot test > ssr test ./src/table/_example/drag-col-sort.vue 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-01-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-02-01
王芳审批过期纸质签署
p.cumx@rampblpa.ru
2022-03-01
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-04-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-01-01
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/drag-sort.vue 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-01-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-02-01
王芳审批过期纸质签署
p.cumx@rampblpa.ru
2022-03-01
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-04-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-01-01
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/drag-sort.vue 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
王芳6审批过期纸质签署
p.cumx@rampblpa.ru
2022-02-01
贾明7审批通过电子签署
w.cezkdudy@lhll.au
2022-03-01
张三8审批失败纸质签署
r.nmgw@peurezgn.sl
2022-04-01
王芳9审批过期纸质签署
p.cumx@rampblpa.ru
2022-01-01
贾明10审批通过电子签署
w.cezkdudy@lhll.au
2022-02-01
共 500 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 100
"`; exports[`ssr snapshot test > ssr test ./src/table/_example/drag-sort-handler.vue 1`] = `"
排序
申请人
申请状态
签署方式
邮箱地址
申请时间
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-01-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-02-01
王芳审批过期纸质签署
p.cumx@rampblpa.ru
2022-03-01
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-04-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-01-01
"`; @@ -1094,7 +1094,7 @@ exports[`ssr snapshot test > ssr test ./src/table/_example/multiple-sort.vue 1`] exports[`ssr snapshot test > ssr test ./src/table/_example/pagination.vue 1`] = `"
序号
申请人
申请状态
签署方式
申请时间
6王芳审批过期纸质签署2022-02-01
7贾明审批通过电子签署2022-03-01
8张三审批失败纸质签署2022-04-01
9王芳审批过期纸质签署2022-01-01
10贾明审批通过电子签署2022-02-01
共 59 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 12
跳至
/ 12 页
"`; -exports[`ssr snapshot test > ssr test ./src/table/_example/pagination-ajax.vue 1`] = `"
申请人
申请状态
联系方式
邮箱
暂无数据
共 100 项数据
20 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
"`; +exports[`ssr snapshot test > ssr test ./src/table/_example/pagination-ajax.vue 1`] = `"
申请人
申请状态
联系方式
邮箱
暂无数据
共 100 项数据
20 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
"`; exports[`ssr snapshot test > ssr test ./src/table/_example/select-multiple.vue 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-01-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-02-01
王芳审批过期纸质签署
p.cumx@rampblpa.ru
2022-03-01
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-04-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-01-01
"`; From 1ac53dab10f8a8270c19767d688bc423b014e1c3 Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 19:09:08 +0800 Subject: [PATCH 4/7] fix(table): reset expanedTreeNodes on reset data --- src/table/hooks/useDragSort.ts | 2 +- src/table/hooks/useTreeData.tsx | 6 ++++-- src/table/primary-table.tsx | 4 ++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index da74fcf85f..04af37c04f 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -1,5 +1,5 @@ // 表格 行拖拽 + 列拖拽功能 -import { SetupContext, computed, toRefs, ref, watch, h, Ref } from 'vue'; +import { SetupContext, computed, toRefs, ref, watch, h } from 'vue'; import Sortable, { SortableEvent, SortableOptions, MoveEvent } from 'sortablejs'; import get from 'lodash/get'; import isFunction from 'lodash/isFunction'; diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index 0f6e3615ac..51670b8537 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -101,8 +101,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/primary-table.tsx b/src/table/primary-table.tsx index 188af2e88d..1a2768d439 100644 --- a/src/table/primary-table.tsx +++ b/src/table/primary-table.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, toRefs, h, ref, onMounted, SetupContext } from 'vue'; +import { computed, defineComponent, toRefs, h, ref, onMounted } from 'vue'; import get from 'lodash/get'; import omit from 'lodash/omit'; import baseTableProps from './base-table-props'; @@ -15,7 +15,7 @@ import useFilter from './hooks/useFilter'; import useDragSort from './hooks/useDragSort'; import useAsyncLoading from './hooks/useAsyncLoading'; import EditableCell, { EditableCellProps } from './editable-cell'; -import { PageInfo, PaginationProps } from '../pagination'; +import { PageInfo } from '../pagination'; import useClassName from './hooks/useClassName'; import useEditableRow from './hooks/useEditableRow'; import useStyle from './hooks/useStyle'; From 0e7844d832cf020e757de6dd165043904b5518fa Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 19:27:43 +0800 Subject: [PATCH 5/7] fix(table): default expand on data changed --- src/table/hooks/useTreeData.tsx | 17 +++++++++++------ src/table/hooks/useTreeDataExpand.ts | 2 ++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index 51670b8537..281b1d447a 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -39,10 +39,14 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC childrenKey: props.tree?.childrenKey || 'children', })); - const { tExpandedTreeNode, expandAll, foldAll, updateExpandOnDataChange, onExpandFoldIconClick } = useTreeDataExpand( - props, - { store, dataSource, rowDataKeys }, - ); + const { + tExpandedTreeNode, + isDefaultExpandedTreeNodesExecute, + expandAll, + foldAll, + updateExpandOnDataChange, + onExpandFoldIconClick, + } = useTreeDataExpand(props, { store, dataSource, rowDataKeys }); const checkedColumn = computed(() => columns.value.find((col) => col.colKey === 'row-select')); @@ -103,9 +107,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 a12375a83c..d571e45a28 100644 --- a/src/table/hooks/useTreeDataExpand.ts +++ b/src/table/hooks/useTreeDataExpand.ts @@ -16,6 +16,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, @@ -132,6 +133,7 @@ export function useTreeDataExpand( return { tExpandedTreeNode, + isDefaultExpandedTreeNodesExecute, expandAll, foldAll, onExpandFoldIconClick, From c10ccce504db2ad91d07fd9ad00f5855902068d4 Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 19:43:09 +0800 Subject: [PATCH 6/7] refactor(table): ts lint error --- src/table/hooks/useDragSort.ts | 5 ++--- src/table/interface.ts | 7 +++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index 04af37c04f..8a797301eb 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -11,6 +11,7 @@ import swapDragArrayElement from '../../_common/js/utils/swapDragArrayElement'; import { BaseTableColumns } from '../interface'; import { getColumnDataByKey, getColumnIndexByKey } from '../utils'; import { PaginationProps } from '../../pagination'; +import { SimplePageInfo } from '../interface'; export default function useDragSort(props: TdPrimaryTableProps, context: SetupContext) { const { sortOnRowDraggable, dragSort, data, rowKey } = toRefs(props); @@ -77,7 +78,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo ); // 本地分页的表格，index 不同，需加上分页计数 - function getDataPageIndex(index: number, pagination: PaginationProps) { + function getDataPageIndex(index: number, pagination: SimplePageInfo) { const current = pagination.current ?? pagination.defaultCurrent; const pageSize = pagination.pageSize ?? pagination.defaultPageSize; // 开启本地分页的场景 @@ -112,9 +113,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo targetIndex -= 1; } if (innerPagination.value) { - // @ts-ignore currentIndex = getDataPageIndex(currentIndex, innerPagination.value); - // @ts-ignore targetIndex = getDataPageIndex(targetIndex, innerPagination.value); } const params: DragSortContext = { diff --git a/src/table/interface.ts b/src/table/interface.ts index 6ad8904d59..f014b20e30 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; +} From 6d5681ff986cbf4c4014d95510f597f94eabd50b Mon Sep 17 00:00:00 2001 From: chaishi <974383157@qq.com> Date: Sun, 27 Aug 2023 21:18:37 +0800 Subject: [PATCH 7/7] fix(table): lint error --- src/table/hooks/useDragSort.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index 8a797301eb..32f67cb6ee 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -10,7 +10,6 @@ import { hasClass } from '../../utils/dom'; import swapDragArrayElement from '../../_common/js/utils/swapDragArrayElement'; import { BaseTableColumns } from '../interface'; import { getColumnDataByKey, getColumnIndexByKey } from '../utils'; -import { PaginationProps } from '../../pagination'; import { SimplePageInfo } from '../interface'; export default function useDragSort(props: TdPrimaryTableProps, context: SetupContext) {