From 1c6bba4ce183e58c5a223775679fd5449d2a8822 Mon Sep 17 00:00:00 2001
From: sheepluo <yaoyanhuoyi@qq.com>
Date: Mon, 16 May 2022 23:03:21 +0800
Subject: [PATCH] =?UTF-8?q?[Table]=20=E6=A0=91=E5=BD=A2=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E6=96=B0=E7=89=B9=E6=80=A7=EF=BC=9A=E5=B1=95=E5=BC=80/?=
 =?UTF-8?q?=E6=94=B6=E8=B5=B7=E5=85=A8=E9=83=A8=EF=BC=8C=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E7=AD=89=20(#879)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs(notification): 插件调用与函数式调用

* fix(table): merged cells border style

* feat(table): support expand all and fold all

* feat(table): update API

* feat(table): support defaultExpandAll

* refactor(table): expandAll and foldAll

* fix(table): 展开或收起全部

* feat(table): tree drag sort

* feat(table): drag sort

* feat(table): update documents

* feat(table): drag sort + expand all + fold all

* fix(table): tree, rowIndex

* refactor(table): 统一树形结构赋值方式

Co-authored-by: sheepluo <sheepluo@tencent.com>
---
 examples/dialog/demos/attach.vue              |   2 +-
 examples/table/demos/tree.vue                 | 122 ++++--
 examples/table/table.md                       |  22 +-
 src/table/base-table-props.ts                 |   2 +-
 src/table/enhanced-table-props.ts             |   8 +-
 src/table/enhanced-table.tsx                  |  20 +-
 src/table/hooks/tree-store.ts                 | 396 ++++++++++++++----
 src/table/hooks/useDragSort.ts                |   4 +-
 src/table/hooks/useTreeData.tsx               |  75 +++-
 src/table/type.ts                             |  62 ++-
 test/ssr/__snapshots__/ssr.test.js.snap       |  83 ++--
 .../table/__snapshots__/demo.test.js.snap     | 327 ++++++++++-----
 12 files changed, 851 insertions(+), 272 deletions(-)

diff --git a/examples/dialog/demos/attach.vue b/examples/dialog/demos/attach.vue
index e76cb754d..3fa1ab677 100644
--- a/examples/dialog/demos/attach.vue
+++ b/examples/dialog/demos/attach.vue
@@ -78,7 +78,7 @@ export default Vue.extend({
   },
 });
 </script>
-<style>
+<style scoped>
 .t-button {
   margin-right: 20px;
 }
diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue
index 06cc94759..d2e56f46e 100644
--- a/examples/table/demos/tree.vue
+++ b/examples/table/demos/tree.vue
@@ -2,7 +2,10 @@
   <div>
     <div>
       <t-button theme="default" @click="setData1">重置数据</t-button>
-      <t-button theme="default" style="margin-left: 16px" @click="onRowToggle">展开/收起可见行</t-button>
+      <t-button theme="default" style="margin-left: 16px" @click="onRowToggle">任意节点展开/收起</t-button>
+      <t-button theme="default" style="margin-left: 16px" @click="onExpandAllToggle">{{
+        expandAll ? '收起全部' : '展开全部'
+      }}</t-button>
       <t-checkbox v-model="customTreeExpandAndFoldIcon" style="margin-left: 16px; vertical-align: middle">
         自定义折叠/展开图标
       </t-checkbox>
@@ -11,15 +14,20 @@
     <!-- 第一列展开树结点，缩进为 24px，子节点字段 childrenKey 默认为 children -->
     <!-- !!! 树形结构 EnhancedTable 才支持，普通 Table 不支持 !!! -->
     <!-- treeNodeColumnIndex 定义第几列作为树结点展开列，默认为第一列 -->
+    <!-- tree.defaultExpandAll: true 默认展开全部 -->
+    <!-- this.$refs.table.dataSource 查看树形结构平铺数据 -->
     <t-enhanced-table
       ref="table"
       rowKey="key"
+      drag-sort="row-handler"
       :data="data"
       :columns="columns"
-      :tree="{ childrenKey: 'list', treeNodeColumnIndex: 1 }"
+      :tree="{ childrenKey: 'list', treeNodeColumnIndex: 2 }"
       :tree-expand-and-fold-icon="customTreeExpandAndFoldIcon ? treeExpandAndFoldIconRender : undefined"
       :pagination="pagination"
+      :beforeDragSort="beforeDragSort"
       @page-change="onPageChange"
+      @abnormal-drag-sort="onAbnormalDragSort"
     ></t-enhanced-table>
 
     <!-- 第二列展开树结点，缩进为 12px，示例代码有效，勿删 -->
@@ -31,22 +39,24 @@
       :pagination="defaultPagination"
       :data="data"
       :columns="columns"
-      :tree="{ indent: 12, childrenKey: 'list' }"
+      :tree="{ indent: 12, childrenKey: 'list', defaultExpandAll: true }"
       @page-change="onPageChange"
     ></t-enhanced-table> -->
   </div>
 </template>
 <script lang="jsx">
 import { EnhancedTable } from 'tdesign-vue';
