diff --git a/examples/swiper/demos/current.vue b/examples/swiper/demos/current.vue
index 71e4fd3dea..7ad12ab391 100644
--- a/examples/swiper/demos/current.vue
+++ b/examples/swiper/demos/current.vue
@@ -21,11 +21,8 @@
       </t-swiper-item>
     </t-swiper>
     <div class="tdesign-demo-block-row">
-      <t-button
-        size="small"
-        @click="current = current + 2 > 6 ? 0 : current + 1"
-      >
-        跳转到第 {{current + 2 >= 7 ? 1 : current + 2}} 项
+      <t-button size="small" @click="current = current + 2 > 6 ? 0 : current + 1">
+        跳转到第 {{ current + 2 >= 7 ? 1 : current + 2 }} 项
       </t-button>
     </div>
   </div>
diff --git a/examples/table/demos/drag-col-sort.vue b/examples/table/demos/drag-col-sort.vue
index 2dd0c1c929..aa65a5e137 100644
--- a/examples/table/demos/drag-col-sort.vue
+++ b/examples/table/demos/drag-col-sort.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="demo-container t-table-demo-sort">
     <div class="item">
-      <!-- 拖拽排序涉及到 data 的变更，相对比较慎重，因此仅支持受控用法 -->
-
       <t-table rowKey="id" :columns="columns" :data="data" dragSort="col" @drag-sort="onDragSort">
         <template #status="{ row }">
-          <p class="status" :class="['', 'warning', 'unhealth'][row.status]">
-            {{ ['健康', '警告', '异常'][row.status] }}
+          <p class="status" :class="['', 'warning', 'unhealth'][row && row.status]">
+            {{ ['健康', '警告', '异常'][row && row.status] }}
           </p>
         </template>
       </t-table>
@@ -14,27 +12,20 @@
   </div>
 </template>
 
