[Table] enhanced table reset expanded tree nodes

src/table/_example/drag-sort.vue

@@ -3,7 +3,16 @@
     <div class="item">
       <!-- 拖拽排序涉及到 data 的变更，相对比较慎重，因此仅支持受控用法 -->
 
-      <t-table rowKey="index" :columns="columns" :data="data" @drag-sort="onDragSort" dragSort="row" lazyLoad>
+      <t-table
+        rowKey="index"
+        :columns="columns"
+        :data="data"
+        :pagination="pagination1"
+        dragSort="row"
+        @drag-sort="onDragSort"
+        @page-change="onPageChange"
+        lazyLoad
+      >
         <template #status="{ row }">
           <p class="status" :class="['', 'warning', 'unhealth'][row && row.status]">
             {{ ['健康', '警告', '异常'][row && row.status] }}
@@ -18,11 +27,11 @@
 import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue';
 
 const columns = [
-  { colKey: 'applicant', title: '申请人', width: '100' },
+  { colKey: 'index', title: '编号' },
+  { colKey: 'applicant', title: '申请人' },
   {
     colKey: 'status',
     title: '申请状态',
-    width: '150',
     cell: (h, { row }) => {
       const statusNameListMap = {
         0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
@@ -37,12 +46,12 @@ const columns = [
       );
     },
   },
-  { colKey: 'channel', title: '签署方式', width: '120' },
+  { colKey: 'channel', title: '签署方式' },
   { colKey: 'detail.email', title: '邮箱地址', ellipsis: true },
   { colKey: 'createTime', title: '申请时间' },
 ];
 
-const initialData = new Array(4).fill(5).map((_, i) => ({
+const initialData = new Array(500).fill(5).map((_, i) => ({
   index: i + 1,
   applicant: ['贾明', '张三', '王芳'][i % 3],
   status: i % 3,
@@ -60,9 +69,24 @@ export default {
     return {
       data: [...initialData],
       columns,
+      pagination: {
+        current: 1,
+        pageSize: 5,
+        total: 500,
+      },
+      // 非受控用法
+      pagination1: {
+        defaultCurrent: 1,
+        defaultPageSize: 5,
+        total: 500,
+      },
     };
   },
   methods: {
+    onPageChange(pageInfo) {
+      this.pagination = { ...this.pagination, ...pageInfo };
+    },
+
     // currentData is going to be deprecated
     onDragSort({
       currentIndex, current, targetIndex, target, data, newData, e,

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<PrimaryTableCol[]>(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<TableRowData> = {
           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,
   };

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 },
   );

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'));
 
@@ -98,9 +99,12 @@ 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 defaultNeedExpand = Boolean(!isDefaultExpandedTreeNodesExecute.value && defaultExpandedTreeNodes?.length);
+    if (tExpandedTreeNode.value?.length && !!(expandedTreeNodes || defaultNeedExpand)) {
       updateExpandOnDataChange(data);
+      isDefaultExpandedTreeNodesExecute.value = true;
     } else {
       dataSource.value = [...data];
     }

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,

src/table/interface.ts

@@ -74,3 +74,10 @@ export interface FixedColumnInfo {
 export type RowAndColFixedPosition = Map<string | number, FixedColumnInfo>;
 
 export type TableTreeExpandType = 'expand-all' | 'fold-all' | 'user-reaction-change' | 'props-change';
+
+export interface SimplePageInfo {
+  current?: number;
+  defaultCurrent?: number;
+  pageSize?: number;
+  defaultPageSize?: number;
+}

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<TableRowData>) => {
+      innerPagination.value = { ...innerPagination.value, ...pageInfo };
       currentPaginateData.value = newData;
       props.onPageChange?.(pageInfo, newData);
       // Vue3 ignore next line

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

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

src/table/type.ts

@@ -928,7 +928,7 @@ export interface TableEditableCellConfig<T extends TableRowData = TableRowData>
 export interface TableTreeConfig {
   /**
    * 表示树形结构的行选中（多选），父子行选中是否独立
-   * @default true
+   * @default false
    */
   checkStrictly?: boolean;
   /**