[Table] fix drag sort problem in pagination

src/table/_example/drag-sort.vue

@@ -3,7 +3,14 @@
     <div class="item">
       <!-- 拖拽排序涉及到 data 的变更，相对比较慎重，因此仅支持受控用法 -->
 
-      <t-table row-key="index" :columns="columns" :data="data" drag-sort="row" @drag-sort="onDragSort"> </t-table>
+      <t-table
+        row-key="index"
+        :columns="columns"
+        :data="data"
+        drag-sort="row"
+        :pagination="pagination"
+        @drag-sort="onDragSort"
+      ></t-table>
     </div>
   </div>
 </template>
@@ -18,23 +25,44 @@ const statusNameListMap = {
   2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> },
 };
 
-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: ['[email protected]', '[email protected]', '[email protected]'][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: ['[email protected]', '[email protected]', '[email protected]'][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' },

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

src/table/hooks/useDragSort.ts

@@ -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 { SimplePageInfo } from '../interface';
 
 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<BaseTableColumns>(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: 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;
   }
@@ -108,13 +111,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',
         };
@@ -216,7 +223,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 +237,7 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo
   });
 
   return {
+    innerPagination,
     isRowDraggable,
     isRowHandlerDraggable,
     isColDraggable,

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,

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'));
 
@@ -101,9 +105,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

@@ -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,

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

@@ -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';
@@ -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<TableRowData>) => {
+      innerPagination.value = { ...innerPagination.value, ...pageInfo };
       currentPaginateData.value = newData;
       props.onPageChange?.(pageInfo, newData);
       const changeParams: Parameters<TdPrimaryTableProps['onChange']> = [

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;
   /**

src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap

@@ -63,14 +63,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, fail
               <!---->
 
 
-              <div
-                class="t-space-item"
-              >
-                图片加载中
-              </div>
-              <!---->
-
-
             </div>
           </div>
           <!---->
@@ -233,14 +225,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, progr
               <!---->
 
 
-              <div
-                class="t-space-item"
-              >
-                图片加载中
-              </div>
-              <!---->
-
-
             </div>
           </div>
           <!---->
@@ -408,14 +392,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe
               <!---->
 
 
-              <div
-                class="t-space-item"
-              >
-                图片加载中
-              </div>
-              <!---->
-
-
             </div>
           </div>
           <!---->
@@ -578,14 +554,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe
               <!---->
 
 
-              <div
-                class="t-space-item"
-              >
-                图片加载中
-              </div>
-              <!---->
-
-
             </div>
           </div>
           <!---->
@@ -748,14 +716,6 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, waiti
               <!---->
 
 
-              <div
-                class="t-space-item"
-              >
-                图片加载中
-              </div>
-              <!---->
-
-
             </div>
           </div>
           <!---->

src/upload/themes/dragger-file.tsx

@@ -71,7 +71,7 @@ export default defineComponent({
         <div class={`${uploadPrefix}__dragger-img-wrap`}>
           <ImageViewer
             images={[url]}
-            trigger={(h, { open }: any) => <Image src={url || file.raw} onClick={open} error="" />}
+            trigger={(h, { open }: any) => <Image src={url || file.raw} onClick={open} error="" loading="" />}
           ></ImageViewer>
         </div>
       );