-<script lang="jsx">
-import { MoveIcon } from 'tdesign-icons-vue';
-
-const columns = [
-  {
-    colKey: 'drag', // 列拖拽排序必要参数
-    title: '排序',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    cell: (h) => <MoveIcon />,
-    width: 80,
-  },
-  { colKey: 'instance', title: '集群名称' },
+<script>
+const initialColumns = [
+  { colKey: 'instance', title: '集群名称', width: 150 },
   {
     colKey: 'status',
     title: '状态',
+    width: 100,
   },
   {
     colKey: 'survivalTime',
     title: '存活时间(s)',
+    width: 200,
   },
-  { colKey: 'owner', title: '管理员' },
+  { colKey: 'owner', title: '管理员', width: 100 },
 ];
 
 const initialData = new Array(4).fill(5).map((_, i) => ({
@@ -49,15 +40,17 @@ export default {
   data() {
     return {
       data: [...initialData],
-      columns,
+      columns: [...initialColumns],
     };
   },
   methods: {
     onDragSort({
-      currentIndex, current, targetIndex, target, currentData, e,
+      currentIndex, current, targetIndex, target, currentData, e, sort,
     }) {
-      console.log('交换行', currentIndex, current, targetIndex, target, currentData, e);
-      this.data = currentData;
+      console.log('重新排序', currentIndex, current, targetIndex, target, currentData, e, sort);
+      if (sort === 'col') {
+        this.columns = currentData;
+      }
     },
   },
 };
diff --git a/examples/table/demos/drag-sort-handler.vue b/examples/table/demos/drag-sort-handler.vue
new file mode 100644
index 0000000000..458f530dfc
--- /dev/null
+++ b/examples/table/demos/drag-sort-handler.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="demo-container t-table-demo-sort">
+    <div class="item">
+      <!-- 拖拽排序涉及到 data 的变更，相对比较慎重，因此仅支持受控用法 -->
+
+      <t-table rowKey="id" :columns="columns" :data="data" dragSort="row-handler" @drag-sort="onDragSort">
+        <template #status="{ row }">
+          <p class="status" :class="['', 'warning', 'unhealth'][row.status]">
+            {{ ['健康', '警告', '异常'][row.status] }}
+          </p>
+        </template>
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script lang="jsx">
+import { MoveIcon } from 'tdesign-icons-vue';
+
+const columns = [
+  {
+    colKey: 'drag', // 列拖拽排序必要参数
+    title: '排序',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    cell: (h) => <MoveIcon />,
+    width: 80,
+  },
+  { colKey: 'instance', title: '集群名称' },
+  {
+    colKey: 'status',
+    title: '状态',
+  },
+  {
+    colKey: 'survivalTime',
+    title: '存活时间(s)',
+  },
+  { colKey: 'owner', title: '管理员' },
+];
+
+const initialData = new Array(4).fill(5).map((_, i) => ({
+  id: i + 1,
+  instance: `JQTest${i + 1}`,
+  status: [0, 1, 2, 1][i % 4],
+  owner: ['jenny;peter', 'jenny', 'jenny', 'peter'][i % 4],
+  survivalTime: [1000, 1000, 500, 1500][i % 4],
+}));
+
+export default {
+  data() {
+    return {
+      data: [...initialData],
+      columns,
+    };
+  },
+  methods: {
+    onDragSort({
+      currentIndex, current, targetIndex, target, currentData, e,
+    }) {
+      console.log('交换行', currentIndex, current, targetIndex, target, currentData, e);
+      this.data = currentData;
+    },
+  },
+};
+</script>
diff --git a/examples/table/demos/expandable.vue b/examples/table/demos/expandable.vue
index 78f571acb7..60bc195e98 100644
--- a/examples/table/demos/expandable.vue
+++ b/examples/table/demos/expandable.vue
@@ -17,7 +17,7 @@
 
     <div>
       <t-checkbox v-model="expandOnRowClick">允许点击行之后展开/收起</t-checkbox>
-      <t-checkbox v-model="fixedColums" style="margin-left: 32px">固定列</t-checkbox>
+      <t-checkbox v-model="fixedColumns" style="margin-left: 32px">固定列</t-checkbox>
       <t-checkbox v-model="emptyData" style="margin-left: 32px">空数据</t-checkbox>
     </div>
 
@@ -61,7 +61,7 @@
 <script lang="jsx">
 import { ChevronRightIcon, ChevronRightCircleIcon } from 'tdesign-icons-vue';
 
-const getColums = (isFixedColumn) => [
+const getColumns = (isFixedColumn) => [
   { colKey: 'instance', title: '集群名称', fixed: isFixedColumn ? 'left' : '' },
   {
     colKey: 'status',
@@ -104,7 +104,7 @@ export default {
       expandControl: 'true',
       expandIcon: true,
       expandOnRowClick: true,
-      fixedColums: false,
+      fixedColumns: false,
       emptyData: false,
       data,
       // 有哪些 data.id 在 expandedRowKeys 中，就显示这些 id 对应的行
@@ -137,7 +137,7 @@ export default {
   },
   computed: {
     columns() {
-      return getColums(this.fixedColums);
+      return getColumns(this.fixedColumns);
     },
   },
   watch: {
diff --git a/examples/table/demos/multi-header.vue b/examples/table/demos/multi-header.vue
index 2605877073..1c60182749 100644
--- a/examples/table/demos/multi-header.vue
+++ b/examples/table/demos/multi-header.vue
@@ -7,7 +7,7 @@
       <!-- 只要有 maxHeight，就有固定表头，无论该值是否存在 -->
       <t-checkbox v-model="fixedHeader">显示固定表头</t-checkbox>
       <!-- 为保证组件收益最大化，当数据量小于 `100` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 -->
-      <t-checkbox v-model="virtualScroll">虚拟滚动</t-checkbox>
+      <!-- <t-checkbox v-model="virtualScroll">虚拟滚动</t-checkbox> -->
       <t-checkbox v-model="fixedLeftCol">固定左侧列</t-checkbox>
       <t-checkbox v-model="fixedRightCol">固定右侧列</t-checkbox>
       <t-checkbox v-model="headerAffixedTop">表头吸顶</t-checkbox>
@@ -15,6 +15,7 @@
 
     <!-- tableContentWidth 必须大于表格的外层宽度，否则请设置 width: 100% -->
     <!-- 多级表头中，如果要使用固定列功能，则必须设置 colKey 和 fixed -->
+    <!-- :scroll="{ type: 'virtual' }" -->
     <t-table
       row-key="index"
       :data="data"
@@ -26,7 +27,7 @@
       :filterRow="() => null"
       :headerAffixProps="{ offsetTop: 0 }"
       :headerAffixedTop="headerAffixedTop"
-      :scroll="virtualScroll ? { type: 'virtual', threshold: 2, rowHeight: 48, bufferSize: 10 } : undefined"
+      :scroll="{ type: 'virtual' }"
       @data-change="onDataChange"
       @filter-change="onFilterChange"
     ></t-table>
@@ -34,7 +35,7 @@
 </template>
 <script>
 const data = [];
-for (let i = 0; i < 600; i++) {
+for (let i = 0; i < 1000; i++) {
   data.push({
     index: i,
     platform: i % 2 === 0 ? '共有' : '私有',
diff --git a/examples/table/demos/tree-select.vue b/examples/table/demos/tree-select.vue
index 892cd18894..fa428d6dc6 100644
--- a/examples/table/demos/tree-select.vue
+++ b/examples/table/demos/tree-select.vue
@@ -87,6 +87,7 @@ export default {
           // 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删）
           // 这种方式禁用行选中，行文本不会变灰
           checkProps: ({ row }) => ({ disabled: row.status !== 0 }),
+          // 自由调整宽度，如果发现元素看不见，请加大宽度
           width: 20,
         },
         {
diff --git a/examples/table/table.md b/examples/table/table.md
index 5a50d7f8b0..aab9f3f4cd 100644
--- a/examples/table/table.md
+++ b/examples/table/table.md
@@ -16,12 +16,12 @@ fixedRows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻
 footData | Array | [] | 表尾数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
 headerAffixedTop | Boolean | false | 表头吸顶 | N
 headerAffixProps | Object | - | 表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
-height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
+height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
 hover | Boolean | false | 是否显示鼠标悬浮状态 | N
 lastFullRow | String / Slot / Function | - | 尾行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 loading | Boolean / Slot / Function | false | 加载中状态。值为 true 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
-maxHeight | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300px'。值为数字类型，会自动加上单位 px | N
+maxHeight | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px | N
 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
@@ -92,7 +92,8 @@ defaultColumnControllerVisible | Boolean | undefined | 是否显示列配置弹
 columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<PrimaryTableCol<T>>` | N
 displayColumns | Array | - | 列配置功能中，当前显示的列。支持语法糖 `.sync`。TS 类型：`CheckboxGroupValue` | N
 defaultDisplayColumns | Array | - | 列配置功能中，当前显示的列。非受控属性。TS 类型：`CheckboxGroupValue` | N
-dragSort | String | col | 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`col` 表示通过专门的 拖拽列 进行拖拽排序。`drag-col` 已废弃，请勿使用。可选项：row/col/drag-col | N
+dragSort | String | - | 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过专门的 拖拽手柄 进行 行拖拽排序。值为 `col` 表示列顺序拖拽，列拖拽功能开发中。`drag-col` 已废弃，请勿使用。。可选项：row/row-handler/col/drag-col | N
+dragSortOptions | Object | - | 拖拽排序扩展参数，具体参数见 [Sortable](https://github.com/SortableJS/Sortable)。TS 类型：`SortableOptions` | N
 expandedRow | String / Slot / Function | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode<TableExpandedRowParams<T>>` `interface TableExpandedRowParams<T> { row: T; index: number; columns: PrimaryTableCol<T>[] | BaseTableCol<T>[] }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 expandedRowKeys | Array | [] | 展开行。支持语法糖 `.sync`。TS 类型：`Array<string | number>` | N
 defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array<string | number>` | N
@@ -100,8 +101,8 @@ expandIcon | Boolean / Slot / Function | true | 用于控制是否显示「展
 expandOnRowClick | Boolean | - | 是否允许点击行展开 | N
 filterIcon | Slot / Function | - | 自定义过滤图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 filterRow | String / Slot / Function | - | 自定义过滤状态行及清空筛选等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-filterValue | Object | - | 过滤数据的值。支持语法糖 `.sync`。TS 类型：`FilterValue` `type FilterValue = { [key: string]: FilterItemValue }` `type FilterItemValue = string | number | undefined | Array<string | number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
-defaultFilterValue | Object | - | 过滤数据的值。非受控属性。TS 类型：`FilterValue` `type FilterValue = { [key: string]: FilterItemValue }` `type FilterItemValue = string | number | undefined | Array<string | number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+filterValue | Object | - | 过滤数据的值。支持语法糖 `.sync`。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+defaultFilterValue | Object | - | 过滤数据的值。非受控属性。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 multipleSort | Boolean | false | 是否支持多列排序 | N
 selectedRowKeys | Array | - | 选中的行，控制属性。支持语法糖 `.sync`。TS 类型：`Array<string | number>` | N
 defaultSelectedRowKeys | Array | - | 选中的行，控制属性。非受控属性。TS 类型：`Array<string | number>` | N
@@ -109,7 +110,7 @@ sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是
 defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。非受控属性。TS 类型：`TableSort` `type TableSort = SortInfo | Array<SortInfo>` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 sortIcon | Slot / Function | - | 自定义排序图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 sortOnRowDraggable | Boolean | false | 已废弃。允许表格行拖拽时排序。请更为使用 `dragSort="row"` | N
-`Omit<BaseTableProps<T>, 'columns'>` | - | - | 继承 `Omit<BaseTableProps<T>, 'columns'>` 中的全部 API | N
+`Omit<BaseTableProps<T>, 'columns' | 'onCellClick'>` | - | - | 继承 `Omit<BaseTableProps<T>, 'columns' | 'onCellClick'>` 中的全部 API | N
 onAsyncLoadingClick | Function |  | TS 类型：`(context: { status: 'loading' | 'load-more' }) => void`<br/>异步加载区域被点击时触发 | N
 onCellClick | Function |  | TS 类型：`(context: PrimaryTableCellEventContext<T>) => void`<br/>单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface PrimaryTableCellEventContext<T> { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`<br/> | N
 onChange | Function |  | TS 类型：`(data: TableChangeData, context: TableChangeContext<T>) => void`<br/>分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`<br/><br/>`interface TableChangeContext<T> { trigger: TableChangeTrigger; currentData?: T[] }`<br/><br/>`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`<br/> | N
@@ -117,7 +118,7 @@ onColumnChange | Function |  | TS 类型：`(context: PrimaryTableColumnChange<T
 onColumnControllerVisibleChange | Function |  | TS 类型：`(visible: boolean, context: { trigger: 'cancel' | 'confirm' }) => void`<br/>列配置弹窗显示或隐藏变化时触发 | N
 onDataChange | Function |  | TS 类型：`(data: Array<T>, context: TableDataChangeContext) => void`<br/>本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableDataChangeContext { trigger: 'sort' }`<br/> | N
 onDisplayColumnsChange | Function |  | TS 类型：`(value: CheckboxGroupValue) => void`<br/>确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`import { CheckboxGroupValue } from '@Checkbox'`<br/> | N
-onDragSort | Function |  | TS 类型：`(context: DragSortContext<T>) => void`<br/>拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface DragSortContext<T> { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent }`<br/><br/>`import { SortableEvent } from 'sortablejs'`<br/> | N
+onDragSort | Function |  | TS 类型：`(context: DragSortContext<T>) => void`<br/>拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface DragSortContext<T> { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent; sort: 'row' | 'col' }`<br/><br/>`import { SortableEvent, SortableOptions } from 'sortablejs'`<br/> | N
 onExpandChange | Function |  | TS 类型：`(expandedRowKeys: Array<string | number>, options: ExpandOptions<T>) => void`<br/>展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface ExpandOptions<T> { expandedRowData: Array<T> }`<br/> | N
 onFilterChange | Function |  | TS 类型：`(filterValue: FilterValue, context: { col?: PrimaryTableCol<T> }) => void`<br/>过滤参数发生变化时触发，泛型 T 指表格数据类型 | N
 onSelectChange | Function |  | TS 类型：`(selectedRowKeys: Array<string | number>, options: SelectOptions<T>) => void`<br/>选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface SelectOptions<T> { selectedRowData: Array<T>; type: 'uncheck' | 'check'; currentRowKey?: string; currentRowData?: T }`<br/> | N
@@ -134,7 +135,7 @@ column-change | `(context: PrimaryTableColumnChange<T>)` | 确认操作之前列
 column-controller-visible-change | `(visible: boolean, context: { trigger: 'cancel' | 'confirm' })` | 列配置弹窗显示或隐藏变化时触发
 data-change | `(data: Array<T>, context: TableDataChangeContext)` | 本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface TableDataChangeContext { trigger: 'sort' }`<br/>
 display-columns-change | `(value: CheckboxGroupValue)` | 确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`import { CheckboxGroupValue } from '@Checkbox'`<br/>
-drag-sort | `(context: DragSortContext<T>)` | 拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface DragSortContext<T> { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent }`<br/><br/>`import { SortableEvent } from 'sortablejs'`<br/>
+drag-sort | `(context: DragSortContext<T>)` | 拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface DragSortContext<T> { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent; sort: 'row' | 'col' }`<br/><br/>`import { SortableEvent, SortableOptions } from 'sortablejs'`<br/>
 expand-change | `(expandedRowKeys: Array<string | number>, options: ExpandOptions<T>)` | 展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface ExpandOptions<T> { expandedRowData: Array<T> }`<br/>
 filter-change | `(filterValue: FilterValue, context: { col?: PrimaryTableCol<T> })` | 过滤参数发生变化时触发，泛型 T 指表格数据类型
 select-change | `(selectedRowKeys: Array<string | number>, options: SelectOptions<T>)` | 选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface SelectOptions<T> { selectedRowData: Array<T>; type: 'uncheck' | 'check'; currentRowKey?: string; currentRowData?: T }`<br/>
@@ -147,6 +148,7 @@ sort-change | `(sort: TableSort, options: SortOptions<T>)` | 排序发生变化
 addToColumnController | Boolean | true | 【开发中】是否允许用户选择是否显示当前列，表格属性 `showColumnController` 为真时有效 | N
 cell | String / Function | - | 自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型。TS 类型：`string | TNode<PrimaryTableCellParams<T>>` `interface PrimaryTableCellParams<T> { row: T; rowIndex: number; col: PrimaryTableCol<T>; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 checkProps | Object / Function | - | 透传参数，`colKey` 值为 `row-select` 时，配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型。TS 类型：`CheckProps<T>` `type CheckProps<T> = CheckboxProps | RadioProps | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps)` `import { CheckboxProps } from '@Checkbox'`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+children | Array | - | 用于多级表头，泛型 T 指表格数据类型。TS 类型：`Array<PrimaryTableCol<T>>` | N
 colKey | String | - | 渲染列所需字段，必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列 | N
 disabled | Function | - | 是否禁用行选中，`colKey` 值为 `row-select` 时，配置有效。TS 类型：`(options: {row: T; rowIndex: number }) => boolean` | N
 filter | Object | - | 过滤规则，支持多选(multiple)、单选(single)、输入框(input) 等三种形式。想要自定义过滤组件，可通过 `filter.component` 实现，自定义过滤组件需要包含参数 value 和事件 change。TS 类型：`TableColumnFilter` | N
@@ -155,7 +157,7 @@ sorter | Boolean / Function | false | 该列是否支持排序。值为 true 表
 sortType | String | all | 当前列支持排序的方式，desc 表示当前列只能进行降序排列；asc 表示当前列只能进行升序排列；all 表示当前列既可升序排列，又可以降序排列。可选项：desc/asc/all。TS 类型：`SortType` `type SortType = 'desc' | 'asc' | 'all'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render。TS 类型：`string | TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 type | String | single | `colKey` 值为 `row-select` 时表示行选中列，有两种模式：单选和多选。 `type=single` 表示单选，`type=multiple` 表示多选。可选项：single/multiple | N
-`Omit<BaseTableCol, 'cell' | 'title' | 'render'>` | - | - | 继承 `Omit<BaseTableCol, 'cell' | 'title' | 'render'>` 中的全部 API | N
+`Omit<BaseTableCol, 'cell' | 'title' | 'render' | 'children'>` | - | - | 继承 `Omit<BaseTableCol, 'cell' | 'title' | 'render' | 'children'>` 中的全部 API | N
 
 ### EnhancedTable Props
 
@@ -163,6 +165,13 @@ 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
 `PrimaryTableProps<T>` | - | - | 继承 `PrimaryTableProps<T>` 中的全部 API | 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
+
+名称 | 参数 | 描述
+-- | -- | --
+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 组件实例方法
 
diff --git a/src/_common b/src/_common
index b8c3422416..36468ac628 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit b8c3422416bc9f989a21af554500f2f34df70a30
+Subproject commit 36468ac628dfffe6595b0227a4cfafabb5851304
diff --git a/src/swiper/swiper-item.tsx b/src/swiper/swiper-item.tsx
index 79f25e5f91..ed93d26b3a 100644
--- a/src/swiper/swiper-item.tsx
+++ b/src/swiper/swiper-item.tsx
@@ -102,11 +102,14 @@ export default Vue.extend({
   render(): VNode {
     return (
       <div
-        class={[`${prefix}-swiper__container__item`, {
-          [`${prefix}-swiper__card`]: this.type === 'card',
-          [`${prefix}-is-active`]: this.type === 'card' && this.active,
-          [`${prefix}-swiper__fade`]: this.animation === 'fade',
-        }]}
+        class={[
+          `${prefix}-swiper__container__item`,
+          {
+            [`${prefix}-swiper__card`]: this.type === 'card',
+            [`${prefix}-is-active`]: this.type === 'card' && this.active,
+            [`${prefix}-swiper__fade`]: this.animation === 'fade',
+          },
+        ]}
         style={this.itemStyle}
       >
         {this.$scopedSlots.default?.({}) || []}
diff --git a/src/swiper/swiper.tsx b/src/swiper/swiper.tsx
index eac4a6d31b..2d643e83fd 100644
--- a/src/swiper/swiper.tsx
+++ b/src/swiper/swiper.tsx
@@ -103,7 +103,9 @@ export default (Vue as VueConstructor<SwiperVue>).extend({
           getWrapAttribute={this.getWrapAttribute}
           swiperItemLength={this.swiperItemLength}
           props={{ ...this.$props, ...swiperItem.propsData }}
-        >{swiperItem.children}</TSwiperItem>
+        >
+          {swiperItem.children}
+        </TSwiperItem>
       ));
     },
   },
@@ -147,7 +149,8 @@ export default (Vue as VueConstructor<SwiperVue>).extend({
       const swiperItemList = originalChildren
         .map((swiper: VNode) => swiper.componentOptions)
         .filter((swiper) => kebabCase(swiper?.tag).endsWith(`${prefix}-swiper-item`));
-      const isUnchange = swiperItemList.length === this.swiperItemList.length && this.swiperItemList.every((swiperItem, index) => swiperItem === swiperItemList[index]);
+      const isUnchange = swiperItemList.length === this.swiperItemList.length
+        && this.swiperItemList.every((swiperItem, index) => swiperItem === swiperItemList[index]);
       if (isUnchange) return;
       this.swiperItemList = swiperItemList;
     },
@@ -218,15 +221,13 @@ export default (Vue as VueConstructor<SwiperVue>).extend({
     renderPagination() {
       const fractionIndex = this.currentIndex + 1 > this.swiperItemLength ? 1 : this.currentIndex + 1;
       return (
-        <div
-          class={`${prefix}-swiper__arrow`}
-        >
+        <div class={`${prefix}-swiper__arrow`}>
           <div class={`${prefix}-swiper__arrow-left`} onClick={() => this.goPrevious({ source: 'click' })}>
             <ChevronLeftIcon />
           </div>
           <div class={`${prefix}-swiper__navigation-text-fraction`}>
-              {fractionIndex}/{this.swiperItemLength}
-            </div>
+            {fractionIndex}/{this.swiperItemLength}
+          </div>
           <div class={`${prefix}-swiper__arrow-right`} onClick={() => this.goNext({ source: 'click' })}>
             <ChevronRightIcon />
           </div>
@@ -236,9 +237,7 @@ export default (Vue as VueConstructor<SwiperVue>).extend({
     renderArrow() {
       if (!this.showArrow) return null;
       return (
-        <div
-          class={[`${prefix}-swiper__arrow`, `${prefix}-swiper__arrow--default`]}
-        >
+        <div class={[`${prefix}-swiper__arrow`, `${prefix}-swiper__arrow--default`]}>
           <div class={`${prefix}-swiper__arrow-left`} onClick={() => this.goPrevious({ source: 'click' })}>
             <ChevronLeftIcon />
           </div>
@@ -260,16 +259,22 @@ export default (Vue as VueConstructor<SwiperVue>).extend({
 
       return (
         <ul
-          class={[`${prefix}-swiper__navigation`, {
-            [`${prefix}-swiper__navigation-bars`]: this.navigationConfig.type === 'bars',
-          }]}
+          class={[
+            `${prefix}-swiper__navigation`,
+            {
+              [`${prefix}-swiper__navigation-bars`]: this.navigationConfig.type === 'bars',
+            },
+          ]}
         >
           {this.swiperItemList.map((_, i: number) => (
             <li
               key={i}
-              class={[`${prefix}-swiper__navigation-item`, {
-                [`${prefix}-is-active`]: i === this.currentIndex,
-              }]}
+              class={[
+                `${prefix}-swiper__navigation-item`,
+                {
+                  [`${prefix}-is-active`]: i === this.currentIndex,
+                },
+              ]}
               onMouseenter={() => this.onMouseEnterNavigationItem(i)}
               onClick={() => this.onClickNavigationItem(i)}
             >
@@ -292,14 +297,15 @@ export default (Vue as VueConstructor<SwiperVue>).extend({
         onMouseLeave={this.onMouseLeave}
         ref="swiperWrap"
       >
-        <div
-          class={this.swiperWrapClass}
-        >
+        <div class={this.swiperWrapClass}>
           <div
-            class={[`${prefix}-swiper__content`, {
-              [`${prefix}-swiper-fade`]: this.animation === 'fade',
-              [`${prefix}-swiper-card`]: this.type === 'card',
-            }]}
+            class={[
+              `${prefix}-swiper__content`,
+              {
+                [`${prefix}-swiper-fade`]: this.animation === 'fade',
+                [`${prefix}-swiper-card`]: this.type === 'card',
+              },
+            ]}
           >
             <div class={`${prefix}-swiper__container`} style={this.containerStyle}>
               {this.renderSwiperItems()}
diff --git a/src/table/README.md b/src/table/README.md
index 108cd5df79..bf14147551 100644
--- a/src/table/README.md
+++ b/src/table/README.md
@@ -24,5 +24,7 @@
 - hooks/useSorter 排序，PrimaryTable
 - hooks/useStyle 基础样式，BaseTable
 - hooks/useTableHeader 表头，BaseTable
+- hooks/useLazyLoad 懒加载，BaseTable
+- hooks/useDragSort 拖拽排序，PrimaryTable
 - hooks/useTreeData 树形结构，EnhancedTable
 - hooks/useTreeSelect 树形选择，EnhancedTable
diff --git a/src/table/base-table-props.ts b/src/table/base-table-props.ts
index 8cc41539eb..8274565aa6 100644
--- a/src/table/base-table-props.ts
+++ b/src/table/base-table-props.ts
@@ -50,7 +50,7 @@ export default {
   headerAffixProps: {
     type: Object as PropType<TdBaseTableProps['headerAffixProps']>,
   },
-  /** 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
+  /** 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
   height: {
     type: [String, Number] as PropType<TdBaseTableProps['height']>,
   },
@@ -69,7 +69,7 @@ export default {
   loadingProps: {
     type: Object as PropType<TdBaseTableProps['loadingProps']>,
   },
-  /** 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300px'。值为数字类型，会自动加上单位 px */
+  /** 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px */
   maxHeight: {
     type: [String, Number] as PropType<TdBaseTableProps['maxHeight']>,
   },
diff --git a/src/table/enhanced-table-props.ts b/src/table/enhanced-table-props.ts
index a424687e19..4af0176380 100644
--- a/src/table/enhanced-table-props.ts
+++ b/src/table/enhanced-table-props.ts
@@ -12,4 +12,6 @@ export default {
   tree: {
     type: Object as PropType<TdEnhancedTableProps['tree']>,
   },
+  /** 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发 */
+  onTreeExpandChange: Function as PropType<TdEnhancedTableProps['onTreeExpandChange']>,
 };
diff --git a/src/table/filter-controller.tsx b/src/table/filter-controller.tsx
index 3e04fd4768..659bf1e66d 100644
--- a/src/table/filter-controller.tsx
+++ b/src/table/filter-controller.tsx
@@ -85,16 +85,18 @@ export default defineComponent({
         input: Input,
       }[column.filter.type];
       if (!component && !column?.filter?.component) return;
-      const props: { [key: string]: any } = {
+      const filterComponentProps: { [key: string]: any } = {
         options: ['single', 'multiple'].includes(column.filter.type) ? column.filter?.list : undefined,
         ...(column.filter?.props || {}),
         value: this.innerFilterValue?.[column.colKey],
       };
+      // 这个代码必须放在这里，没事儿别改
       if (column.filter.type === 'single') {
-        props.onChange = (val: any) => {
+        filterComponentProps.onChange = (val: any) => {
           this.$emit('inner-filter-change', val, column);
         };
       }
+      // 这个代码必须放在这里，没事儿别改
       const on = {
         change: (val: any) => {
           this.$emit('inner-filter-change', val, column);
@@ -110,12 +112,16 @@ export default defineComponent({
             column?.filter?.component((v: FirstParams, b: SecondParams) => {
               const tProps = typeof b === 'object' && 'attrs' in b ? b.attrs : {};
               return h(v, {
-                props: { ...props, ...tProps },
+                props: { ...filterComponentProps, ...tProps },
                 on,
               });
             })
           ) : (
-            <component value={this.innerFilterValue?.[column.colKey]} props={{ ...props }} on={{ ...on }}></component>
+            <component
+              value={this.innerFilterValue?.[column.colKey]}
+              props={{ ...filterComponentProps }}
+              on={{ ...on }}
+            ></component>
           )}
         </div>
       );
diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts
index dbeb03a70a..38c4cf506d 100644
--- a/src/table/hooks/useClassName.ts
+++ b/src/table/hooks/useClassName.ts
@@ -147,9 +147,12 @@ export default function useClassName() {
     // 拖拽功能类名
     tableDraggableClasses: {
       rowDraggable: `${classPrefix.value}-table--row-draggable`,
+      rowHandlerDraggable: `${classPrefix.value}-table--row-handler-draggable`,
       colDraggable: `${classPrefix.value}-table--col-draggable`,
       handle: `${classPrefix.value}-table__handle-draggable`,
-      ghost: `${classPrefix.value}-table__col--draggable-ghost`,
+      ghost: `${classPrefix.value}-table__ele--draggable-ghost`,
+      chosen: `${classPrefix.value}-table__ele--draggable-chosen`,
+      dragging: `${classPrefix.value}-table__ele--draggable-dragging`,
     },
 
     virtualScrollClasses: {
diff --git a/src/table/hooks/useColumnController.tsx b/src/table/hooks/useColumnController.tsx
index 5ae7b4ad9c..b3aad79d1c 100644
--- a/src/table/hooks/useColumnController.tsx
+++ b/src/table/hooks/useColumnController.tsx
@@ -14,16 +14,15 @@ import Checkbox, {
   CheckboxGroupChangeContext,
 } from '../../checkbox';
 import { DialogPlugin } from '../../dialog/plugin';
-import { useTNodeDefault } from '../../hooks/tnode';
 import { renderTitle } from './useTableHeader';
 import {
   PrimaryTableCol, TdPrimaryTableProps, PrimaryTableColumnChange, TableRowData,
 } from '../type';
 import { useConfig } from '../../config-provider/useConfig';
-
 import useDefaultValue from '../../hooks/useDefaultValue';
 import { getCurrentRowByKey } from '../utils';
 import { DialogInstance } from '../../dialog';
+import TButton from '../../button';
 
 export function getColumnKeys(columns: PrimaryTableCol[], keys: string[] = []) {
   for (let i = 0, len = columns.length; i < len; i++) {
@@ -38,7 +37,6 @@ export function getColumnKeys(columns: PrimaryTableCol[], keys: string[] = []) {
 }
 
 export default function useColumnController(props: TdPrimaryTableProps, context: SetupContext) {
-  const renderTNode = useTNodeDefault();
   const { classPrefix, global } = useConfig('table');
   const {
     columns, columnController, displayColumns, columnControllerVisible,
@@ -67,7 +65,7 @@ export default function useColumnController(props: TdPrimaryTableProps, context:
   const intersectionChecked = computed(() => intersection(columnCheckboxKeys.value, [...enabledColKeys.value]));
 
   watch([displayColumns], ([val]) => {
-    columnCheckboxKeys.value = val;
+    columnCheckboxKeys.value = val || props.defaultDisplayColumns || keys;
   });
 
   function getCheckboxOptions(columns: PrimaryTableCol[], arr: CheckboxOptionObj[] = []) {
@@ -151,7 +149,7 @@ export default function useColumnController(props: TdPrimaryTableProps, context:
             </div>
           </div>
         );
-        return renderTNode('columnControllerContent', defaultNode);
+        return defaultNode;
       },
       confirmBtn: global.value.confirmText,
       cancelBtn: global.value.cancelText,
@@ -204,7 +202,7 @@ export default function useColumnController(props: TdPrimaryTableProps, context:
     ];
     return (
       <div class={classes}>
-        <t-button
+        <TButton
           theme="default"
           variant="outline"
           onClick={handleToggleColumnController}
@@ -213,7 +211,7 @@ export default function useColumnController(props: TdPrimaryTableProps, context:
             icon: () => <SettingIcon />,
           }}
           props={props.columnController?.buttonProps}
-        ></t-button>
+        ></TButton>
       </div>
     );
   };
diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts
index 51b6a11a21..9d04472a72 100644
--- a/src/table/hooks/useDragSort.ts
+++ b/src/table/hooks/useDragSort.ts
@@ -1,77 +1,98 @@
 // 表格 行拖拽 + 列拖拽功能
-
 import {
   SetupContext, computed, toRefs, ref, watch,
 } from '@vue/composition-api';
-import { SortableEvent } from 'sortablejs';
+import Sortable, { SortableEvent, SortableOptions } from 'sortablejs';
 import get from 'lodash/get';
-import { TdPrimaryTableProps } from '../type';
-import { TargetDom } from '../interface';
-import { setSortableConfig } from '../utils';
+import { TableRowData, TdPrimaryTableProps, DragSortContext } from '../type';
 import useClassName from './useClassName';
 import log from '../../_common/js/log';
+import swapDragArrayElement from '../../_common/js/utils/swapDragArrayElement';
 
+/**
+ * TODO:
+ * 1. 同时支持行拖拽和列拖拽，此时 dragSort 扩展为支持数组即可
+ * 2. 支持多级表头场景下的列拖拽排序，此时需要将叶子结点 tColumns 作为参数传入。tColumns 已在 useMultiHeader 中计算出来
+ * 3. 优化列拖拽排序样式（优先级不高，可以慢慢来）
+ * @param props
+ * @param context
+ * @returns
+ */
 export default function useDragSort(props: TdPrimaryTableProps, context: SetupContext) {
   const {
     sortOnRowDraggable, dragSort, columns, data,
   } = toRefs(props);
+  const { tableDraggableClasses, tableBaseClass } = useClassName();
   const primaryTableRef = ref(null);
   // 判断是否有拖拽列
   const dragCol = computed(() => columns.value.find((item) => item.colKey === 'drag'));
   // 行拖拽判断条件
   const isRowDraggable = computed(() => sortOnRowDraggable.value || dragSort.value === 'row');
-  // 列拖拽判断条件
-  const isColDraggable = computed(() => ['drag-col', 'col'].includes(dragSort.value) && !!dragCol.value);
+  // 行手柄列拖拽判断条件
+  const isRowHandlerDraggable = computed(() => ['drag-col', 'row-handler'].includes(dragSort.value) && !!dragCol.value);
+  // 列拖拽排序，待开发
+  const isColDraggable = computed(() => dragSort.value === 'col');
+  // 行拖拽排序，存储上一次的变化结果
+  const lastRowList = ref([]);
+  // 列拖拽排序，存储上一次的变化结果
+  const lastColList = ref([]);
+
+  if (dragSort.value === 'col') {
+    log.error('Table', "dragSort='col' is going to be used as column drag, please use dragSort='row-handler' instead.");
+  }
 
   if (dragSort.value === 'drag-col') {
-    log.warn('Table', "dragSort='drag-col' is going to be deprecated, use dragSort='col' instead.");
+    log.error('Table', "dragSort='drag-col' is going to be deprecated, please use dragSort='col' instead.");
   }
 
   if (props.sortOnRowDraggable) {
-    log.warn('Table', "`sortOnRowDraggable` is going to be deprecated, use dragSort='row' instead.");
+    log.error('Table', "`sortOnRowDraggable` is going to be deprecated, please use dragSort='row' instead.");
   }
 
-  const { tableDraggableClasses } = useClassName();
-  // 拖拽实例
-  const dragInstance = ref(null);
-  // 初始顺序
-  const startList = ref([]);
-  watch(data, (newData) => {
-    // 更新排列顺序
-    startList.value = newData.map((item) => get(item, props.rowKey));
-  });
-  // 注册拖拽事件
-  const registerDragEvent = (element: TargetDom) => {
-    if (!isColDraggable.value && !isRowDraggable.value) {
-      return;
-    }
-    const dragContainer = element?.querySelector('tbody');
+  watch(
+    data,
+    (data) => {
+      lastRowList.value = data?.map((item) => get(item, props.rowKey));
+    },
+    { immediate: true },
+  );
+
+  watch(
+    columns,
+    (columns) => {
+      lastColList.value = columns || [];
+    },
+    { immediate: true },
+  );
 
-    const { handle, ghost } = tableDraggableClasses;
-    const baseOptions = {
+  // 行拖拽排序
+  const registerRowDragEvent = (element: HTMLDivElement): void => {
+    if (!isRowHandlerDraggable.value && !isRowDraggable.value) return;
+    const dragContainer = element?.querySelector('tbody');
+    if (!dragContainer) {
+      console.error('tbody does not exist.');
+      return null;
+    }
+    // 拖拽实例
+    let dragInstanceTmp: Sortable = null;
+    const baseOptions: SortableOptions = {
       animation: 150,
-      // 放置占位符的类名
-      ghostClass: ghost,
+      ...props.dragSortOptions,
+      ghostClass: tableDraggableClasses.ghost,
+      chosenClass: tableDraggableClasses.chosen,
+      dragClass: tableDraggableClasses.dragging,
       onEnd(evt: SortableEvent) {
-        // 拖拽列表恢复原始排序
-        dragInstance.value?.sort(startList.value);
-        const { oldIndex, newIndex } = evt;
-        const newData = [...props.data];
-        if (newIndex - oldIndex > 0) {
-          newData.splice(newIndex + 1, 0, newData[oldIndex]);
-          newData.splice(oldIndex, 1);
-        } else {
-          newData.splice(newIndex, 0, newData[oldIndex]);
-          newData.splice(oldIndex + 1, 1);
-        }
-
-        const params = {
-          currentIndex: evt.oldIndex,
-          current: props.data[evt.oldIndex],
-          targetIndex: evt.newIndex,
-          target: props.data[evt.newIndex],
-          currentData: newData,
+        // 处理受控：拖拽列表恢复原始排序
+        dragInstanceTmp?.sort(lastRowList.value);
+        const { oldIndex: currentIndex, newIndex: targetIndex } = evt;
+        const params: DragSortContext<TableRowData> = {
+          currentIndex,
+          current: data[currentIndex],
+          targetIndex,
+          target: data[targetIndex],
+          currentData: swapDragArrayElement(props.data, currentIndex, targetIndex),
           e: evt,
+          sort: 'row',
         };
         props.onDragSort?.(params);
         // Vue3 ignore next line
@@ -79,16 +100,52 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo
       },
     };
 
-    const colOptions = {
-      handle: `.${handle}`,
-      ...baseOptions,
-    };
     if (isRowDraggable.value) {
-      dragInstance.value = setSortableConfig(dragContainer, { ...baseOptions });
+      dragInstanceTmp = new Sortable(dragContainer, { ...baseOptions });
     } else {
-      dragInstance.value = setSortableConfig(dragContainer, colOptions);
+      dragInstanceTmp = new Sortable(dragContainer, {
+        ...baseOptions,
+        handle: `.${tableDraggableClasses.handle}`,
+      });
     }
-    startList.value = dragInstance.value.toArray();
+    lastRowList.value = dragInstanceTmp.toArray();
+  };
+
+  // 列拖拽排序
+  const registerColDragEvent = (tableElement: HTMLElement) => {
+    if (!isColDraggable.value || !tableElement) return;
+    // 拖拽实例
+    let dragInstanceTmp: Sortable = null;
+    const options: SortableOptions = {
+      animation: 150,
+      ...props.dragSortOptions,
+      dataIdAttr: 'data-colkey',
+      direction: 'vertical',
+      ghostClass: tableDraggableClasses.ghost,
+      chosenClass: tableDraggableClasses.chosen,
+      dragClass: tableDraggableClasses.dragging,
+      handle: `.${tableBaseClass.thCellInner}`,
+      onEnd: (evt: SortableEvent) => {
+        // 处理受控：拖拽列表恢复原始排序，等待外部数据 data 变化，更新最终顺序
+        dragInstanceTmp?.sort([...lastColList.value]);
+        const { oldIndex: currentIndex, newIndex: targetIndex } = evt;
+        const params: DragSortContext<TableRowData> = {
+          currentIndex,
+          current: columns.value[currentIndex],
+          targetIndex,
+          target: columns.value[targetIndex],
+          currentData: swapDragArrayElement(columns.value, currentIndex, targetIndex),
+          e: evt,
+          sort: 'col',
+        };
+        props.onDragSort?.(params);
+        // Vue3 ignore next line
+        context.emit('drag-sort', params);
+      },
+    };
+    const container = tableElement.querySelector('thead > tr') as HTMLDivElement;
+    dragInstanceTmp = new Sortable(container, options);
+    lastColList.value = dragInstanceTmp?.toArray();
   };
 
   function setDragSortPrimaryTableRef(primaryTableElement: any) {
@@ -97,13 +154,14 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo
 
   // 注册拖拽事件
   watch([primaryTableRef], ([val]: [any]) => {
-    registerDragEvent(val?.$el);
+    val?.$el && registerRowDragEvent(val?.$el);
+    val?.$el && registerColDragEvent(val?.$el);
   });
 
   return {
     isRowDraggable,
+    isRowHandlerDraggable,
     isColDraggable,
-    registerDragEvent,
     setDragSortPrimaryTableRef,
   };
 }
diff --git a/src/table/hooks/useFilter.tsx b/src/table/hooks/useFilter.tsx
index 519f8255ed..3d61070569 100644
--- a/src/table/hooks/useFilter.tsx
+++ b/src/table/hooks/useFilter.tsx
@@ -147,7 +147,9 @@ export default function useFilter(props: TdPrimaryTableProps, context: SetupCont
   function renderFilterIcon(h: CreateElement, { col }: { col: PrimaryTableCol<TableRowData>; colIndex: number }) {
     return (
       <TableFilterController
+        scopedSlots={{ filterIcon: context.slots.filterIcon }}
         column={col}
+        filterIcon={props.filterIcon}
         tFilterValue={tFilterValue.value}
         innerFilterValue={innerFilterValue.value}
         tableFilterClasses={tableFilterClasses}
diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts
index 7977f287e7..c1f6c032ac 100644
--- a/src/table/hooks/useFixed.ts
+++ b/src/table/hooks/useFixed.ts
@@ -137,6 +137,7 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext)
   const thWidthList = ref<{ [colKey: string]: number }>({});
 
   const isFixedColumn = ref(false);
+  const isFixedRightColumn = ref(false);
 
   // 没有表头吸顶，没有虚拟滚动，则不需要表头宽度计算
   const notNeedThWidthList = computed(() => !(props.headerAffixedTop || props.scroll?.type === 'virtual'));
@@ -153,6 +154,9 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext)
       if (['left', 'right'].includes(col.fixed)) {
         isFixedColumn.value = true;
       }
+      if (col.fixed === 'right') {
+        isFixedRightColumn.value = true;
+      }
       const key = col.colKey || i;
       const columnInfo: FixedColumnInfo = { col, parent, index: i };
       map.set(key, columnInfo);
@@ -348,8 +352,8 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext)
           colMapInfo.lastLeftFixedCol = true;
         }
         const lastColMapInfo = nodes[i - 1];
-        const isParentFirstRigthFixedCol = !parent || parent?.firstRightFixedCol;
-        if (isParentFirstRigthFixedCol && colMapInfo.col.fixed === 'right' && lastColMapInfo?.col.fixed !== 'right') {
+        const isParentFirstRightFixedCol = !parent || parent?.firstRightFixedCol;
+        if (isParentFirstRightFixedCol && colMapInfo.col.fixed === 'right' && lastColMapInfo?.col.fixed !== 'right') {
           colMapInfo.firstRightFixedCol = true;
         }
       }
@@ -396,7 +400,10 @@ export default function useFixed(props: TdBaseTableProps, context: SetupContext)
 
   const updateTableWidth = () => {
     const rect = tableContentRef.value.getBoundingClientRect();
-    tableWidth.value = rect.width - scrollbarWidth.value - (props.bordered ? 1 : 0);
+    // 存在纵向滚动条，且固定表头时，需去除滚动条宽度
+    const reduceWidth = isFixedHeader.value ? scrollbarWidth.value : 0;
+    const fixedBordered = isFixedRightColumn.value ? 1 : 2;
+    tableWidth.value = rect.width - reduceWidth - (props.bordered ? fixedBordered : 0);
   };
 
   const updateThWidthList = (trList: HTMLCollection) => {
diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx
index d8d84c4ebc..410ca7d46c 100644
--- a/src/table/hooks/useRowExpand.tsx
+++ b/src/table/hooks/useRowExpand.tsx
@@ -85,10 +85,11 @@ export default function useRowExpand(props: TdPrimaryTableProps, context: SetupC
     h: CreateElement,
     p: TableExpandedRowParams<TableRowData> & { tableWidth: number; isWidthOverflow: boolean },
   ) => {
-    if (!tExpandedRowKeys.value.includes(get(p.row, props.rowKey || 'id'))) return null;
+    const rowId = get(p.row, props.rowKey || 'id');
+    if (!tExpandedRowKeys.value.includes(rowId)) return null;
     const isFixedLeft = p.isWidthOverflow && props.columns.find((item) => item.fixed === 'left');
     return (
-      <tr class={[tableExpandClasses.row, { [tableFullRowClasses.base]: isFixedLeft }]}>
+      <tr key={`expand_${rowId}`} class={[tableExpandClasses.row, { [tableFullRowClasses.base]: isFixedLeft }]}>
         <td colspan={p.columns.length}>
           <div
             class={[tableExpandClasses.rowInner, { [tableFullRowClasses.innerFullRow]: isFixedLeft }]}
diff --git a/src/table/hooks/useRowSelect.tsx b/src/table/hooks/useRowSelect.tsx
index e024082748..6a063549f9 100644
--- a/src/table/hooks/useRowSelect.tsx
+++ b/src/table/hooks/useRowSelect.tsx
@@ -23,7 +23,9 @@ import { ClassName } from '../../common';
 import log from '../../_common/js/log';
 
 export default function useRowSelect(props: TdPrimaryTableProps) {
-  const { selectedRowKeys, columns, data } = toRefs(props);
+  const {
+    selectedRowKeys, columns, data, rowKey,
+  } = toRefs(props);
   const { tableSelectedClasses } = useClassName();
   const selectedRowClassNames = ref();
   const [tSelectedRowKeys, setTSelectedRowKeys] = useDefaultValue(
@@ -42,7 +44,7 @@ export default function useRowSelect(props: TdPrimaryTableProps) {
   ));
 
   watch(
-    [data, columns, tSelectedRowKeys],
+    [data, columns, tSelectedRowKeys, selectColumn, rowKey],
     () => {
       const disabledRowFunc = (p: RowClassNameParams<TableRowData>): ClassName => selectColumn.value.disabled(p) ? tableSelectedClasses.disabled : '';
       const disabledRowClass = selectColumn.value?.disabled ? disabledRowFunc : undefined;
@@ -88,7 +90,7 @@ export default function useRowSelect(props: TdPrimaryTableProps) {
       },
       on: {
         click: (e: MouseEvent) => {
-          // 选中行功能中，点击 checkbo/radio 需阻止事件冒泡，避免触发不必要的 onRowClick
+          // 选中行功能中，点击 checkbox/radio 需阻止事件冒泡，避免触发不必要的 onRowClick
           e?.stopPropagation();
         },
         // radio 单选框可再点击一次关闭选择，input / change 事件无法监听
@@ -111,7 +113,7 @@ export default function useRowSelect(props: TdPrimaryTableProps) {
     } else if (selectColumn.value.type === 'single') {
       selectedRowKeys = !isExisted ? [id] : [];
     } else {
-      log.warn('Table', '`column.type` must be one of `multilpe` and `single`');
+      log.warn('Table', '`column.type` must be one of `multiple` and `single`');
       return;
     }
     setTSelectedRowKeys(selectedRowKeys, {
diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx
index f1c2bdb678..4035525a19 100644
--- a/src/table/hooks/useTreeData.tsx
+++ b/src/table/hooks/useTreeData.tsx
@@ -25,20 +25,28 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
 
   watch(
     [data],
-    ([val]) => {
-      if (!val) return [];
+    ([data]) => {
+      if (!data) return [];
       // 如果没有树形解构，则不需要相关逻辑
       if (!props.tree || !Object.keys(props.tree).length) {
-        dataSource.value = val;
+        // @ts-ignore
+        dataSource.value = data;
         return;
       }
-      const newVal = cloneDeep(val);
+      const newVal = cloneDeep(data);
+      // @ts-ignore
       dataSource.value = newVal;
+      // @ts-ignore
       store.value.initialTreeStore(newVal, props.columns, rowDataKeys.value);
     },
     { immediate: true },
   );
 
+  // 不能启用这部分代码。如果启用，会导致选中树形结构子节点时数据被重置，全部节点收起
+  // watch([columns, rowDataKeys], ([columns, rowDataKeys]) => {
+  //   store.value.initialTreeStore(data.value, columns, rowDataKeys);
+  // });
+
   onUnmounted(() => {
     if (!props.tree || !Object.keys(props.tree).length) return;
     store.value.treeDataMap?.clear();
@@ -64,8 +72,23 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
    * 组件实例方法，展开或收起某一行
    * @param p 行数据
    */
-  function toggleExpandData(p: { row: TableRowData; rowIndex: number }) {
+  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') {
+      const rowValue = get(p.row, rowDataKeys.value.rowKey);
+      const params = {
+        row: p.row,
+        rowIndex: p.rowIndex,
+        rowState: store.value?.treeDataMap?.get(rowValue),
+      };
+      props.onTreeExpandChange?.(params);
+      // Vue3 ignore next line
+      context.emit('tree-expand-change', params);
+    }
   }
 
   function getTreeNodeColumnCol() {
@@ -99,7 +122,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
             {!!childrenNodes.length && (
               <IconNode
                 class={tableTreeClasses.icon}
-                onClick={() => toggleExpandData({ row: p.row, rowIndex: p.rowIndex })}
+                onClick={() => toggleExpandData({ row: p.row, rowIndex: p.rowIndex, trigger: 'inner' })}
               />
             )}
             {cellInfo}
diff --git a/src/table/hooks/useTreeSelect.tsx b/src/table/hooks/useTreeSelect.tsx
index 6e23302c1d..2fe3a47c73 100644
--- a/src/table/hooks/useTreeSelect.tsx
+++ b/src/table/hooks/useTreeSelect.tsx
@@ -6,7 +6,7 @@ import {
 import TableTreeStore, { KeysType, TableTreeDataMap } from './tree-store';
 import useDefaultValue from '../../hooks/useDefaultValue';
 
-export const childreMap = new Map();
+export const childrenMap = new Map();
 
 export interface GetChildrenDataReturnValue {
   allChildren: Array<any>;
@@ -20,7 +20,7 @@ export function getChildrenData(
   rowKey: string,
   r?: GetChildrenDataReturnValue,
 ): GetChildrenDataReturnValue {
-  if (childreMap.get(data)) return childreMap.get(data);
+  if (childrenMap.get(data)) return childrenMap.get(data);
   const result = r || { allChildren: [], allChildrenKeys: [] };
   const children = get(data, childrenKey);
   if (!children || !children.length) return result;
@@ -142,7 +142,7 @@ export default function useTreeSelect(props: TdEnhancedTableProps, treeDataMap:
           rowDataKeys.value.rowKey,
         );
         const { allChildrenKeys } = result;
-        childreMap.set(extraData.currentRowData, result);
+        childrenMap.set(extraData.currentRowData, result);
         newRowKeys = [...new Set(newRowKeys.concat(allChildrenKeys))];
       } else if (extraData?.type === 'uncheck') {
         const children = getChildrenData(
diff --git a/src/table/interface.ts b/src/table/interface.ts
index 22b2c89acf..f0e29b0aa2 100644
--- a/src/table/interface.ts
+++ b/src/table/interface.ts
@@ -17,4 +17,3 @@ export interface BaseTableProps extends TdBaseTableProps {
 export type PrimaryTableProps = TdPrimaryTableProps;
 export type EnhancedTableProps = TdEnhancedTableProps;
 export type TableProps = PrimaryTableProps;
-export type TargetDom = HTMLElement | Element | null;
diff --git a/src/table/primary-table-props.ts b/src/table/primary-table-props.ts
index fd9720c75f..9f566a5cbd 100644
--- a/src/table/primary-table-props.ts
+++ b/src/table/primary-table-props.ts
@@ -40,15 +40,18 @@ export default {
   defaultDisplayColumns: {
     type: Array as PropType<TdPrimaryTableProps['defaultDisplayColumns']>,
   },
-  /** 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`col` 表示通过专门的 拖拽列 进行拖拽排序。`drag-col` 已废弃，请勿使用 */
+  /** 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过专门的 拖拽手柄 进行 行拖拽排序。值为 `col` 表示列顺序拖拽，列拖拽功能开发中。`drag-col` 已废弃，请勿使用。 */
   dragSort: {
     type: String as PropType<TdPrimaryTableProps['dragSort']>,
-    default: 'col' as TdPrimaryTableProps['dragSort'],
     validator(val: TdPrimaryTableProps['dragSort']): boolean {
       if (!val) return true;
-      return ['row', 'col', 'drag-col'].includes(val);
+      return ['row', 'row-handler', 'col', 'drag-col'].includes(val);
     },
   },
+  /** 拖拽排序扩展参数，具体参数见 [Sortable](https://github.com/SortableJS/Sortable) */
+  dragSortOptions: {
+    type: Object as PropType<TdPrimaryTableProps['dragSortOptions']>,
+  },
   /** 展开行内容，泛型 T 指表格数据类型 */
   expandedRow: {
     type: [String, Function] as PropType<TdPrimaryTableProps['expandedRow']>,
@@ -127,7 +130,7 @@ export default {
   onDataChange: Function as PropType<TdPrimaryTableProps['onDataChange']>,
   /** 确认列配置时触发 */
   onDisplayColumnsChange: Function as PropType<TdPrimaryTableProps['onDisplayColumnsChange']>,
-  /** 拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据 */
+  /** 拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发 */
   onDragSort: Function as PropType<TdPrimaryTableProps['onDragSort']>,
   /** 展开行发生变化时触发，泛型 T 指表格数据类型 */
   onExpandChange: Function as PropType<TdPrimaryTableProps['onExpandChange']>,
diff --git a/src/table/primary-table.tsx b/src/table/primary-table.tsx
index 35bff45a56..b59b2a55f8 100644
--- a/src/table/primary-table.tsx
+++ b/src/table/primary-table.tsx
@@ -53,13 +53,19 @@ export default defineComponent({
     } = useFilter(props, context);
 
     // 拖拽排序功能
-    const { isColDraggable, isRowDraggable, setDragSortPrimaryTableRef } = useDragSort(props, context);
+    const {
+      isRowHandlerDraggable, isRowDraggable, isColDraggable, setDragSortPrimaryTableRef,
+    } = useDragSort(
+      props,
+      context,
+    );
 
     const { renderTitleWidthIcon } = useTableHeader(props);
     const { renderAsyncLoading } = useAsyncLoading(props, context);
 
     const primaryTableClasses = computed(() => ({
       [tableDraggableClasses.colDraggable]: isColDraggable.value,
+      [tableDraggableClasses.rowHandlerDraggable]: isRowHandlerDraggable.value,
       [tableDraggableClasses.rowDraggable]: isRowDraggable.value,
       [tableBaseClass.overflowVisible]: isTableOverflowHidden.value === false,
     }));
@@ -73,7 +79,7 @@ export default defineComponent({
     // 如果想给 TR 添加属性，请在这里补充，不要透传更多额外 Props 到 BaseTable
     const tRowAttributes = computed(() => {
       const tAttributes = [props.rowAttributes];
-      if (isColDraggable.value || isRowDraggable.value) {
+      if (isRowHandlerDraggable.value || isRowDraggable.value) {
         tAttributes.push(({ row }) => ({ 'data-id': get(row, props.rowKey || 'id') }));
       }
       return tAttributes.filter((v) => v);
diff --git a/src/table/tbody.tsx b/src/table/tbody.tsx
index 4579fe935b..b8b42dcbca 100644
--- a/src/table/tbody.tsx
+++ b/src/table/tbody.tsx
@@ -191,6 +191,17 @@ export default defineComponent({
     // 每次渲染清空合并单元格信息
     skipSpansMap = new Map<any, boolean>();
 
+    const properties = [
+      'rowAndColFixedPosition',
+      'scroll',
+      'tableElm',
+      'tableContentElm',
+      'trs',
+      'bufferSize',
+      'isVirtual',
+      'rowHeight',
+      'scrollType',
+    ];
     this.data?.forEach((row, rowIndex) => {
       const trProps: TrProps = {
         ...pick(this.$props, TABLE_PROPS),
@@ -198,17 +209,10 @@ export default defineComponent({
         columns: this.columns,
         rowIndex,
         dataLength,
-        rowAndColFixedPosition: this.rowAndColFixedPosition,
         skipSpansMap,
+        ...pick(this.$props, properties),
         // 遍历的同时，计算后面的节点，是否会因为合并单元格跳过渲染
         onTrRowspanOrColspan,
-        isVirtual: this.isVirtual,
-        scrollType: this.scrollType,
-        rowHeight: this.rowHeight,
-        trs: this.trs,
-        bufferSize: this.bufferSize,
-        tableElm: this.tableElm,
-        tableContentElm: this.tableContentElm,
       };
       if (this.onCellClick) {
         trProps.onCellClick = this.onCellClick;
diff --git a/src/table/tr.tsx b/src/table/tr.tsx
index f35c1215a2..484ddc1eba 100644
--- a/src/table/tr.tsx
+++ b/src/table/tr.tsx
@@ -64,17 +64,17 @@ export interface TrProps extends TrCommonProps {
   row: TableRowData;
   rowIndex: number;
   dataLength: number;
-  rowAndColFixedPosition: RowAndColFixedPosition;
+  rowAndColFixedPosition?: RowAndColFixedPosition;
   // 属性透传，引用传值，可内部改变
-  skipSpansMap: Map<any, boolean>;
-  tableElm: HTMLDivElement;
+  skipSpansMap?: Map<any, boolean>;
+  tableElm?: HTMLDivElement;
+  scrollType?: string;
+  isVirtual?: boolean;
+  rowHeight?: number;
+  trs?: Map<number, object>;
+  bufferSize?: number;
+  tableContentElm?: HTMLDivElement;
   onTrRowspanOrColspan?: (params: PrimaryTableCellParams<TableRowData>, cellSpans: RowspanColspan) => void;
-  scrollType: string;
-  isVirtual: boolean;
-  rowHeight: number;
-  trs: Map<number, object>;
-  bufferSize: number;
-  tableContentElm: HTMLDivElement;
 }
 
 export const ROW_LISTENERS = ['click', 'dblclick', 'mouseover', 'mousedown', 'mouseenter', 'mouseleave', 'mouseup'];
diff --git a/src/table/type.ts b/src/table/type.ts
index 15ab142363..4fb0fd3a03 100644
--- a/src/table/type.ts
+++ b/src/table/type.ts
@@ -9,7 +9,7 @@ import { LoadingProps } from '../loading';
 import { PaginationProps, PageInfo } from '../pagination';
 import { PopupProps } from '../popup';
 import { CheckboxGroupValue } from '../checkbox';
-import { SortableEvent } from 'sortablejs';
+import { SortableEvent, SortableOptions } from 'sortablejs';
 import { CheckboxProps } from '../checkbox';
 import { RadioProps } from '../radio';
 import { InputProps } from '../input';
@@ -71,7 +71,7 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
    */
   headerAffixProps?: AffixProps;
   /**
-   * 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300px'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`
+   * 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`
    */
   height?: string | number;
   /**
@@ -93,7 +93,7 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
    */
   loadingProps?: LoadingProps;
   /**
-   * 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300px'。值为数字类型，会自动加上单位 px
+   * 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px
    */
   maxHeight?: string | number;
   /**
@@ -258,7 +258,7 @@ export interface BaseTableCol<T extends TableRowData = TableRowData> {
 }
 
 export interface TdPrimaryTableProps<T extends TableRowData = TableRowData>
-  extends Omit<TdBaseTableProps<T>, 'columns'> {
+  extends Omit<TdBaseTableProps<T>, 'columns' | 'onCellClick'> {
   /**
    * 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容
    */
@@ -289,10 +289,13 @@ export interface TdPrimaryTableProps<T extends TableRowData = TableRowData>
    */
   defaultDisplayColumns?: CheckboxGroupValue;
   /**
-   * 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`col` 表示通过专门的 拖拽列 进行拖拽排序。`drag-col` 已废弃，请勿使用
-   * @default col
+   * 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过专门的 拖拽手柄 进行 行拖拽排序。值为 `col` 表示列顺序拖拽，列拖拽功能开发中。`drag-col` 已废弃，请勿使用。
    */
-  dragSort?: 'row' | 'col' | 'drag-col';
+  dragSort?: 'row' | 'row-handler' | 'col' | 'drag-col';
+  /**
+   * 拖拽排序扩展参数，具体参数见 [Sortable](https://github.com/SortableJS/Sortable)
+   */
+  dragSortOptions?: SortableOptions;
   /**
    * 展开行内容，泛型 T 指表格数据类型
    */
@@ -392,7 +395,7 @@ export interface TdPrimaryTableProps<T extends TableRowData = TableRowData>
    */
   onDisplayColumnsChange?: (value: CheckboxGroupValue) => void;
   /**
-   * 拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据
+   * 拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发
    */
   onDragSort?: (context: DragSortContext<T>) => void;
   /**
@@ -414,7 +417,7 @@ export interface TdPrimaryTableProps<T extends TableRowData = TableRowData>
 }
 
 export interface PrimaryTableCol<T extends TableRowData = TableRowData>
-  extends Omit<BaseTableCol, 'cell' | 'title' | 'render'> {
+  extends Omit<BaseTableCol, 'cell' | 'title' | 'render' | 'children'> {
   /**
    * 【开发中】是否允许用户选择是否显示当前列，表格属性 `showColumnController` 为真时有效
    * @default true
@@ -428,6 +431,10 @@ export interface PrimaryTableCol<T extends TableRowData = TableRowData>
    * 透传参数，`colKey` 值为 `row-select` 时，配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型
    */
   checkProps?: CheckProps<T>;
+  /**
+   * 用于多级表头，泛型 T 指表格数据类型
+   */
+  children?: Array<PrimaryTableCol<T>>;
   /**
    * 渲染列所需字段，必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列
    * @default ''
@@ -471,6 +478,10 @@ export interface TdEnhancedTableProps<T extends TableRowData = TableRowData> ext
    * 树形结构相关配置。`tree.indent` 表示树结点缩进距离，单位：px，默认为 24px。`tree.treeNodeColumnIndex` 表示树结点在第几列渲染，默认为 0 ，第一列。`tree.childrenKey` 表示树形结构子节点字段，默认为 children。`tree.checkStrictly` 表示树形结构的行选中（多选），父子行选中是否独立，默认独立，值为 true
    */
   tree?: TableTreeConfig;
+  /**
+   * 树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发
+   */
+  onTreeExpandChange?: (context: TableTreeExpandChangeContext<T>) => void;
 }
 
 /** 组件实例方法 */
@@ -686,9 +697,7 @@ export interface ExpandArrowRenderParams<T> {
   index: number;
 }
 
-export type FilterValue = { [key: string]: FilterItemValue };
-
-export type FilterItemValue = string | number | undefined | Array<string | number>;
+export type FilterValue = { [key: string]: any };
 
 export type TableSort = SortInfo | Array<SortInfo>;
 
@@ -736,6 +745,7 @@ export interface DragSortContext<T> {
   target: T;
   currentData: T[];
   e: SortableEvent;
+  sort: 'row' | 'col';
 }
 
 export interface ExpandOptions<T> {
@@ -781,6 +791,12 @@ export interface TableTreeConfig {
   checkStrictly?: boolean;
 }
 
+export interface TableTreeExpandChangeContext<T> {
+  row: T;
+  rowIndex: number;
+  rowState: TableRowState<T>;
+}
+
 export type TableRowValue = string | number;
 
 export type FilterProps = RadioProps | CheckboxProps | InputProps | { [key: string]: any };
diff --git a/src/table/utils.ts b/src/table/utils.ts
index 206b394534..8cc13806cc 100644
--- a/src/table/utils.ts
+++ b/src/table/utils.ts
@@ -1,12 +1,10 @@
 import isFunction from 'lodash/isFunction';
 import get from 'lodash/get';
 import isObject from 'lodash/isObject';
-import Sortable, { SortableOptions } from 'sortablejs';
 import {
   PrimaryTableCol, RowClassNameParams, TableRowData, TdBaseTableProps,
 } from './type';
 import { ClassName, HTMLElementAttributes } from '../common';
-import { TargetDom } from './interface';
 
 export function toString(obj: any): string {
   return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
@@ -139,14 +137,6 @@ export function isRowSelectedDisabled(
   return !!disabled;
 }
 
-// 拖拽排序api
-export function setSortableConfig(target: TargetDom, options: SortableOptions) {
-  if (!target) {
-    return;
-  }
-  return new Sortable(target as any, { ...options });
-}
-
 // 多级表头，列配置场景，获取 currentRow
 export function getCurrentRowByKey<T extends { colKey?: string; children?: any[] }>(columns: T[], key: string): T {
   if (!columns || !key) return;
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 10dc05e629..6a142aee81 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -12489,17 +12489,13 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-col-sort.vue corr
       <div class="t-table__content">
         <table class="t-table--layout-fixed" style="width:;">
           <colgroup>
-            <col style="width:80px;">
-            <col>
-            <col>
-            <col>
-            <col>
+            <col style="width:150px;">
+            <col style="width:100px;">
+            <col style="width:200px;">
+            <col style="width:100px;">
           </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="instance" class="t-table__th-instance">
                 <div class="t-table__th-cell-inner">集群名称</div>
               </th>
@@ -12515,10 +12511,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-col-sort.vue corr
             </tr>
           </thead>
           <tbody class="t-table__body">
-            <tr data-id="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>
+            <tr>
               <td>JQTest1</td>
               <td>
                 <p class="status">
@@ -12528,10 +12521,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-col-sort.vue corr
               <td>1000</td>
               <td>jenny;peter</td>
             </tr>
-            <tr data-id="2">
-              <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>
+            <tr>
               <td>JQTest2</td>
               <td>
                 <p class="status warning">
@@ -12541,10 +12531,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-col-sort.vue corr
               <td>1000</td>
               <td>jenny</td>
             </tr>
-            <tr data-id="3">
-              <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>
+            <tr>
               <td>JQTest3</td>
               <td>
                 <p class="status unhealth">
@@ -12554,10 +12541,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-col-sort.vue corr
               <td>500</td>
               <td>jenny</td>
             </tr>
-            <tr data-id="4">
-              <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>
+            <tr>
               <td>JQTest4</td>
               <td>
                 <p class="status warning">
@@ -12654,6 +12638,100 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-sort.vue correctl
 </div>
 `;
 
+exports[`ssr snapshot test renders ./examples/table/demos/drag-sort-handler.vue correctly 1`] = `
+<div class="demo-container t-table-demo-sort">
+  <div class="item">
+    <div class="t-table t-table--row-handler-draggable" style="position:relative;">
+      <div class="t-table__content">
+        <table class="t-table--layout-fixed" style="width:;">
+          <colgroup>
+            <col style="width:80px;">
+            <col>
+            <col>
+            <col>
+            <col>
+          </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="instance" class="t-table__th-instance">
+                <div class="t-table__th-cell-inner">集群名称</div>
+              </th>
+              <th data-colkey="status" class="t-table__th-status">
+                <div class="t-table__th-cell-inner">状态</div>
+              </th>
+              <th data-colkey="survivalTime" class="t-table__th-survivalTime">
+                <div class="t-table__th-cell-inner">存活时间(s)</div>
+              </th>
+              <th data-colkey="owner" class="t-table__th-owner">
+                <div class="t-table__th-cell-inner">管理员</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="t-table__body">
+            <tr data-id="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>JQTest1</td>
+              <td>
+                <p class="status">
+                  健康
+                </p>
+              </td>
+              <td>1000</td>
+              <td>jenny;peter</td>
+            </tr>
+            <tr data-id="2">
+              <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>JQTest2</td>
+              <td>
+                <p class="status warning">
+                  警告
+                </p>
+              </td>
+              <td>1000</td>
+              <td>jenny</td>
+            </tr>
+            <tr data-id="3">
+              <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>JQTest3</td>
+              <td>
+                <p class="status unhealth">
+                  异常
+                </p>
+              </td>
+              <td>500</td>
+              <td>jenny</td>
+            </tr>
+            <tr data-id="4">
+              <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>JQTest4</td>
+              <td>
+                <p class="status warning">
+                  警告
+                </p>
+              </td>
+              <td>1500</td>
+              <td>peter</td>
+            </tr>
+          </tbody>
+          <!---->
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ssr snapshot test renders ./examples/table/demos/empty.vue correctly 1`] = `
 <div class="tdesign-demo-block-column-large">
   <div class="t-table" style="position:relative;">
@@ -13996,7 +14074,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/merge-cells.vue correc
 
 exports[`ssr snapshot test renders ./examples/table/demos/multi-header.vue correctly 1`] = `
 <div class="tdesign-demo-block-column-large tdesign-demo-table-multi-header" style="width:100%;">
-  <div><label class="t-checkbox t-is-checked"><input type="checkbox" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">显示表格边框</span></label> <label class="t-checkbox t-is-checked"><input type="checkbox" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">显示固定表头</span></label> <label class="t-checkbox t-is-checked"><input type="checkbox" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">虚拟滚动</span></label> <label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">固定左侧列</span></label> <label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">固定右侧列</span></label> <label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">表头吸顶</span></label></div>
+  <div><label class="t-checkbox t-is-checked"><input type="checkbox" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">显示表格边框</span></label> <label class="t-checkbox t-is-checked"><input type="checkbox" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">显示固定表头</span></label> <label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">固定左侧列</span></label> <label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">固定右侧列</span></label> <label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">表头吸顶</span></label></div>
   <div class="t-table t-table--bordered t-table--multiple-header" style="position:relative;">
     <div class="t-table__top-content">
       <div class="t-table__column-controller-trigger t-align-top-right"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-setting">
@@ -14005,7 +14083,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/multi-header.vue corre
           </svg><span class="t-button__text">列配置</span></button></div>
     </div>
     <div class="t-table__content" style="max-height:380px;">
-      <div class="t-table__virtual-scroll-cursor" style="transform:translate(0, 28800px);-ms-transform:translate(0, 28800px);-moz-transform:translate(0, 28800px);-webkit-transform:translate(0, 28800px);"></div>
+      <div class="t-table__virtual-scroll-cursor" style="transform:translate(0, 30000px);-ms-transform:translate(0, 30000px);-moz-transform:translate(0, 30000px);-webkit-transform:translate(0, 30000px);"></div>
       <table class="t-table--layout-fixed" style="width:;">
         <colgroup>
           <col style="width:100px;">
diff --git a/test/unit/swiper/index.test.js b/test/unit/swiper/index.test.js
index cd68344e49..ade0296aea 100644
--- a/test/unit/swiper/index.test.js
+++ b/test/unit/swiper/index.test.js
@@ -11,7 +11,7 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper>
-                <SwiperItem>1</SwiperItem>
+              <SwiperItem>1</SwiperItem>
             </Swiper>
           );
         },
@@ -23,7 +23,7 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper animation={'fade'}>
-                <SwiperItem>1</SwiperItem>
+              <SwiperItem>1</SwiperItem>
             </Swiper>
           );
         },
@@ -35,7 +35,7 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper autoplay>
-                <SwiperItem>1</SwiperItem>
+              <SwiperItem>1</SwiperItem>
             </Swiper>
           );
         },
@@ -47,8 +47,8 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper defaultCurrent={2}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -60,8 +60,8 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper direction={'vertical'}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -73,8 +73,8 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper duration={3000}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -86,8 +86,8 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper height={600}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -99,8 +99,8 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper interval={3000}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -111,10 +111,10 @@ describe('Swiper', () => {
       const wrapper = mount({
         render() {
           return (
-              <Swiper loop={true}>
-                  <SwiperItem>1</SwiperItem>
-                  <SwiperItem>2</SwiperItem>
-              </Swiper>
+            <Swiper loop={true}>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
+            </Swiper>
           );
         },
       });
@@ -124,14 +124,16 @@ describe('Swiper', () => {
       const wrapper = mount({
         render() {
           return (
-            <Swiper navigation={{
-              placement: 'outside',
-              showSlideBtn: 'hover',
-              size: 'large',
-              type: 'dots-bar',
-            }}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+            <Swiper
+              navigation={{
+                placement: 'outside',
+                showSlideBtn: 'hover',
+                size: 'large',
+                type: 'dots-bar',
+              }}
+            >
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -143,8 +145,8 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper theme={'dark'}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -156,8 +158,8 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper type={'card'}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -174,8 +176,8 @@ describe('Swiper', () => {
         render() {
           return (
             <Swiper onChange={fn}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
@@ -193,13 +195,11 @@ describe('Swiper', () => {
     it('navigation: VNode', async () => {
       const wrapper = mount({
         render() {
-          const renderNavigation = () => (
-            <div>123</div>
-          );
+          const renderNavigation = () => <div>123</div>;
           return (
             <Swiper navigation={renderNavigation()}>
-                <SwiperItem>1</SwiperItem>
-                <SwiperItem>2</SwiperItem>
+              <SwiperItem>1</SwiperItem>
+              <SwiperItem>2</SwiperItem>
             </Swiper>
           );
         },
diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap
index ac6a1946f9..3641076204 100644
--- a/test/unit/table/__snapshots__/demo.test.js.snap
+++ b/test/unit/table/__snapshots__/demo.test.js.snap
@@ -2791,6 +2791,215 @@ exports[`Table Table dragColSortVue demo works fine 1`] = `
     <div
       class="t-table t-table--col-draggable"
       style="position: relative;"
+    >
+      <div
+        class="t-table__content"
+      >
+        <table
+          class="t-table--layout-fixed"
+        >
+          <colgroup>
+            <col
+              style="width: 150px;"
+            />
+            <col
+              style="width: 100px;"
+            />
+            <col
+              style="width: 200px;"
+            />
+            <col
+              style="width: 100px;"
+            />
+          </colgroup>
+          <thead
+            class="t-table__header"
+          >
+            <tr>
+              <th
+                class="t-table__th-instance"
+                data-colkey="instance"
+              >
+                <div
+                  class="t-table__th-cell-inner"
+                >
+                  集群名称
+                </div>
+              </th>
+              <th
+                class="t-table__th-status"
+                data-colkey="status"
+              >
+                <div
+                  class="t-table__th-cell-inner"
+                >
+                  状态
+                </div>
+              </th>
+              <th
+                class="t-table__th-survivalTime"
+                data-colkey="survivalTime"
+              >
+                <div
+                  class="t-table__th-cell-inner"
+                >
+                  存活时间(s)
+                </div>
+              </th>
+              <th
+                class="t-table__th-owner"
+                data-colkey="owner"
+              >
+                <div
+                  class="t-table__th-cell-inner"
+                >
+                  管理员
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="t-table__body"
+          >
+            <tr
+              class=""
+            >
+              <td
+                class=""
+              >
+                JQTest1
+              </td>
+              <td
+                class=""
+              >
+                <p
+                  class="status"
+                >
+                  
+          健康
+        
+                </p>
+              </td>
+              <td
+                class=""
+              >
+                1000
+              </td>
+              <td
+                class=""
+              >
+                jenny;peter
+              </td>
+            </tr>
+            <tr
+              class=""
+            >
+              <td
+                class=""
+              >
+                JQTest2
+              </td>
+              <td
+                class=""
+              >
+                <p
+                  class="status warning"
+                >
+                  
+          警告
+        
+                </p>
+              </td>
+              <td
+                class=""
+              >
+                1000
+              </td>
+              <td
+                class=""
+              >
+                jenny
+              </td>
+            </tr>
+            <tr
+              class=""
+            >
+              <td
+                class=""
+              >
+                JQTest3
+              </td>
+              <td
+                class=""
+              >
+                <p
+                  class="status unhealth"
+                >
+                  
+          异常
+        
+                </p>
+              </td>
+              <td
+                class=""
+              >
+                500
+              </td>
+              <td
+                class=""
+              >
+                jenny
+              </td>
+            </tr>
+            <tr
+              class=""
+            >
+              <td
+                class=""
+              >
+                JQTest4
+              </td>
+              <td
+                class=""
+              >
+                <p
+                  class="status warning"
+                >
+                  
+          警告
+        
+                </p>
+              </td>
+              <td
+                class=""
+              >
+                1500
+              </td>
+              <td
+                class=""
+              >
+                peter
+              </td>
+            </tr>
+          </tbody>
+          <!---->
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Table Table dragSortHandlerVue demo works fine 1`] = `
+<div
+  class="demo-container t-table-demo-sort"
+>
+  <div
+    class="item"
+  >
+    <div
+      class="t-table t-table--row-handler-draggable"
+      style="position: relative;"
     >
       <div
         class="t-table__content"
@@ -15509,24 +15718,6 @@ exports[`Table Table multiHeaderVue demo works fine 1`] = `
       </span>
     </label>
      
-    <label
-      class="t-checkbox t-is-checked"
-    >
-      <input
-        class="t-checkbox__former"
-        type="checkbox"
-        value=""
-      />
-      <span
-        class="t-checkbox__input"
-      />
-      <span
-        class="t-checkbox__label"
-      >
-        虚拟滚动
-      </span>
-    </label>
-     
     <label
       class="t-checkbox"
     >
@@ -15628,7 +15819,7 @@ exports[`Table Table multiHeaderVue demo works fine 1`] = `
     >
       <div
         class="t-table__virtual-scroll-cursor"
-        style="transform: translate(0, 28800px);"
+        style="transform: translate(0, 30000px);"
       />
       <table
         class="t-table--layout-fixed"
diff --git a/test/unit/table/demo.test.js b/test/unit/table/demo.test.js
index 4002f48bd0..c43970430d 100644
--- a/test/unit/table/demo.test.js
+++ b/test/unit/table/demo.test.js
@@ -14,6 +14,7 @@ import customFooterVue from '@/examples/table/demos/custom-footer.vue';
 import customHeaderVue from '@/examples/table/demos/custom-header.vue';
 import dataSortVue from '@/examples/table/demos/data-sort.vue';
 import dragColSortVue from '@/examples/table/demos/drag-col-sort.vue';
+import dragSortHandlerVue from '@/examples/table/demos/drag-sort-handler.vue';
 import dragSortVue from '@/examples/table/demos/drag-sort.vue';
 import emptyVue from '@/examples/table/demos/empty.vue';
 import expandableVue from '@/examples/table/demos/expandable.vue';
@@ -47,6 +48,7 @@ const mapper = {
   customHeaderVue,
   dataSortVue,
   dragColSortVue,
+  dragSortHandlerVue,
   dragSortVue,
   emptyVue,
   expandableVue,