-import { ChevronRightIcon, ChevronDownIcon } from 'tdesign-icons-vue';
+import { ChevronRightIcon, ChevronDownIcon, MoveIcon } from 'tdesign-icons-vue';
+
+const TOTAL = 5;
 
 function getData(currentPage = 1) {
   const data = [];
-  const pageInfo = `第 ${currentPage} 页`;
-  for (let i = 0; i < 5; i++) {
+  // const pageInfo = `第 ${currentPage} 页`;
+  for (let i = 0; i < TOTAL; i++) {
     const obj = {
       id: i,
-      key: `我是 ${i}_${currentPage} 号（${pageInfo}）`,
+      key: `我是 ${i}_${currentPage} 号`,
       platform: i % 2 === 0 ? '共有' : '私有',
       type: ['String', 'Number', 'Array', 'Object'][i % 4],
       default: ['-', '0', '[]', '{}'][i % 4],
@@ -64,14 +74,14 @@ function getData(currentPage = 1) {
         const secondObj = {
           ...obj,
           id: secondIndex,
-          key: `我是 ${secondIndex}_${currentPage} 号（${pageInfo}）`,
+          key: `我是 ${secondIndex}_${currentPage} 号`,
         };
         secondObj.list = new Array(3).fill(null).map((m, n) => {
           const thirdIndex = secondIndex * 1000 + 100 * m + (n + 1) * 10;
           return {
             ...obj,
             id: thirdIndex,
-            key: `我是 ${thirdIndex}_${currentPage} 号（${pageInfo}）`,
+            key: `我是 ${thirdIndex}_${currentPage} 号`,
           };
         });
         return secondObj;
@@ -89,24 +99,34 @@ export default {
     return {
       customTreeExpandAndFoldIcon: false,
       data,
+      expandAll: false,
       pagination: {
         current: 1,
         pageSize: 10,
-        total: 100,
+        total: TOTAL,
       },
       defaultPagination: {
         defaultCurrent: 1,
         defaultPageSize: 10,
-        total: 100,
+        total: TOTAL,
       },
       columns: [
+        {
+          // 列拖拽排序必要参数
+          colKey: 'drag',
+          title: '排序',
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          cell: (h) => <MoveIcon />,
+          width: 80,
+        },
         {
           colKey: 'id',
           title: '编号',
           ellipsis: true,
+          width: 100,
         },
         {
-          width: 220,
+          width: 180,
           colKey: 'key',
           title: '名称',
           ellipsis: true,
@@ -114,14 +134,18 @@ export default {
         {
           colKey: 'platform',
           title: '平台',
-        },
-        {
-          colKey: 'type',
-          title: '类型',
+          width: 80,
+          cell: (h, { row }) => row.platform === 'New' ? (
+              <t-tag size="small" theme="primary">
+                {row.platform}
+              </t-tag>
+          ) : (
+            row.platform
+          ),
         },
         {
           colKey: 'operate',
-          width: 280,
+          width: 340,
           title: '操作',
           align: 'center',
           // 增、删、改、查 等操作
@@ -131,6 +155,12 @@ export default {
               <t-button variant="text" onClick={() => this.appendTo(row)}>
                 插入
               </t-button>
+              <t-button variant="text" onClick={() => this.insertBefore(row)}>
+                前插
+              </t-button>
+              <t-button variant="text" onClick={() => this.insertAfter(row)}>
+                后插
+              </t-button>
               <t-button variant="text" onClick={() => this.onEditClick(row)}>
                 更新
               </t-button>
@@ -147,6 +177,11 @@ export default {
     };
   },
 
+  // 默认展开全部。示例代码有效，勿删
+  // mounted() {
+  //   this.$refs.table.expandAll();
+  // },
+
   methods: {
     // 全新赋值
     setData1() {
@@ -179,7 +214,7 @@ export default {
       console.log(`${message}：`, allRowData);
     },
 
-    // 新增
+    // 新增子节点
     appendTo(row) {
       const randomKey = Math.round(Math.random() * Math.random() * 1000) + 10000;
       this.$refs.table.appendTo(row.key, {
@@ -191,6 +226,30 @@ export default {
       this.$message.success(`已插入子节点我是 ${randomKey} 号，请展开查看`);
     },
 
+    // 当前节点之前，新增兄弟节前
+    insertBefore(row) {
+      const randomKey = Math.round(Math.random() * Math.random() * 1000) + 10000;
+      this.$refs.table.insertBefore(row.key, {
+        id: randomKey,
+        key: `我是 ${randomKey} 号`,
+        platform: '私有',
+        type: 'Number',
+      });
+      this.$message.success(`已插入子节点我是 ${randomKey} 号，请展开查看`);
+    },
+
+    // 当前节点之后，新增兄弟节前
+    insertAfter(row) {
+      const randomKey = Math.round(Math.random() * Math.random() * 1000) + 10000;
+      this.$refs.table.insertAfter(row.key, {
+        id: randomKey,
+        key: `我是 ${randomKey} 号`,
+        platform: '私有',
+        type: 'Number',
+      });
+      this.$message.success(`已插入子节点我是 ${randomKey} 号，请展开查看`);
+    },
+
     onPageChange(pageInfo) {
       this.pagination.current = pageInfo.current;
       this.pagination.pageSize = pageInfo.pageSize;
@@ -198,12 +257,7 @@ export default {
     },
 
     onRowToggle() {
-      const rowIds = [
-        '我是 1_1 号（第 1 页）',
-        '我是 2_1 号（第 1 页）',
-        '我是 3_1 号（第 1 页）',
-        '我是 4_1 号（第 1 页）',
-      ];
+      const rowIds = ['我是 1_1 号', '我是 2_1 号', '我是 3_1 号', '我是 4_1 号'];
       rowIds.forEach((id) => {
         // getData 参数为行唯一标识，lodash.get(row, rowKey)
         const rowData = this.$refs.table.getData(id);
@@ -217,6 +271,26 @@ export default {
     treeExpandAndFoldIconRender(h, { type }) {
       return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
     },
+
+    onExpandAllToggle() {
+      this.expandAll = !this.expandAll;
+      this.expandAll ? this.$refs.table.expandAll() : this.$refs.table.foldAll();
+    },
+
+    onAbnormalDragSort(params) {
+      console.log(params);
+      // this.$message.warning(params.reason);
+      if (params.code === 1001) {
+        this.$message.warning('不同层级的元素，不允许调整顺序');
+      }
+    },
+
+    // 应用于需要阻止拖拽排序的场景。如：当子节点存在时，则不允许调整顺序
+    // 返回值为 true，允许拖拽排序；返回值 为 false，则阻止拖拽排序
+    beforeDragSort(params) {
+      console.log(params);
+      return true;
+    },
   },
 };
 </script>
diff --git a/examples/table/table.md b/examples/table/table.md
index 21d8782fa..4a07510e2 100644
--- a/examples/table/table.md
+++ b/examples/table/table.md
@@ -28,7 +28,7 @@ maxHeight | String / Number | - | 表格最大高度，超出后会出现滚动
 pagination | Object | - | 分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`。TS 类型：`PaginationProps`，[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 rowAttributes | Object / Array / Function | - | HTML 标签 `tr` 的属性。类型为 Function 时，参数说明：`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=foot` 表示属性作用于 `tfoot` 中的元素。<br />示例一：{ draggable: true }，<br />示例二：[{ draggable: true }, { title: '超出省略显示' }]。<br /> 示例三：() => [{ draggable: true }]。TS 类型：`TableRowAttributes<T>` `type TableRowAttributes<T> = HTMLElementAttributes | ((params: { row: T; rowIndex: number; type: 'body' | 'foot' }) => HTMLElementAttributes) | Array<TableRowAttributes<T>>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 rowClassName | String / Object / Array / Function | - | 行类名，泛型 T 指表格数据类型。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body`  表示类名作用于 `tbody` 中的元素；`params.type=body` 表示类名作用于 `tfoot` 中的元素。TS 类型：`ClassName | ((params: RowClassNameParams<T>) => ClassName)` `interface RowClassNameParams<T> { row: T; rowIndex: number; type?: 'body' | 'foot' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
-rowKey | String | - | 必需。使用 rowKey 唯一标识一行数据 | Y
+rowKey | String | 'id' | 必需。使用 rowKey 唯一标识一行数据 | Y
 rowspanAndColspan | Function | - | 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TableScroll` | N
 size | String | medium | 表格尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
@@ -167,21 +167,26 @@ type | String | single | `colKey` 值为 `row-select` 时表示行选中列，
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-tree | Object | - | 树形结构相关配置。`tree.indent` 表示树结点缩进距离，单位：px，默认为 24px。`tree.treeNodeColumnIndex` 表示树结点在第几列渲染，默认为 0 ，第一列。`tree.childrenKey` 表示树形结构子节点字段，默认为 children。`tree.checkStrictly` 表示树形结构的行选中（多选），父子行选中是否独立，默认独立，值为 true。TS 类型：`TableTreeConfig` `interface TableTreeConfig { indent?: number; treeNodeColumnIndex?: number; childrenKey?: 'children'; checkStrictly?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+beforeDragSort | Function | - | 树形结构中，拖拽排序前控制，返回值为 `true` 则继续排序；返回值为 `false` 则中止排序还原数据。TS 类型：`(context: DragSortContext<T>) => boolean` | N
+tree | Object | - | 树形结构相关配置。具体属性文档查看 `TableTreeConfig` 相关描述。TS 类型：`TableTreeConfig` | N
 treeExpandAndFoldIcon | Function | - | 自定义树形结构展开图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode<{ type: 'expand' | 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 `PrimaryTableProps<T>` | \- | - | 继承 `PrimaryTableProps<T>` 中的全部 API | N
+onAbnormalDragSort | Function |  | TS 类型：`(context: TableAbnormalDragSortContext<T>) => void`<br/>异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableAbnormalDragSortContext<T> { code: number; reason: string }`<br/> | N
 onTreeExpandChange | Function |  | TS 类型：`(context: TableTreeExpandChangeContext<T>) => void`<br/>树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableTreeExpandChangeContext<T> { row: T; rowIndex: number; rowState: TableRowState<T> }`<br/> | N
 
 ### EnhancedTable Events
 
 名称 | 参数 | 描述
 -- | -- | --
+abnormal-drag-sort | `(context: TableAbnormalDragSortContext<T>)` | 异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableAbnormalDragSortContext<T> { code: number; reason: string }`<br/>
 tree-expand-change | `(context: TableTreeExpandChangeContext<T>)` | 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableTreeExpandChangeContext<T> { row: T; rowIndex: number; rowState: TableRowState<T> }`<br/>
 
 ### EnhancedTableInstanceFunctions 组件实例方法
 
 名称 | 参数 | 返回值 | 描述
 -- | -- | -- | --
+expandAll | \- | \- | 必需。展开全部行
+foldAll | \- | \- | 必需。折叠全部行
 getData | `(key: TableRowValue)` | `TableRowState<T>` | 必需。树形结构中，用于获取行数据所有信息。泛型 `T` 表示行数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`type TableRowValue = string | number`<br/>
 remove | `(key: TableRowValue)` | \- | 必需。树形结构中，移除指定节点
 setData | `(key: TableRowValue, newRowData: T)` | \- | 必需。树形结构中，用于更新行数据。泛型 `T` 表示行数据类型
@@ -194,11 +199,12 @@ toggleExpandData | `(p: { row: T,  rowIndex: number})` | \- | 必需。展开或
 disabled | Boolean | false | 表格行是否禁用选中 | N
 expandChildrenLength | Number | - | 当前节点展开的子节点数量 | N
 expanded | Boolean | false | 必需。表格行是否展开 | Y
+id | String / Number | - | 必需。唯一标识 | Y
 level | Number | - | 当前节点层级。TS 类型：`number` | N
 parent | \- | - | 父节点。TS 类型：`TableRowState<T>` | N
 path | Array | - | 当前节点路径。TS 类型：`TableRowState<T>[]` | N
 row | \- | - | 必需。原始表格行数据。TS 类型：`T` | Y
-rowIndex | Number | - | 必需。表格行下标 | Y
+rowIndex | Number | - | 必需。表格行下标，值为 `-1` 标识当前行未展开显示 | Y
 
 ### TableColumnFilter
 
@@ -232,3 +238,13 @@ displayType | String | auto-width | 指列配置弹框中，各列的字段平
 fields | Array | - | 用于设置允许用户对哪些列进行显示或隐藏的控制，默认为全部字段。TS 类型：`string[]` | N
 hideTriggerButton | Boolean | false | 是否隐藏表格组件内置的“列配置”按钮 | N
 placement | String | top-right | 列配置按钮基于表格的放置位置：左上角、右上角、左下角、右下角等。可选项：top-left/top-right/bottom-left/bottom-right | N
+
+### TableTreeConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+checkStrictly | Boolean | true | 表示树形结构的行选中（多选），父子行选中是否独立 | N
+childrenKey | String | children | 树形结构子节点字段，示例：`childrenKey='list'`。一般应用在数据 `data` 的子节点字段不是 `children` 的场景 | N
+defaultExpandAll | Boolean | false | 是否默认展开全部，仅默认情况有效。如果希望自由控制树形结构的展开或收起，可使用实例方法 `expandAll` 和 `foldAll` | N
+indent | Number | 24 | 树结点缩进距离，单位：px | N
+treeNodeColumnIndex | Number | 0 | 树结点在第几列渲染，默认为第一列 | N
diff --git a/src/table/base-table-props.ts b/src/table/base-table-props.ts
index db4d937f3..286df9132 100644
--- a/src/table/base-table-props.ts
+++ b/src/table/base-table-props.ts
@@ -96,7 +96,7 @@ export default {
   /** 使用 rowKey 唯一标识一行数据 */
   rowKey: {
     type: String,
-    default: '',
+    default: 'id',
     required: true,
   },
   /** 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }` */
diff --git a/src/table/enhanced-table-props.ts b/src/table/enhanced-table-props.ts
index 34d0ed220..f66a47712 100644
--- a/src/table/enhanced-table-props.ts
+++ b/src/table/enhanced-table-props.ts
@@ -8,7 +8,11 @@ import { TdEnhancedTableProps } from '../table/type';
 import { PropType } from 'vue';
 
 export default {
-  /** 树形结构相关配置。`tree.indent` 表示树结点缩进距离，单位：px，默认为 24px。`tree.treeNodeColumnIndex` 表示树结点在第几列渲染，默认为 0 ，第一列。`tree.childrenKey` 表示树形结构子节点字段，默认为 children。`tree.checkStrictly` 表示树形结构的行选中（多选），父子行选中是否独立，默认独立，值为 true */
+  /** 树形结构中，拖拽排序前控制，返回值为 `true` 则继续排序；返回值为 `false` 则中止排序还原数据 */
+  beforeDragSort: {
+    type: Function as PropType<TdEnhancedTableProps['beforeDragSort']>,
+  },
+  /** 树形结构相关配置。具体属性文档查看 `TableTreeConfig` 相关描述 */
   tree: {
     type: Object as PropType<TdEnhancedTableProps['tree']>,
   },
@@ -16,6 +20,8 @@ export default {
   treeExpandAndFoldIcon: {
     type: Function as PropType<TdEnhancedTableProps['treeExpandAndFoldIcon']>,
   },
+  /** 异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因 */
+  onAbnormalDragSort: Function as PropType<TdEnhancedTableProps['onAbnormalDragSort']>,
   /** 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发 */
   onTreeExpandChange: Function as PropType<TdEnhancedTableProps['onTreeExpandChange']>,
 };
diff --git a/src/table/enhanced-table.tsx b/src/table/enhanced-table.tsx
index 7717f79d9..683b13656 100644
--- a/src/table/enhanced-table.tsx
+++ b/src/table/enhanced-table.tsx
@@ -5,7 +5,9 @@ import baseTableProps from './base-table-props';
 import primaryTableProps from './primary-table-props';
 import enhancedTableProps from './enhanced-table-props';
 import PrimaryTable, { BASE_TABLE_ALL_EVENTS } from './primary-table';
-import { TdEnhancedTableProps, PrimaryTableCol, TableRowData } from './type';
+import {
+  TdEnhancedTableProps, PrimaryTableCol, TableRowData, DragSortContext,
+} from './type';
 import useTreeData from './hooks/useTreeData';
 import useTreeSelect from './hooks/useTreeSelect';
 import { TableListeners } from './base-table';
@@ -17,7 +19,6 @@ const PRIMARY_B_EVENTS = [
   'filter-change',
   'sort-change',
   'data-change',
-  'drag-sort',
   'async-loading-click',
 ];
 
@@ -34,7 +35,7 @@ export default defineComponent({
 
   setup(props: TdEnhancedTableProps, context: SetupContext) {
     const {
-      store, dataSource, formatTreeColumn, ...treeInstanceFunctions
+      store, dataSource, formatTreeColumn, swapData, ...treeInstanceFunctions
     } = useTreeData(props, context);
 
     const treeDataMap = ref(store.value.treeDataMap);
@@ -64,10 +65,22 @@ export default defineComponent({
       return isTreeData ? props.columns : getColumns(props.columns);
     });
 
+    const onDragSortChange = (context: DragSortContext<TableRowData>) => {
+      if (props.beforeDragSort && !props.beforeDragSort(context)) return;
+      swapData({
+        current: context.current,
+        target: context.target,
+        currentIndex: context.currentIndex,
+        targetIndex: context.targetIndex,
+      });
+      props.onDragSort?.(context);
+    };
+
     return {
       store,
       dataSource,
       tColumns,
+      onDragSortChange,
       onInnerSelectChange,
       ...treeInstanceFunctions,
     };
@@ -98,6 +111,7 @@ export default defineComponent({
     const on: TableListeners = {
       ...this.getListener(),
       'select-change': this.onInnerSelectChange,
+      'drag-sort': this.onDragSortChange,
     };
     // replace `scopedSlots={this.$scopedSlots}` of `v-slots={this.$slots}` in Vue3
     return <PrimaryTable scopedSlots={this.$scopedSlots} props={props} on={on} {...this.$attrs} />;
diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts
index 00f0fca9e..b4d06d3ba 100644
--- a/src/table/hooks/tree-store.ts
+++ b/src/table/hooks/tree-store.ts
@@ -1,3 +1,5 @@
+/* eslint-disable class-methods-use-this */
+/* eslint-disable no-param-reassign */
 import get from 'lodash/get';
 import { isRowSelectedDisabled } from '../utils';
 import {
@@ -5,7 +7,7 @@ import {
 } from '../type';
 import log from '../../_common/js/log';
 
-export type TableTreeDataMap<T extends TableRowData = TableRowData> = Map<string | number, TableRowState<T>>;
+export type TableTreeDataMap = Map<string | number, TableRowState>;
 
 export interface TableRowModel<T> extends TableRowState<T> {
   setData?: (key: string | number, data: T) => void;
@@ -16,6 +18,18 @@ export interface KeysType {
   childrenKey: string;
 }
 
+export interface SwapParams<T> {
+  current: T;
+  target: T;
+  currentIndex: number;
+  targetIndex: number;
+}
+
+export const TABLE_TREE_ERROR_CODE_NOT_SAME_LEVEL = {
+  code: 1001,
+  reason: 'The same level of rows can not be swapped.',
+};
+
 /**
  * 表格树形结构处理器
  * Vue 和 React 可以通用
@@ -28,7 +42,9 @@ export interface KeysType {
  */
 class TableTreeStore<T extends TableRowData = TableRowData> {
   /** 树形结构 Map 存储 */
-  treeDataMap: TableTreeDataMap<T> = new Map();
+  treeDataMap: TableTreeDataMap = new Map();
+
+  expandAllRowIndex: 0;
 
   constructor() {
     this.treeDataMap = new Map();
@@ -42,7 +58,7 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
    */
   initialTreeStore(dataSource: T[], columns: PrimaryTableCol[], keys: KeysType) {
     this.treeDataMap?.clear();
-    initialTreeDataMap(this.treeDataMap, dataSource, columns[0], keys);
+    this.initialTreeDataMap(this.treeDataMap, dataSource, columns[0], keys);
   }
 
   toggleExpandData(p: { rowIndex: number; row: T }, dataSource: T[], keys: KeysType) {
@@ -55,18 +71,14 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
       log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.');
       return [];
     }
-    const r = this.treeDataMap.get(rowValue) || {
-      row: p.row,
-      rowIndex: p.rowIndex,
-      expanded: false,
-    };
+    const r = this.treeDataMap.get(rowValue);
     r.rowIndex = p.rowIndex;
     r.expanded = !r.expanded;
     this.treeDataMap.set(rowValue, r);
     return this.updateExpandRow(r, dataSource, keys);
   }
 
-  updateExpandRow(changeRow: TableRowState<T>, dataSource: T[], keys: KeysType) {
+  updateExpandRow(changeRow: TableRowState, dataSource: T[], keys: KeysType) {
     const { row, rowIndex, expanded } = changeRow;
     const { treeDataMap } = this;
     const childrenNodes = get(row, keys.childrenKey);
@@ -94,22 +106,22 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
    * @param key 行唯一标识
    * @returns {TableRowState} 当前行数据
    */
-  getData(key: TableRowValue): TableRowState<T> {
+  getData(key: TableRowValue): TableRowState {
     return this.treeDataMap.get(key);
   }
 
   /**
    * 更新当前行数据，并返回当前行下标
-   * @param key 当前行唯一标识值
+   * @param rowValue 当前行唯一标识值
    * @param newRowData 新行数据
    * @returns {number} rowIndex 设置的行下标
    */
-  updateData(key: TableRowValue, newRowData: T, dataSource: T[], keys: KeysType): number {
-    const newKey = get(newRowData, keys.rowKey);
-    const rowState = this.treeDataMap.get(key);
+  updateData(rowValue: TableRowValue, newRowData: T, dataSource: T[], keys: KeysType): number {
+    const newRowValue = get(newRowData, keys.rowKey);
+    const rowState = this.treeDataMap.get(rowValue);
     // Map 没有查询到，或者查询到的 rowIndex 值为 -1，均表示当前数据不在 dataSource 列表中，未显示在页面中
     if (!rowState || rowState.rowIndex === -1) {
-      updateRowData(dataSource, key, newRowData, {
+      updateRowData(dataSource, rowValue, newRowData, {
         rowKey: keys.rowKey,
         childrenKey: keys.childrenKey,
       });
@@ -117,18 +129,20 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
     }
     const currentRowIndex = rowState.rowIndex;
     rowState.row = newRowData;
-    this.treeDataMap.set(key, rowState);
+    rowState.id = newRowValue;
+
+    // 更新父元素中存储的当前元素值
     if (rowState.parent) {
+      // 更新直接子元素数组
       const siblings = get(rowState.parent.row, keys.childrenKey);
-      const index = siblings.findIndex((item: T) => get(item, keys.rowKey) === key);
+      const index = siblings.findIndex((item: T) => get(item, keys.rowKey) === rowValue);
       siblings[index] = newRowData;
     }
-    // key 也发生了变化
-    if (key !== newKey) {
-      this.treeDataMap.set(newKey, rowState);
-      this.treeDataMap.delete(key);
-    } else {
-      this.treeDataMap.set(key, rowState);
+
+    this.treeDataMap.set(newRowValue, rowState);
+    // rowValue 也发生了变化，需移除 旧 rowValue 数据
+    if (rowValue !== newRowValue) {
+      this.treeDataMap.delete(rowValue);
     }
     return currentRowIndex;
   }
@@ -143,23 +157,23 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
       // 移除当前节点时，展开的节点的子节点需同步移除
       const removeNumber = (r.expandChildrenLength || 0) + 1;
       dataSource.splice(r.rowIndex, removeNumber);
+
       if (r.parent) {
         const siblings = get(r.parent.row, keys.childrenKey);
         const index = siblings.findIndex((item: TableRowData) => get(item, keys.rowKey) === key);
         siblings.splice(index, 1);
-        updateRowExpandLength(this.treeDataMap, r.parent.row, -1 * removeNumber, 'delete', {
-          rowKey: keys.rowKey,
-          childrenKey: keys.childrenKey,
-        });
+        updateRowExpandLength(this.treeDataMap, r.parent.row, -1 * removeNumber, 'delete', keys);
       }
+
       this.treeDataMap.delete(key);
+
       // 更新 rowIndex 之后的下标
       updateRowIndex(this.treeDataMap, dataSource, {
         minRowIndex: r.rowIndex,
         rowKey: keys.rowKey,
+        type: 'remove',
       });
     } else {
-      // TODO, remove from dataSource
       console.warn('TDesign Table Warn: Do not remove this node, which is not appeared.');
     }
     return dataSource;
@@ -167,37 +181,34 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
 
   /**
    * 为当前节点添加子节点，默认添加到最后一个节点
-   * @param key 当前节点唯一标识
+   * @param rowValue 当前节点唯一标识
    * @param newData 待添加的新节点
    */
-  appendTo(key: string | number, newData: T, dataSource: T[], keys: KeysType): T[] {
-    const state = this.treeDataMap.get(key);
-    if (!state) {
-      console.warn(`TDesign Table Warn: ${key} is not exist.`);
-      return;
-    }
+  appendTo(rowValue: string | number, newData: T, dataSource: T[], keys: KeysType): T[] {
+    const state = this.treeDataMap.get(rowValue);
+    if (!this.validateDataExist(state, rowValue)) return dataSource;
     const newRowValue = get(newData, keys.rowKey);
-    if (this.treeDataMap.get(newRowValue)) {
-      console.warn(`TDesign Table Warn: Duplicated Key. ${newRowValue} is already exists.`);
-      return;
-    }
+    const mapState = this.treeDataMap.get(newRowValue);
+    if (!this.validateDataDoubleExist(mapState, newRowValue)) return dataSource;
     const children: T[] = get(state.row, keys.childrenKey);
     // 子节点不存在，则表示为叶子节点
     const isShowNewNode = state.expanded || !children?.length;
+    const rowIndex = isShowNewNode ? state.rowIndex + (state.expandChildrenLength || 0) + 1 : -1;
     const newState = {
+      id: newRowValue,
       row: newData,
+      rowIndex,
       level: state.level + 1,
-      parent: state,
-      path: [...state.path],
       expanded: false,
       expandChildrenLength: 0,
-      rowIndex: isShowNewNode ? state.rowIndex + (state.expandChildrenLength || 0) + 1 : -1,
+      disabled: false,
+      path: [...state.path],
+      parent: state,
     };
     newState.path = newState.path.concat(newState);
     if (children?.length) {
       state.row[keys.childrenKey].push(newData);
     } else {
-      // @ts-ignore
       state.row[keys.childrenKey] = [newData];
       state.expanded = true;
     }
@@ -205,7 +216,7 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
     // 如果当前节点为展开状态，则需要继续处理
     if (isShowNewNode) {
       dataSource.splice(newState.rowIndex, 0, newData);
-      // 更新展开子节点数量
+      // 更新父元素及祖先元素展开子节点的数量
       updateRowExpandLength(this.treeDataMap, state.row, 1, 'insert', {
         rowKey: keys.rowKey,
         childrenKey: keys.childrenKey,
@@ -214,44 +225,275 @@ class TableTreeStore<T extends TableRowData = TableRowData> {
       updateRowIndex(this.treeDataMap, dataSource, {
         minRowIndex: newState.rowIndex,
         rowKey: keys.rowKey,
+        type: 'add',
       });
     }
+
     return dataSource;
   }
-}
 
-export default TableTreeStore;
+  /**
+   * 在当前节点后，插入一个兄弟节点
+   * @param rowValue 当前节点唯一标识
+   * @param newData 待添加的新节点
+   */
+  insertAfter(rowValue: string | number, newData: T, dataSource: T[], keys: KeysType): T[] {
+    return this.insert(rowValue, newData, dataSource, keys, 'after');
+  }
 
-export function initialTreeDataMap<T extends TableRowData = TableRowData>(
-  treeDataMap: TableTreeDataMap,
-  dataSource: T[],
-  column: PrimaryTableCol,
-  keys: KeysType,
-) {
-  for (let i = 0, len = dataSource.length; i < len; i++) {
-    const item = dataSource[i];
-    const rowValue = get(item, keys.rowKey);
-    if (rowValue === undefined) {
-      log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.');
-      return;
-    }
-    const state: TableRowState = {
-      row: item,
-      rowIndex: i,
+  /**
+   * 在当前节点前，插入一个兄弟节点
+   * @param rowValue 当前节点唯一标识
+   * @param newData 待添加的新节点
+   */
+  insertBefore(rowValue: string | number, newData: T, dataSource: T[], keys: KeysType): T[] {
+    return this.insert(rowValue, newData, dataSource, keys, 'before');
+  }
+
+  insert(rowValue: string | number, newData: T, dataSource: T[], keys: KeysType, type: 'before' | 'after') {
+    const state = this.treeDataMap.get(rowValue);
+    if (!this.validateDataExist(state, rowValue)) return dataSource;
+    const newRowValue = get(newData, keys.rowKey);
+    const mapState = this.treeDataMap.get(newRowValue);
+    if (!this.validateDataDoubleExist(mapState, newRowValue)) return dataSource;
+    const rowIndex = type === 'after' ? state.rowIndex + 1 : state.rowIndex;
+    const newState = {
+      id: newRowValue,
+      row: newData,
+      rowIndex,
+      level: state.level,
       expanded: false,
-      level: 0,
       expandChildrenLength: 0,
-      disabled: isRowSelectedDisabled(column, item, i),
+      disabled: false,
+      path: state.path.slice(0, -1),
+      parent: state.parent,
     };
-    state.path = [state];
-    treeDataMap.set(rowValue, state);
-    const children = get(item, keys.childrenKey);
-    if (children?.length) {
-      initialTreeDataMap(treeDataMap, children, column, keys);
+    newState.path = newState.path.concat(newState);
+    const dataIndex = type === 'after' ? state.rowIndex + (state.expandChildrenLength + 1) : state.rowIndex;
+    dataSource.splice(dataIndex, 0, newData);
+    const distance = type === 'after' ? 1 : 0;
+    if (state.parent) {
+      const childrenIndex = state.parent.row[keys.childrenKey].findIndex(
+        (t: TableRowData) => rowValue === get(t, keys.rowKey),
+      );
+      state.parent.row[keys.childrenKey].splice(childrenIndex + distance, 0, newData);
+      updateRowExpandLength(this.treeDataMap, state.parent.row, 1, 'insert', keys);
     }
+    this.treeDataMap.set(newRowValue, newState);
+
+    // 更新 rowIndex 之后的下标
+    updateRowIndex(this.treeDataMap, dataSource, {
+      rowKey: keys.rowKey,
+      minRowIndex: state.rowIndex + 1,
+      type: 'add',
+    });
+
+    return dataSource;
+  }
+
+  /**
+   * 交换数据行
+   * @returns 交换失败返回 false
+   */
+  swapData(
+    dataSource: T[],
+    params: SwapParams<T>,
+    keys: KeysType,
+  ): { dataSource: T[]; result: boolean; code?: number; reason?: string } {
+    const startIndex = params.currentIndex;
+    const endIndex = params.targetIndex;
+    if (startIndex === endIndex) return { dataSource, result: true };
+    const startRowValue = get(params.current, keys.rowKey);
+    const endRowValue = get(params.target, keys.rowKey);
+    const startState = this.treeDataMap.get(startRowValue);
+    const endState = this.treeDataMap.get(endRowValue);
+    if (startState.level !== endState.level) {
+      return {
+        dataSource,
+        result: false,
+        code: TABLE_TREE_ERROR_CODE_NOT_SAME_LEVEL.code,
+        reason: TABLE_TREE_ERROR_CODE_NOT_SAME_LEVEL.reason,
+      };
+    }
+    const startLastIndex = startIndex + startState.expandChildrenLength + 1;
+    const endLastIndex = endIndex + endState.expandChildrenLength + 1;
+    const startRowList = dataSource.slice(startIndex, startLastIndex);
+    const endRowList = dataSource.slice(endIndex, endLastIndex);
+    if (startIndex > endIndex) {
+      const middleRowList = dataSource.slice(endLastIndex, startIndex);
+      const allSwapList = startRowList.concat(endRowList, middleRowList);
+      dataSource.splice(endIndex, allSwapList.length);
+      dataSource.splice(endIndex, 0, ...allSwapList);
+      updateRowIndex(this.treeDataMap, dataSource, {
+        rowKey: keys.rowKey,
+        minRowIndex: endIndex,
+        maxRowIndex: startLastIndex,
+      });
+    } else {
+      const middleRowList = dataSource.slice(startLastIndex, endIndex);
+      const allSwapList = middleRowList.concat(endRowList, startRowList);
+      dataSource.splice(startIndex, allSwapList.length);
+      dataSource.splice(startIndex, 0, ...allSwapList);
+      updateRowIndex(this.treeDataMap, dataSource, {
+        rowKey: keys.rowKey,
+        minRowIndex: startIndex,
+        maxRowIndex: endLastIndex,
+      });
+    }
+
+    // 交换父元素中的两个元素位置
+    if (startState.parent) {
+      const children = startState.parent.row[keys.childrenKey];
+      let count = 0;
+      for (let i = 0, len = children.length; i < len; i++) {
+        if (get(children[i], keys.rowKey) === startRowValue) {
+          children[i] = params.target;
+          count += 1;
+        }
+        if (get(children[i], keys.rowKey) === endRowValue) {
+          children[i] = params.current;
+          count += 1;
+        }
+        if (count >= 2) break;
+      }
+    }
+
+    return { dataSource, result: true };
+  }
+
+  /**
+   * 展开所有节点
+   */
+  expandAll(dataSource: T[], keys: KeysType) {
+    this.expandAllRowIndex = 0;
+    const expandLoop = (
+      dataSource: T[],
+      keys: KeysType,
+      newData: T[] = [],
+      parentExpanded = false,
+      parent: TableRowState = null,
+    ) => {
+      for (let i = 0, len = dataSource.length; i < len; i++) {
+        const item = dataSource[i];
+        const rowValue = get(item, keys.rowKey);
+        const state = this.treeDataMap.get(rowValue);
+        const children = get(item, keys.childrenKey);
+        const originalExpanded = state.expanded;
+        state.rowIndex = this.expandAllRowIndex;
+        state.expanded = true;
+        state.expandChildrenLength = children?.length || 0;
+        this.expandAllRowIndex += 1;
+        if (!parentExpanded) {
+          newData.push(item);
+        }
+        if (children?.length && !originalExpanded) {
+          // 同步更新父元素的展开数量
+          let tmpParent = parent;
+          while (tmpParent) {
+            tmpParent.expandChildrenLength += children.length;
+            tmpParent = tmpParent.parent;
+          }
+          // 继续子元素
+          expandLoop(children, keys, newData, originalExpanded, state);
+        }
+      }
+      return newData;
+    };
+    return expandLoop(dataSource, keys);
+  }
+
+  /**
+   * 收起所有节点
+   */
+  foldAll(dataSource: T[], keys: KeysType) {
+    const newData: T[] = [];
+    for (let i = 0, len = dataSource.length; i < len; i++) {
+      const item = dataSource[i];
+      const rowValue = get(item, keys.rowKey);
+      const state = this.treeDataMap.get(rowValue);
+      state.rowIndex = state.level === 0 ? i : -1;
+      state.expanded = false;
+      state.expandChildrenLength = 0;
+      if (state.level === 0) {
+        newData.push(item);
+      }
+      const children = get(item, keys.childrenKey);
+      if (children?.length) {
+        this.expandAll(children, keys);
+      }
+    }
+    return newData;
+  }
+
+  /**
+   * 初始化树形结构 Map
+   * @param treeDataMap 树形结构 Map
+   * @param dataSource 数据源
+   * @param column 树形结构列
+   * @param keys 字段映射关系
+   * @param level 层级
+   * @param parent 父元素
+   * @returns void
+   */
+  initialTreeDataMap(
+    treeDataMap: TableTreeDataMap,
+    dataSource: T[],
+    column: PrimaryTableCol,
+    keys: KeysType,
+    level = 0,
+    parent: TableRowState = null,
+  ) {
+    for (let i = 0, len = dataSource.length; i < len; i++) {
+      const item = dataSource[i];
+      const rowValue = get(item, keys.rowKey);
+      if (rowValue === undefined) {
+        log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.');
+        return;
+      }
+      const children = get(item, keys.childrenKey);
+      const state: TableRowState = {
+        id: rowValue,
+        row: item,
+        rowIndex: level === 0 ? i : -1,
+        level,
+        expanded: false,
+        expandChildrenLength: 0,
+        disabled: isRowSelectedDisabled(column, item, i),
+        parent,
+      };
+      state.path = parent ? parent.path.concat(state) : [state];
+      treeDataMap.set(rowValue, state);
+      if (children?.length) {
+        this.initialTreeDataMap(treeDataMap, children, column, keys, level + 1, state);
+      }
+    }
+  }
+
+  /**
+   * 校验数据合法性
+   */
+  validateDataExist(state: TableRowState, rowValue: string | number) {
+    if (!state) {
+      console.warn(`TDesign Table Warn: ${rowValue} does not exist.`);
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * 校验数据是否已存在
+   */
+  validateDataDoubleExist(state: TableRowState, rowValue: string | number) {
+    if (state) {
+      console.warn(`TDesign Table Warn: Duplicated Key. ${rowValue} already exists.`);
+      return false;
+    }
+    return true;
   }
 }
 
+export default TableTreeStore;
+
 /**
  * 更新展开的子节点数量
  * @param rowSate 行数据和状态
@@ -298,26 +540,23 @@ export function clearRowExpandLength<T>(treeDataMap: TableTreeDataMap, row: T, k
  */
 export function updateChildrenRowState<T>(
   treeDataMap: TableTreeDataMap,
-  rowState: TableRowState<T>,
+  rowState: TableRowState,
   expanded: boolean,
   keys: KeysType,
 ) {
-  const { row, level = 0, rowIndex } = rowState;
+  const { row, rowIndex } = rowState;
   const childrenNodes = get(row, keys.childrenKey);
   childrenNodes.forEach((item: T, kidRowIndex: number) => {
     const rowValue = get(item, keys.rowKey);
     const index = expanded ? rowIndex + 1 + kidRowIndex : -1;
     const curState = treeDataMap.get(rowValue);
-    const newState: TableRowState<T> = {
+    const newState: TableRowState = {
       ...curState,
       row: item,
       rowIndex: index,
       expanded: false,
       parent: rowState,
-      level: level + 1,
-      path: [],
     };
-    newState.path = newState.path.concat(newState);
     treeDataMap.set(rowValue, newState);
     // 父节点展开，子节点不一定展开；父节点收起，则所有子节点收起
     if (!expanded) {
@@ -361,7 +600,12 @@ export function updateRowData<T extends TableRowData = TableRowData>(
 export function updateRowIndex<T>(
   treeDataMap: TableTreeDataMap,
   dataSource: T[],
-  extra: { rowKey: string; minRowIndex?: number; maxRowIndex?: number },
+  extra: {
+    rowKey: string;
+    minRowIndex?: number;
+    maxRowIndex?: number;
+    type?: 'add' | 'remove';
+  },
 ) {
   const start = extra.minRowIndex || 0;
   const end = extra.maxRowIndex || dataSource.length;
diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts
index a3dd5ca35..4099217f9 100644
--- a/src/table/hooks/useDragSort.ts
+++ b/src/table/hooks/useDragSort.ts
@@ -83,9 +83,9 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo
         const { oldIndex: currentIndex, newIndex: targetIndex } = evt;
         const params: DragSortContext<TableRowData> = {
           currentIndex,
-          current: data[currentIndex],
+          current: props.data[currentIndex],
           targetIndex,
-          target: data[targetIndex],
+          target: props.data[targetIndex],
           currentData: swapDragArrayElement(props.data, currentIndex, targetIndex),
           e: evt,
           sort: 'row',
diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx
index 580c0e401..36356ffbf 100644
--- a/src/table/hooks/useTreeData.tsx
+++ b/src/table/hooks/useTreeData.tsx
@@ -5,7 +5,7 @@ import { AddRectangleIcon, MinusRectangleIcon } from 'tdesign-icons-vue';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import { CreateElement } from 'vue';
-import TableTreeStore from './tree-store';
+import TableTreeStore, { SwapParams } from './tree-store';
 import {
   TdEnhancedTableProps, PrimaryTableCol, TableRowData, TableRowValue, TableRowState,
 } from '../type';
@@ -52,15 +52,15 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
       if (!data) return [];
       // 如果没有树形解构，则不需要相关逻辑
       if (!props.tree || !Object.keys(props.tree).length) {
-        // @ts-ignore
         dataSource.value = data;
         return;
       }
-      const newVal = cloneDeep(data);
-      // @ts-ignore
-      dataSource.value = newVal;
-      // @ts-ignore
+      let newVal = cloneDeep(data);
       store.value.initialTreeStore(newVal, props.columns, rowDataKeys.value);
+      if (props.tree?.defaultExpandAll) {
+        newVal = store.value.expandAll(newVal, rowDataKeys.value);
+      }
+      dataSource.value = newVal;
     },
     { immediate: true },
   );
@@ -96,12 +96,8 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
    * @param p 行数据
    */
   function toggleExpandData(p: { row: TableRowData; rowIndex: number; trigger?: 'inner' }) {
-    if (!props.tree) {
-      console.error('toggleExpandData can only be used in tree data.');
-      return;
-    }
     dataSource.value = store.value.toggleExpandData(p, dataSource.value, rowDataKeys.value);
-    if (p.trigger === 'inner') {
+    if (p?.trigger === 'inner') {
       const rowValue = get(p.row, rowDataKeys.value.rowKey);
       const params = {
         row: p.row,
@@ -191,7 +187,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
    */
   function remove(key: TableRowValue) {
     // 引用传值，可自动更新 dataSource。（dataSource 本是内部变量，可以在任何地方进行任何改变）
-    dataSource.value = store.value.remove(key, dataSource.value, rowDataKeys.value);
+    dataSource.value = [...store.value.remove(key, dataSource.value, rowDataKeys.value)];
   }
 
   /**
@@ -201,26 +197,69 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
    */
   function appendTo<T>(key: TableRowValue, newData: T) {
     // 引用传值，可自动更新 dataSource。（dataSource 本是内部变量，可以在任何地方进行任何改变）
-    dataSource.value = store.value.appendTo(key, newData, dataSource.value, rowDataKeys.value);
+    dataSource.value = [...store.value.appendTo(key, newData, dataSource.value, rowDataKeys.value)];
+  }
+
+  /**
+   * 当前节点之后，插入节点
+   */
+  function insertAfter<T>(rowValue: TableRowValue, newData: T) {
+    dataSource.value = [...store.value.insertAfter(rowValue, newData, dataSource.value, rowDataKeys.value)];
+  }
+
+  /**
+   * 当前节点之后，插入节点
+   */
+  function insertBefore<T>(rowValue: TableRowValue, newData: T) {
+    dataSource.value = [...store.value.insertBefore(rowValue, newData, dataSource.value, rowDataKeys.value)];
   }
 
   /**
-   * 设置展开行层级
+   * 展开所有节点
    */
-  // function setExpandedLevel(level: 1 | 2 | 3 | 4 | 5) {
-  //   dataSource.value = store.value.setExpandedLevel(level, dataSource.value, rowDataKeys.value);
-  // }
+  function expandAll() {
+    dataSource.value = [...store.value.expandAll(dataSource.value, rowDataKeys.value)];
+  }
+
+  /**
+   * 收起所有节点
+   */
+  function foldAll() {
+    dataSource.value = [...store.value.foldAll(dataSource.value, rowDataKeys.value)];
+  }
+
+  /**
+   * 交换行数据
+   */
+  function swapData(params: SwapParams<TableRowData>) {
+    const r = store.value.swapData(dataSource.value, params, rowDataKeys.value);
+    if (r.result) {
+      dataSource.value = [...r.dataSource];
+    } else {
+      const params = {
+        code: r.code,
+        reason: r.reason,
+      };
+      props.onAbnormalDragSort?.(params);
+      // Vue3 do not need next line
+      context.emit('abnormal-drag-sort', params);
+    }
+  }
 
   return {
     store,
     rowDataKeys,
     dataSource,
+    swapData,
     setData,
     getData,
     remove,
     appendTo,
+    insertAfter,
+    insertBefore,
     formatTreeColumn,
     toggleExpandData,
-    // setExpandedLevel,
+    expandAll,
+    foldAll,
   };
 }
diff --git a/src/table/type.ts b/src/table/type.ts
index 29e6c554a..c1f82fe73 100644
--- a/src/table/type.ts
+++ b/src/table/type.ts
@@ -123,7 +123,7 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
   rowClassName?: ClassName | ((params: RowClassNameParams<T>) => ClassName);
   /**
    * 使用 rowKey 唯一标识一行数据
-   * @default ''
+   * @default 'id'
    */
   rowKey: string;
   /**
@@ -491,13 +491,21 @@ export interface PrimaryTableCol<T extends TableRowData = TableRowData>
 
 export interface TdEnhancedTableProps<T extends TableRowData = TableRowData> extends TdPrimaryTableProps<T> {
   /**
-   * 树形结构相关配置。`tree.indent` 表示树结点缩进距离，单位：px，默认为 24px。`tree.treeNodeColumnIndex` 表示树结点在第几列渲染，默认为 0 ，第一列。`tree.childrenKey` 表示树形结构子节点字段，默认为 children。`tree.checkStrictly` 表示树形结构的行选中（多选），父子行选中是否独立，默认独立，值为 true
+   * 树形结构中，拖拽排序前控制，返回值为 `true` 则继续排序；返回值为 `false` 则中止排序还原数据
+   */
+  beforeDragSort?: (context: DragSortContext<T>) => boolean;
+  /**
+   * 树形结构相关配置。具体属性文档查看 `TableTreeConfig` 相关描述
    */
   tree?: TableTreeConfig;
   /**
    * 自定义树形结构展开图标，支持全局配置 `GlobalConfigProvider`
    */
   treeExpandAndFoldIcon?: TNode<{ type: 'expand' | 'fold' }>;
+  /**
+   * 异常拖拽排序时触发，如：树形结构中，非同层级之间的交换。`context.code` 指交换异常错误码，固定值；`context.reason` 指交换异常的原因
+   */
+  onAbnormalDragSort?: (context: TableAbnormalDragSortContext<T>) => void;
   /**
    * 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发
    */
@@ -506,6 +514,14 @@ export interface TdEnhancedTableProps<T extends TableRowData = TableRowData> ext
 
 /** 组件实例方法 */
 export interface EnhancedTableInstanceFunctions<T extends TableRowData = TableRowData> {
+  /**
+   * 展开全部行
+   */
+  expandAll: () => void;
+  /**
+   * 折叠全部行
+   */
+  foldAll: () => void;
   /**
    * 树形结构中，用于获取行数据所有信息。泛型 `T` 表示行数据类型
    */
@@ -539,6 +555,10 @@ export interface TableRowState<T extends TableRowData = TableRowData> {
    * @default false
    */
   expanded: boolean;
+  /**
+   * 唯一标识
+   */
+  id: string | number;
   /**
    * 当前节点层级
    */
@@ -556,7 +576,7 @@ export interface TableRowState<T extends TableRowData = TableRowData> {
    */
   row: T;
   /**
-   * 表格行下标
+   * 表格行下标，值为 `-1` 标识当前行未展开显示
    */
   rowIndex: number;
 }
@@ -650,6 +670,34 @@ export interface TableColumnController {
   placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 
+export interface TableTreeConfig {
+  /**
+   * 表示树形结构的行选中（多选），父子行选中是否独立
+   * @default true
+   */
+  checkStrictly?: boolean;
+  /**
+   * 树形结构子节点字段，示例：`childrenKey='list'`。一般应用在数据 `data` 的子节点字段不是 `children` 的场景
+   * @default children
+   */
+  childrenKey?: string;
+  /**
+   * 是否默认展开全部，仅默认情况有效。如果希望自由控制树形结构的展开或收起，可使用实例方法 `expandAll` 和 `foldAll`
+   * @default false
+   */
+  defaultExpandAll?: boolean;
+  /**
+   * 树结点缩进距离，单位：px
+   * @default 24
+   */
+  indent?: number;
+  /**
+   * 树结点在第几列渲染，默认为第一列
+   * @default 0
+   */
+  treeNodeColumnIndex?: number;
+}
+
 export type TableRowAttributes<T> =
   | HTMLElementAttributes
   | ((params: { row: T; rowIndex: number; type: 'body' | 'foot' }) => HTMLElementAttributes)
@@ -809,11 +857,9 @@ export type SorterFun<T> = (a: T, b: T) => number;
 
 export type SortType = 'desc' | 'asc' | 'all';
 
-export interface TableTreeConfig {
-  indent?: number;
-  treeNodeColumnIndex?: number;
-  childrenKey?: 'children';
-  checkStrictly?: boolean;
+export interface TableAbnormalDragSortContext<T> {
+  code: number;
+  reason: string;
 }
 
 export interface TableTreeExpandChangeContext<T> {
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 70018d1bb..5dfa14fb3 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -15231,22 +15231,25 @@ exports[`ssr snapshot test renders ./examples/table/demos/single-sort.vue correc
 
 exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] = `
 <div>
-  <div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置数据</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">展开/收起可见行</span></button> <label class="t-checkbox" style="margin-left:16px;vertical-align:middle;"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">
+  <div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置数据</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">任意节点展开/收起</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-left:16px;"><span class="t-button__text">展开全部</span></button> <label class="t-checkbox" style="margin-left:16px;vertical-align:middle;"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">
       自定义折叠/展开图标
     </span></label></div> <br>
-  <div class="t-table" style="position:relative;">
+  <div class="t-table t-table--row-handler-draggable" style="position:relative;">
     <div class="t-table__content">
       <div class="t-table__resize-line" style="display:none;left:10px;height:10px;"></div>
       <table class="t-table--layout-fixed" style="width:;">
         <colgroup>
-          <col>
-          <col style="width:220px;">
-          <col>
-          <col>
-          <col style="width:280px;">
+          <col style="width:80px;">
+          <col style="width:100px;">
+          <col style="width:180px;">
+          <col style="width:80px;">
+          <col style="width:340px;">
         </colgroup>
         <thead class="t-table__header">
           <tr>
+            <th data-colkey="drag" class="t-table__th-drag">
+              <div class="t-table__th-cell-inner">排序</div>
+            </th>
             <th data-colkey="id" class="t-table__th-id">
               <div class="t-table__th-cell-inner">
                 <div class="t-table__ellipsis t-text-ellipsis">编号</div>
@@ -15260,88 +15263,95 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
             <th data-colkey="platform" class="t-table__th-platform">
               <div class="t-table__th-cell-inner">平台</div>
             </th>
-            <th data-colkey="type" class="t-table__th-type">
-              <div class="t-table__th-cell-inner">类型</div>
-            </th>
             <th data-colkey="operate" class="t-table__th-operate t-align-center">
               <div class="t-table__th-cell-inner">操作</div>
             </th>
           </tr>
         </thead>
         <tbody class="t-table__body">
-          <tr>
+          <tr data-id="我是 0_1 号">
+            <td class="t-table__handle-draggable"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-move">
+                <path fill="currentColor" d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z" fill-opacity="0.9"></path>
+              </svg></td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">0</div>
             </td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">
-                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;">我是 0_1 号（第 1 页）</div>
+                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;">我是 0_1 号</div>
               </div>
             </td>
             <td>共有</td>
-            <td>String</td>
             <td class="t-align-center">
-              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
+              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">前插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">后插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
             </td>
           </tr>
-          <tr>
+          <tr data-id="我是 1_1 号">
+            <td class="t-table__handle-draggable"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-move">
+                <path fill="currentColor" d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z" fill-opacity="0.9"></path>
+              </svg></td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">1</div>
             </td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">
-                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;"><span class="t-table__tree-op-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle"><path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path></svg></span>我是 1_1 号（第 1 页）</div>
+                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;"><span class="t-table__tree-op-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle"><path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path></svg></span>我是 1_1 号</div>
               </div>
             </td>
             <td>私有</td>
-            <td>Number</td>
             <td class="t-align-center">
-              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
+              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">前插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">后插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
             </td>
           </tr>
-          <tr>
+          <tr data-id="我是 2_1 号">
+            <td class="t-table__handle-draggable"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-move">
+                <path fill="currentColor" d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z" fill-opacity="0.9"></path>
+              </svg></td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">2</div>
             </td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">
-                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;"><span class="t-table__tree-op-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle"><path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path></svg></span>我是 2_1 号（第 1 页）</div>
+                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;"><span class="t-table__tree-op-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle"><path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path></svg></span>我是 2_1 号</div>
               </div>
             </td>
             <td>共有</td>
-            <td>Array</td>
             <td class="t-align-center">
-              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
+              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">前插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">后插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
             </td>
           </tr>
-          <tr>
+          <tr data-id="我是 3_1 号">
+            <td class="t-table__handle-draggable"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-move">
+                <path fill="currentColor" d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z" fill-opacity="0.9"></path>
+              </svg></td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">3</div>
             </td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">
-                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;"><span class="t-table__tree-op-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle"><path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path></svg></span>我是 3_1 号（第 1 页）</div>
+                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;"><span class="t-table__tree-op-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle"><path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path></svg></span>我是 3_1 号</div>
               </div>
             </td>
             <td>私有</td>
-            <td>Object</td>
             <td class="t-align-center">
-              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
+              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">前插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">后插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
             </td>
           </tr>
-          <tr>
+          <tr data-id="我是 4_1 号">
+            <td class="t-table__handle-draggable"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-move">
+                <path fill="currentColor" d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z" fill-opacity="0.9"></path>
+              </svg></td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">4</div>
             </td>
             <td class="t-table-td--ellipsis">
               <div class="t-table__ellipsis t-text-ellipsis">
-                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;"><span class="t-table__tree-op-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle"><path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path></svg></span>我是 4_1 号（第 1 页）</div>
+                <div class="t-table__tree-col t-table__tree-col--inline" style="padding-left:1px;"><span class="t-table__tree-op-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle"><path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path></svg></span>我是 4_1 号</div>
               </div>
             </td>
             <td>共有</td>
-            <td>String</td>
             <td class="t-align-center">
-              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
+              <div class="tdesign-table-demo__table-operations"><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">插入</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">前插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">后插</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">更新</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">查看</span></button><button type="button" class="t-button t-size-m t-button--variant-text t-button--theme-default"><span class="t-button__text">删除</span></button></div>
             </td>
           </tr>
         </tbody>
@@ -15350,7 +15360,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
     </div>
     <div class="t-table__pagination">
       <div class="t-pagination t-size-m">
-        <div class="t-pagination__total">共 100 项数据</div>
+        <div class="t-pagination__total">共 5 项数据</div>
         <div class="t-select__wrap t-pagination__select">
           <div class="t-select t-select-polyfill t-size-m t-select__popup-reference"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span class="t-select__single">10</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill">
               <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
@@ -15361,17 +15371,8 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
           </svg></div>
         <ul class="t-pagination__pager">
           <li class="t-pagination__number t-is-current">1</li>
-          <li class="t-pagination__number">2</li>
-          <li class="t-pagination__number">3</li>
-          <li class="t-pagination__number">4</li>
-          <li class="t-pagination__number">5</li>
-          <li class="t-pagination__number">6</li>
-          <li class="t-pagination__number">7</li>
-          <li class="t-pagination__number">8</li>
-          <li class="t-pagination__number">9</li>
-          <li class="t-pagination__number">10</li>
         </ul>
-        <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
+        <div disabled="disabled" class="t-pagination__btn t-pagination__btn-next t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
             <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
           </svg></div>
       </div>
diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap
index 4e84f9ad4..12e938288 100644
--- a/test/unit/table/__snapshots__/demo.test.js.snap
+++ b/test/unit/table/__snapshots__/demo.test.js.snap
@@ -20008,7 +20008,19 @@ exports[`Table Table treeVue demo works fine 1`] = `
       <span
         class="t-button__text"
       >
-        展开/收起可见行
+        任意节点展开/收起
+      </span>
+    </button>
+     
+    <button
+      class="t-button t-size-m t-button--variant-base t-button--theme-default"
+      style="margin-left: 16px;"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+        展开全部
       </span>
     </button>
      
@@ -20037,7 +20049,7 @@ exports[`Table Table treeVue demo works fine 1`] = `
   <br />
    
   <div
-    class="t-table"
+    class="t-table t-table--row-handler-draggable"
     style="position: relative;"
   >
     <div
@@ -20051,20 +20063,36 @@ exports[`Table Table treeVue demo works fine 1`] = `
         class="t-table--layout-fixed"
       >
         <colgroup>
-          <col />
           <col
-            style="width: 220px;"
+            style="width: 80px;"
+          />
+          <col
+            style="width: 100px;"
           />
-          <col />
-          <col />
           <col
-            style="width: 280px;"
+            style="width: 180px;"
+          />
+          <col
+            style="width: 80px;"
+          />
+          <col
+            style="width: 340px;"
           />
         </colgroup>
         <thead
           class="t-table__header"
         >
           <tr>
+            <th
+              class="t-table__th-drag"
+              data-colkey="drag"
+            >
+              <div
+                class="t-table__th-cell-inner"
+              >
+                排序
+              </div>
+            </th>
             <th
               class="t-table__th-id"
               data-colkey="id"
@@ -20103,16 +20131,6 @@ exports[`Table Table treeVue demo works fine 1`] = `
                 平台
               </div>
             </th>
-            <th
-              class="t-table__th-type"
-              data-colkey="type"
-            >
-              <div
-                class="t-table__th-cell-inner"
-              >
-                类型
-              </div>
-            </th>
             <th
               class="t-table__th-operate t-align-center"
               data-colkey="operate"
@@ -20130,7 +20148,25 @@ exports[`Table Table treeVue demo works fine 1`] = `
         >
           <tr
             class=""
+            data-id="我是 0_1 号"
           >
+            <td
+              class="t-table__handle-draggable"
+            >
+              <svg
+                class="t-icon t-icon-move"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </td>
             <td
               class="t-table-td--ellipsis"
             >
@@ -20150,7 +20186,7 @@ exports[`Table Table treeVue demo works fine 1`] = `
                   class="t-table__tree-col t-table__tree-col--inline"
                   style="padding-left: 1px;"
                 >
-                  我是 0_1 号（第 1 页）
+                  我是 0_1 号
                 </div>
               </div>
             </td>
@@ -20159,11 +20195,6 @@ exports[`Table Table treeVue demo works fine 1`] = `
             >
               共有
             </td>
-            <td
-              class=""
-            >
-              String
-            </td>
             <td
               class="t-align-center"
             >
@@ -20180,6 +20211,26 @@ exports[`Table Table treeVue demo works fine 1`] = `
                     插入
                   </span>
                 </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    前插
+                  </span>
+                </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    后插
+                  </span>
+                </button>
                 <button
                   class="t-button t-size-m t-button--variant-text t-button--theme-default"
                   type="button"
@@ -20215,7 +20266,25 @@ exports[`Table Table treeVue demo works fine 1`] = `
           </tr>
           <tr
             class=""
+            data-id="我是 1_1 号"
           >
+            <td
+              class="t-table__handle-draggable"
+            >
+              <svg
+                class="t-icon t-icon-move"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </td>
             <td
               class="t-table-td--ellipsis"
             >
@@ -20257,7 +20326,7 @@ exports[`Table Table treeVue demo works fine 1`] = `
                       />
                     </svg>
                   </span>
-                  我是 1_1 号（第 1 页）
+                  我是 1_1 号
                 </div>
               </div>
             </td>
@@ -20266,11 +20335,6 @@ exports[`Table Table treeVue demo works fine 1`] = `
             >
               私有
             </td>
-            <td
-              class=""
-            >
-              Number
-            </td>
             <td
               class="t-align-center"
             >
@@ -20287,6 +20351,26 @@ exports[`Table Table treeVue demo works fine 1`] = `
                     插入
                   </span>
                 </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    前插
+                  </span>
+                </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    后插
+                  </span>
+                </button>
                 <button
                   class="t-button t-size-m t-button--variant-text t-button--theme-default"
                   type="button"
@@ -20322,7 +20406,25 @@ exports[`Table Table treeVue demo works fine 1`] = `
           </tr>
           <tr
             class=""
+            data-id="我是 2_1 号"
           >
+            <td
+              class="t-table__handle-draggable"
+            >
+              <svg
+                class="t-icon t-icon-move"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </td>
             <td
               class="t-table-td--ellipsis"
             >
@@ -20364,7 +20466,7 @@ exports[`Table Table treeVue demo works fine 1`] = `
                       />
                     </svg>
                   </span>
-                  我是 2_1 号（第 1 页）
+                  我是 2_1 号
                 </div>
               </div>
             </td>
@@ -20373,11 +20475,6 @@ exports[`Table Table treeVue demo works fine 1`] = `
             >
               共有
             </td>
-            <td
-              class=""
-            >
-              Array
-            </td>
             <td
               class="t-align-center"
             >
@@ -20394,6 +20491,26 @@ exports[`Table Table treeVue demo works fine 1`] = `
                     插入
                   </span>
                 </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    前插
+                  </span>
+                </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    后插
+                  </span>
+                </button>
                 <button
                   class="t-button t-size-m t-button--variant-text t-button--theme-default"
                   type="button"
@@ -20429,7 +20546,25 @@ exports[`Table Table treeVue demo works fine 1`] = `
           </tr>
           <tr
             class=""
+            data-id="我是 3_1 号"
           >
+            <td
+              class="t-table__handle-draggable"
+            >
+              <svg
+                class="t-icon t-icon-move"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </td>
             <td
               class="t-table-td--ellipsis"
             >
@@ -20471,7 +20606,7 @@ exports[`Table Table treeVue demo works fine 1`] = `
                       />
                     </svg>
                   </span>
-                  我是 3_1 号（第 1 页）
+                  我是 3_1 号
                 </div>
               </div>
             </td>
@@ -20480,11 +20615,6 @@ exports[`Table Table treeVue demo works fine 1`] = `
             >
               私有
             </td>
-            <td
-              class=""
-            >
-              Object
-            </td>
             <td
               class="t-align-center"
             >
@@ -20501,6 +20631,26 @@ exports[`Table Table treeVue demo works fine 1`] = `
                     插入
                   </span>
                 </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    前插
+                  </span>
+                </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    后插
+                  </span>
+                </button>
                 <button
                   class="t-button t-size-m t-button--variant-text t-button--theme-default"
                   type="button"
@@ -20536,7 +20686,25 @@ exports[`Table Table treeVue demo works fine 1`] = `
           </tr>
           <tr
             class=""
+            data-id="我是 4_1 号"
           >
+            <td
+              class="t-table__handle-draggable"
+            >
+              <svg
+                class="t-icon t-icon-move"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M5 1a1 1 0 100 2 1 1 0 000-2zM11 1a1 1 0 100 2 1 1 0 000-2zM4 6a1 1 0 112 0 1 1 0 01-2 0zM11 5a1 1 0 100 2 1 1 0 000-2zM4 10a1 1 0 112 0 1 1 0 01-2 0zM5 13a1 1 0 100 2 1 1 0 000-2zM10 10a1 1 0 112 0 1 1 0 01-2 0zM11 13a1 1 0 100 2 1 1 0 000-2z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </td>
             <td
               class="t-table-td--ellipsis"
             >
@@ -20578,7 +20746,7 @@ exports[`Table Table treeVue demo works fine 1`] = `
                       />
                     </svg>
                   </span>
-                  我是 4_1 号（第 1 页）
+                  我是 4_1 号
                 </div>
               </div>
             </td>
@@ -20587,11 +20755,6 @@ exports[`Table Table treeVue demo works fine 1`] = `
             >
               共有
             </td>
-            <td
-              class=""
-            >
-              String
-            </td>
             <td
               class="t-align-center"
             >
@@ -20608,6 +20771,26 @@ exports[`Table Table treeVue demo works fine 1`] = `
                     插入
                   </span>
                 </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    前插
+                  </span>
+                </button>
+                <button
+                  class="t-button t-size-m t-button--variant-text t-button--theme-default"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    后插
+                  </span>
+                </button>
                 <button
                   class="t-button t-size-m t-button--variant-text t-button--theme-default"
                   type="button"
@@ -20654,7 +20837,7 @@ exports[`Table Table treeVue demo works fine 1`] = `
         <div
           class="t-pagination__total"
         >
-          共 100 项数据
+          共 5 项数据
         </div>
         <div
           class="t-select__wrap t-pagination__select"
@@ -20716,54 +20899,10 @@ exports[`Table Table treeVue demo works fine 1`] = `
           >
             1
           </li>
-          <li
-            class="t-pagination__number"
-          >
-            2
-          </li>
-          <li
-            class="t-pagination__number"
-          >
-            3
-          </li>
-          <li
-            class="t-pagination__number"
-          >
-            4
-          </li>
-          <li
-            class="t-pagination__number"
-          >
-            5
-          </li>
-          <li
-            class="t-pagination__number"
-          >
-            6
-          </li>
-          <li
-            class="t-pagination__number"
-          >
-            7
-          </li>
-          <li
-            class="t-pagination__number"
-          >
-            8
-          </li>
-          <li
-            class="t-pagination__number"
-          >
-            9
-          </li>
-          <li
-            class="t-pagination__number"
-          >
-            10
-          </li>
         </ul>
         <div
-          class="t-pagination__btn t-pagination__btn-next"
+          class="t-pagination__btn t-pagination__btn-next t-is-disabled"
+          disabled="disabled"
         >
           <svg
             class="t-icon t-icon-chevron-right"