From 7aba42b39bf38b527c62a19ca9c0bc12b40a37a5 Mon Sep 17 00:00:00 2001
From: chaishi <yaoyanhuoyi@qq.com>
Date: Sat, 25 Dec 2021 14:21:25 +0800
Subject: [PATCH 1/6] fix(table): ellipsis is invalid in first column of
 enhanced table

---
 examples/table/demos/tree-select.vue | 41 ++++++++++++++--------------
 examples/table/demos/tree.vue        | 36 +++++++++++-------------
 examples/table/table.md              |  6 ++--
 src/_common                          |  2 +-
 src/table/base-table-props.ts        |  4 ++-
 src/table/base-table/index.tsx       |  2 +-
 src/table/base-table/table-cell.tsx  | 24 +++++++++++++---
 src/table/enhanced-table/tree.tsx    |  9 ++++--
 src/table/primary-table-props.ts     |  8 ++++--
 src/table/type.ts                    | 16 +++++++++--
 10 files changed, 90 insertions(+), 58 deletions(-)

diff --git a/examples/table/demos/tree-select.vue b/examples/table/demos/tree-select.vue
index 21e86c2d0..7d080e573 100644
--- a/examples/table/demos/tree-select.vue
+++ b/examples/table/demos/tree-select.vue
@@ -1,15 +1,18 @@
 <template>
-  <div class='t-table-tree-select-demo'>
+  <div class="t-table-tree-select-demo">
     <div>
       <t-radio-group v-model="checkStrictly" variant="default-filled">
         <t-radio-button value="true">父子行选中独立</t-radio-button>
         <t-radio-button value="false">
-          <t-popup content="「父子行选中关联」由于表格数据的特殊性，父节点选中或者取消选中，会影响子节点；但子节点选中或取消不影响父元素">
+          <t-popup
+            content="「父子行选中关联」由于表格数据的特殊性，父节点选中或者取消选中，会影响子节点；但子节点选中或取消不影响父元素"
+          >
             父子行选中关联
           </t-popup>
         </t-radio-button>
       </t-radio-group>
-    </div><br>
+    </div>
+    <br />
     <!-- 子节点字段不是 children，而是 childrenList -->
     <!-- expandedRow 和 expanded-row-keys 控制是否显示展开收起行，以及哪些行展开 -->
     <!-- !!! EnhancedTable 才支持，普通 Table 不支持 !!! -->
@@ -44,21 +47,21 @@ for (let i = 0; i < 5; i++) {
     description: 'important.',
   };
   obj.childrenList = new Array(5).fill(null).map((t, j) => {
-    const secondIndex = (100 * j) + ((i + 1) * 10);
-    const secondObj = ({
+    const secondIndex = 100 * j + (i + 1) * 10;
+    const secondObj = {
       ...obj,
       status: secondIndex % 3,
       key: secondIndex,
       instance: `JQTest${secondIndex}`,
-    });
+    };
     secondObj.childrenList = new Array(5).fill(null).map((m, n) => {
-      const thirdIndex = secondIndex * 1000 + (100 * m) + ((n + 1) * 10);
-      return ({
+      const thirdIndex = secondIndex * 1000 + 100 * m + (n + 1) * 10;
+      return {
         ...obj,
         status: thirdIndex % 3,
         key: thirdIndex,
         instance: `JQTest${thirdIndex}`,
-      });
+      };
     });
     return secondObj;
   });
@@ -89,15 +92,13 @@ export default {
         {
           colKey: 'instance',
           title: '集群名称',
-          width: 250,
+          width: 200,
         },
         {
           colKey: 'status',
           title: '状态',
           width: 100,
-          cell: (h, { row }) => row.status === 0
-            ? <p class="status">健康</p>
-            : <p class="status unhealth">异常</p>,
+          cell: (h, { row }) => (row.status === 0 ? <p class="status">健康</p> : <p class="status unhealth">异常</p>),
         },
         { colKey: 'owner', title: '管理员' },
         { colKey: 'description', title: '描述' },
@@ -125,9 +126,7 @@ export default {
     },
 
     expandedRowRender(h, { row }) {
-      return (
-        <div>这是展开项数据，我是 {row.key} 号</div>
-      );
+      return <div>这是展开项数据，我是 {row.key} 号</div>;
     },
 
     onExpandChange(val) {
@@ -145,15 +144,15 @@ export default {
   }
   .status {
     position: relative;
-    color: #00A870;
+    color: #00a870;
     margin-left: 10px;
     &::before {
       position: absolute;
       top: 50%;
       left: 0px;
       transform: translateY(-50%);
-      content: "";
-      background-color: #00A870;
+      content: '';
+      background-color: #00a870;
       width: 6px;
       height: 6px;
       margin-left: -10px;
@@ -161,9 +160,9 @@ export default {
     }
   }
   .status.unhealth {
-    color: #E34D59;
+    color: #e34d59;
     &::before {
-      background-color: #E34D59;
+      background-color: #e34d59;
     }
   }
 }
diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue
index 703a9f6fd..dbd2b8a72 100644
--- a/examples/table/demos/tree.vue
+++ b/examples/table/demos/tree.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-
     <!-- 第一列展开树结点，缩进为 24px，子节点字段 childrenKey 默认为 children -->
     <!-- !!! EnhancedTable 才支持，普通 Table 不支持 !!! -->
     <t-enhanced-table
@@ -27,7 +26,6 @@
       :columns="columns"
       :tree="{ indent: 12, treeNodeColumnIndex: 1, childrenKey: 'list' }"
     ></t-enhanced-table> -->
-
   </div>
 </template>
 <script lang="jsx">
@@ -47,14 +45,14 @@ for (let i = 0; i < 5; i++) {
     description: '数据源',
   };
   obj.list = new Array(2).fill(null).map((t, j) => {
-    const secondIndex = (100 * j) + ((i + 1) * 10);
-    const secondObj = ({
+    const secondIndex = 100 * j + (i + 1) * 10;
+    const secondObj = {
       ...obj,
       key: `我是 ${secondIndex} 号`,
-    });
+    };
     secondObj.list = new Array(3).fill(null).map((m, n) => ({
       ...obj,
-      key: `我是 ${secondIndex * 1000 + (100 * m) + ((n + 1) * 10)} 号`,
+      key: `我是 ${secondIndex * 1000 + 100 * m + (n + 1) * 10} 号`,
     }));
     return secondObj;
   });
@@ -68,10 +66,11 @@ export default {
       data,
       columns: [
         {
-          width: '200',
+          width: 150,
           className: 'row',
           colKey: 'key',
           title: '编号',
+          ellipsis: true,
         },
         {
           colKey: 'platform',
@@ -90,19 +89,16 @@ export default {
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           cell: (h, { row }) => (
             <div class="tdesign-table-demo__table-operations">
-              <t-button variant="text" onClick={() => this.appendTo(row)}>插入</t-button>
-              <t-button
-                variant="text"
-                onClick={() => this.onEditClick(row)}
-              >更新</t-button>
-              <t-button
-                variant="text"
-                onClick={() => this.onLookUp(row)}
-              >查看</t-button>
-              <t-popconfirm
-                content="确认删除吗"
-                onConfirm={() => this.onDeleteConfirm(row)}
-              >
+              <t-button variant="text" onClick={() => this.appendTo(row)}>
+                插入
+              </t-button>
+              <t-button variant="text" onClick={() => this.onEditClick(row)}>
+                更新
+              </t-button>
+              <t-button variant="text" onClick={() => this.onLookUp(row)}>
+                查看
+              </t-button>
+              <t-popconfirm content="确认删除吗" onConfirm={() => this.onDeleteConfirm(row)}>
                 <t-button variant="text">删除</t-button>
               </t-popconfirm>
             </div>
diff --git a/examples/table/table.md b/examples/table/table.md
index 65c656f00..16e0765a2 100644
--- a/examples/table/table.md
+++ b/examples/table/table.md
@@ -8,6 +8,7 @@
 bordered | Boolean | false | 是否显示表格边框 | N
 columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<BaseTableCol<T>>` | N
 data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
+disableDataSort | Boolean | false | 是否禁用本地数据排序。当 `data` 数据长度超过分页大小时，会自动进行本地数据排序。如果 `disabledDataSort` 设置为 true，则无论何时，都不会进行本地排序 | N
 empty | String / Slot / Function | '' | 空表格呈现样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 expandedRow | String / Slot / Function | - | 展开行内容，可自定义，泛型 T 指表格数据类型。TS 类型：`string | TNode<{ row: T; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 firstFullRow | String / Slot / Function | - | 首行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
@@ -74,6 +75,7 @@ width | String / Number | - | 列宽 | N
 -- | -- | -- | -- | --
 asyncLoading | String / Slot / Function | - | 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容。TS 类型：`'loading' | 'load-more' | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<PrimaryTableCol<T>>` | N
+dragSort | Boolean | false | 是否开始拖拽排序，会显示拖拽图标 | N
 expandedRow | String / Slot / Function | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode<{ row: T; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 expandedRowKeys | Array | [] | 展开行。支持语法糖。TS 类型：`Array<string | number>` | N
 defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array<string | number>` | N
@@ -88,8 +90,8 @@ selectedRowKeys | Array | - | 选中的行，控制属性。支持语法糖。TS
 defaultSelectedRowKeys | Array | - | 选中的行，控制属性。非受控属性。TS 类型：`Array<string | number>` | N
 showColumnController | Boolean | false | 【开发中】是否显示 自定义显示列控制器 | N
 showDragCol | Boolean | false | 【开发中】是否显示为通过拖拽图标进行排序 | N
-sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。支持语法糖。TS 类型：`TableSort`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
-defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。非受控属性。TS 类型：`TableSort`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`。支持语法糖。TS 类型：`TableSort`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`。非受控属性。TS 类型：`TableSort`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 sortOnRowDraggable | Boolean | false | 允许表格行拖拽时排序 | N
 `Omit<BaseTableProps<T>, 'columns'>` | - | - | 继承 `Omit<BaseTableProps<T>, 'columns'>` 中的全部 API | N
 onAsyncLoadingClick | Function |  | 异步加载区域被点击时触发。`(context: { status: 'loading' | 'load-more' }) => {}` | N
diff --git a/src/_common b/src/_common
index c72d76b9e..6c23b6cf0 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit c72d76b9e90c10d66fe573936901764964a46d0f
+Subproject commit 6c23b6cf04788fba2ba55ee05097ca5e829a69a1
diff --git a/src/table/base-table-props.ts b/src/table/base-table-props.ts
index 1b495b0a5..da7f945c1 100644
--- a/src/table/base-table-props.ts
+++ b/src/table/base-table-props.ts
@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-23 13:19:48
+ * updated at 2021-12-25 11:57:19
  * */
 
 import { TdBaseTableProps } from '../table/type';
@@ -21,6 +21,8 @@ export default {
     type: Array as PropType<TdBaseTableProps['data']>,
     default: (): TdBaseTableProps['data'] => [],
   },
+  /** 是否禁用本地数据排序。当 `data` 数据长度超过分页大小时，会自动进行本地数据排序。如果 `disabledDataSort` 设置为 true，则无论何时，都不会进行本地排序 */
+  disableDataSort: Boolean,
   /** 空表格呈现样式 */
   empty: {
     type: [String, Function] as PropType<TdBaseTableProps['empty']>,
diff --git a/src/table/base-table/index.tsx b/src/table/base-table/index.tsx
index 401dcab89..d52bf2f74 100644
--- a/src/table/base-table/index.tsx
+++ b/src/table/base-table/index.tsx
@@ -66,7 +66,7 @@ export default mixins(getConfigReceiverMixins<Vue, TableConfig>('table')).extend
     dataSource(): Array<DataType> {
       if (!this.hasPagination) return this.data.slice(0);
       const { current, pageSize } = this;
-      if (this.data.length > pageSize) {
+      if (this.data.length > pageSize && !this.disableDataSort) {
         return this.data.slice((current - 1) * pageSize, current * pageSize);
       }
       return this.data;
diff --git a/src/table/base-table/table-cell.tsx b/src/table/base-table/table-cell.tsx
index 9b54f1cfb..c50bfa09c 100644
--- a/src/table/base-table/table-cell.tsx
+++ b/src/table/base-table/table-cell.tsx
@@ -5,6 +5,8 @@ import { isNodeOverflow } from '../../utils/dom';
 import { TdInstance } from '../util/interface';
 import { getRecord } from '../util/common';
 
+export const ELLIPSIS_CLASS_NAME = `${prefix}-text-ellipsis`;
+
 const overlayStyle = {
   width: '100%',
   maxWidth: '400px',
@@ -139,6 +141,7 @@ export default Vue.extend({
       },
       style,
     };
+    let newCellContent = cellContent;
     // 如果被截断给加上 Tooltip 提示
     if (ellipsis && this.isCutOff) {
       let popupCellContent = cellContent;
@@ -150,14 +153,27 @@ export default Vue.extend({
           colIndex,
         });
       }
-      cellContent = (
-        <Popup style="display: inline;" overlayStyle={overlayStyle} placement="bottom-left" showArrow={false}>
+      // 处理自定义节点的超出省略显示
+      this.$nextTick(() => {
+        if (cellContent?.elm) {
+          const elm = cellContent.elm as HTMLElement;
+          elm.classList?.remove?.(ELLIPSIS_CLASS_NAME);
+          elm.classList?.add?.(ELLIPSIS_CLASS_NAME);
+        }
+      });
+      newCellContent = (
+        <Popup
+          style="display: inline;"
+          overlayStyle={overlayStyle}
+          placement="bottom-left"
+          showArrow={false}
+          content={() => popupCellContent}
+        >
           {cellContent}
-          <div slot="content">{popupCellContent}</div>
         </Popup>
       );
     }
-    return <td {...tdAttrs}>{cellContent}</td>;
+    return <td {...tdAttrs}>{newCellContent}</td>;
   },
   mounted() {
     this.init();
diff --git a/src/table/enhanced-table/tree.tsx b/src/table/enhanced-table/tree.tsx
index c276be786..c6a5e81b1 100644
--- a/src/table/enhanced-table/tree.tsx
+++ b/src/table/enhanced-table/tree.tsx
@@ -10,6 +10,7 @@ import {
 } from '../type';
 import { getCell } from '../util/common';
 import TableTreeStore, { KeysType } from './tree-store';
+import { prefix } from '../../config';
 
 export default Vue.extend({
   props: {
@@ -50,12 +51,12 @@ export default Vue.extend({
         const currentState = this.store.treeDataMap.get(get(p.row, this.rowKey));
         const colStyle = this.getTreeNodeStyle(currentState?.level);
         const childrenNodes = get(p.row, this.childrenKey);
-        if (childrenNodes && (childrenNodes instanceof Array)) {
+        if (childrenNodes && childrenNodes instanceof Array) {
           const IconNode = this.store.treeDataMap.get(get(p.row, this.rowKey))?.expanded
             ? MinusRectangleIcon
             : AddRectangleIcon;
           return (
-            <div style={colStyle}>
+            <div class={`${prefix}-table__tree-col`} style={colStyle}>
               {!!childrenNodes.length && (
                 <IconNode style={{ marginRight: '8px' }} onClick={() => this.toggleExpandData(p)} />
               )}
@@ -65,6 +66,10 @@ export default Vue.extend({
         }
         return <div style={colStyle}>{cellInfo}</div>;
       };
+      // 树形节点 hover 不需要显示操作符号 [+] 和 [-]
+      if (treeNodeCol.ellipsis === true) {
+        treeNodeCol.ellipsis = (h, p) => getCell(this, { ...p, col: this.columns[treeNodeColumnIndex] });
+      }
       cols[treeNodeColumnIndex] = treeNodeCol;
       return cols;
     },
diff --git a/src/table/primary-table-props.ts b/src/table/primary-table-props.ts
index eeaae7884..6f8e01406 100644
--- a/src/table/primary-table-props.ts
+++ b/src/table/primary-table-props.ts
@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-23 13:19:48
+ * updated at 2021-12-25 11:57:19
  * */
 
 import { TdPrimaryTableProps } from '../table/type';
@@ -18,6 +18,8 @@ export default {
     type: Array as PropType<TdPrimaryTableProps['columns']>,
     default: (): TdPrimaryTableProps['columns'] => [],
   },
+  /** 是否开始拖拽排序，会显示拖拽图标 */
+  dragSort: Boolean,
   /** 展开行内容，泛型 T 指表格数据类型 */
   expandedRow: {
     type: [String, Function] as PropType<TdPrimaryTableProps['expandedRow']>,
@@ -69,11 +71,11 @@ export default {
   showColumnController: Boolean,
   /** 【开发中】是否显示为通过拖拽图标进行排序 */
   showDragCol: Boolean,
-  /** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序 */
+  /** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true` */
   sort: {
     type: [Object, Array] as PropType<TdPrimaryTableProps['sort']>,
   },
-  /** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序，非受控属性 */
+  /** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`，非受控属性 */
   defaultSort: {
     type: [Object, Array] as PropType<TdPrimaryTableProps['defaultSort']>,
   },
diff --git a/src/table/type.ts b/src/table/type.ts
index a2793282c..d8df4f4de 100644
--- a/src/table/type.ts
+++ b/src/table/type.ts
@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-23 13:19:48
+ * updated at 2021-12-25 11:57:19
  * */
 
 import { PaginationProps, PageInfo } from '../pagination';
@@ -27,6 +27,11 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
    * @default []
    */
   data?: Array<T>;
+  /**
+   * 是否禁用本地数据排序。当 `data` 数据长度超过分页大小时，会自动进行本地数据排序。如果 `disabledDataSort` 设置为 true，则无论何时，都不会进行本地排序
+   * @default false
+   */
+  disableDataSort?: boolean;
   /**
    * 空表格呈现样式
    * @default ''
@@ -212,6 +217,11 @@ export interface TdPrimaryTableProps<T extends TableRowData = TableRowData>
    * @default []
    */
   columns?: Array<PrimaryTableCol<T>>;
+  /**
+   * 是否开始拖拽排序，会显示拖拽图标
+   * @default false
+   */
+  dragSort?: boolean;
   /**
    * 展开行内容，泛型 T 指表格数据类型
    */
@@ -275,11 +285,11 @@ export interface TdPrimaryTableProps<T extends TableRowData = TableRowData>
    */
   showDragCol?: boolean;
   /**
-   * 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序
+   * 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`
    */
   sort?: TableSort;
   /**
-   * 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序，非受控属性
+   * 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDatasort = true`，非受控属性
    */
   defaultSort?: TableSort;
   /**

From a88ee59a6999b85d185e273a176075b2fb8237af Mon Sep 17 00:00:00 2001
From: chaishi <yaoyanhuoyi@qq.com>
Date: Sat, 25 Dec 2021 14:36:45 +0800
Subject: [PATCH 2/6] fix(table): tree data is error with pagination

---
 examples/table/demos/tree.vue | 86 +++++++++++++++++++++--------------
 1 file changed, 53 insertions(+), 33 deletions(-)

diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue
index dbd2b8a72..b117d4b00 100644
--- a/examples/table/demos/tree.vue
+++ b/examples/table/demos/tree.vue
@@ -1,5 +1,10 @@
 <template>
   <div>
+    <div>
+      <t-button theme="default" @click="setData1">设置为全新的数据</t-button>&nbsp;&nbsp;
+      <t-button theme="default" @click="setData2">单独设置某行数据</t-button>
+    </div>
+    <br />
     <!-- 第一列展开树结点，缩进为 24px，子节点字段 childrenKey 默认为 children -->
     <!-- !!! EnhancedTable 才支持，普通 Table 不支持 !!! -->
     <t-enhanced-table
@@ -8,14 +13,10 @@
       :data="data"
       :columns="columns"
       :tree="{ childrenKey: 'list' }"
+      :pagination="pagination"
+      @page-change="onPageChange"
     ></t-enhanced-table>
 
-    <br />
-    <div>
-      <t-button theme="default" @click="setData1">设置为全新的数据</t-button>&nbsp;&nbsp;
-      <t-button theme="default" @click="setData2">单独设置某行数据</t-button>
-    </div>
-
     <!-- 第二列展开树结点，缩进为 12px，示例代码有效，勿删 -->
     <!-- indent 定义缩进距离；treeNodeColumnIndex 定义第几列作为树结点展开列 -->
     <!-- 如果子结点字段不是 'children'，可以使用 childrenKey 定义字段别名，如 `:tree="{ childrenKey: 'list' }"` -->
@@ -31,42 +32,53 @@
 <script lang="jsx">
 import { EnhancedTable } from 'tdesign-vue';
 
-const data = [];
-for (let i = 0; i < 5; i++) {
-  const obj = {
-    key: `我是 ${i} 号`,
-    platform: i % 2 === 0 ? '共有' : '私有',
-    type: ['String', 'Number', 'Array', 'Object'][i % 4],
-    default: ['-', '0', '[]', '{}'][i % 4],
-    detail: {
-      postion: `读取 ${i} 个数据的嵌套信息值`,
-    },
-    needed: i % 4 === 0 ? '是' : '否',
-    description: '数据源',
-  };
-  obj.list = new Array(2).fill(null).map((t, j) => {
-    const secondIndex = 100 * j + (i + 1) * 10;
-    const secondObj = {
-      ...obj,
-      key: `我是 ${secondIndex} 号`,
+function getData(currentPage = 1) {
+  const data = [];
+  const pageInfo = `第 ${currentPage} 页`;
+  for (let i = 0; i < 5; i++) {
+    const obj = {
+      key: `我是 ${i} 号（${pageInfo}）`,
+      platform: i % 2 === 0 ? '共有' : '私有',
+      type: ['String', 'Number', 'Array', 'Object'][i % 4],
+      default: ['-', '0', '[]', '{}'][i % 4],
+      detail: {
+        postion: `读取 ${i} 个数据的嵌套信息值`,
+      },
+      needed: i % 4 === 0 ? '是' : '否',
+      description: '数据源',
     };
-    secondObj.list = new Array(3).fill(null).map((m, n) => ({
-      ...obj,
-      key: `我是 ${secondIndex * 1000 + 100 * m + (n + 1) * 10} 号`,
-    }));
-    return secondObj;
-  });
-  data.push(obj);
+    obj.list = new Array(2).fill(null).map((t, j) => {
+      const secondIndex = 100 * j + (i + 1) * 10;
+      const secondObj = {
+        ...obj,
+        key: `我是 ${secondIndex} 号（${pageInfo}）`,
+      };
+      secondObj.list = new Array(3).fill(null).map((m, n) => ({
+        ...obj,
+        key: `我是 ${secondIndex * 1000 + 100 * m + (n + 1) * 10} 号（${pageInfo}）`,
+      }));
+      return secondObj;
+    });
+    data.push(obj);
+  }
+  return data;
 }
 
+const data = getData();
+
 export default {
   components: { TEnhancedTable: EnhancedTable },
   data() {
     return {
       data,
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        total: 100,
+      },
       columns: [
         {
-          width: 150,
+          width: 200,
           className: 'row',
           colKey: 'key',
           title: '编号',
@@ -82,7 +94,7 @@ export default {
         },
         {
           colKey: 'operate',
-          width: 350,
+          width: 300,
           title: '操作',
           align: 'center',
           // 增、删、改、查 等操作
@@ -164,6 +176,14 @@ export default {
       });
       this.$message.success(`已插入子节点我是 ${randomKey} 号，请展开查看`);
     },
+
+    onPageChange(pageInfo) {
+      this.pagination = {
+        ...this.pagination,
+        ...pageInfo,
+      };
+      this.data = getData(pageInfo.current);
+    },
   },
 };
 </script>

From 87b765adc326d4aff402822b02ff9ca82190f280 Mon Sep 17 00:00:00 2001
From: chaishi <yaoyanhuoyi@qq.com>
Date: Sat, 25 Dec 2021 14:41:37 +0800
Subject: [PATCH 3/6] test(table): update snapshots

---
 test/ssr/__snapshots__/ssr.test.js.snap | 95 ++++++++++++++++---------
 1 file changed, 63 insertions(+), 32 deletions(-)

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 9cf590a04..e0b550e4d 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -12298,6 +12298,9 @@ exports[`ssr snapshot test renders ./examples/table/demos/single-sort.vue correc
 
 exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] = `
 <div>
+  <div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">设置为全新的数据</span></button>  
+    <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">单独设置某行数据</span></button>
+  </div> <br>
   <div class="t-table">
     <div class="t-loading__parent">
       <div class="t-table__content">
@@ -12306,23 +12309,23 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
             <col style="width:200px;">
             <col>
             <col>
-            <col style="width:350px;">
+            <col style="width:300px;">
           </colgroup>
           <thead>
             <tr>
-              <td class="row" key="key" colspan="1" rowspan="1" style="overflow:hidden;">编号</td>
+              <td class="t-text-ellipsis row" key="key" colspan="1" rowspan="1" style="overflow:hidden;">编号</td>
               <td class="" key="platform" colspan="1" rowspan="1">平台</td>
               <td class="" key="type" colspan="1" rowspan="1">类型</td>
               <td class="t-align-center" key="operate" colspan="1" rowspan="1" style="overflow:hidden;">操作</td>
             </tr>
           </thead>
           <tbody class="t-table__body">
-            <tr rowKey="key" class="" key="我是 0 号">
-              <td class="row" key="key" length="4" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+            <tr rowKey="key" class="" key="我是 0 号（第 1 页）">
+              <td class="t-text-ellipsis row" key="key" length="4" style="overflow:hidden;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
-                  </svg>我是 0 号</div>
+                  </svg>我是 0 号（第 1 页）</div>
               </td>
               <td class="" key="platform" length="4">共有</td>
               <td class="" key="type" length="4">String</td>
@@ -12334,12 +12337,12 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
                 </div>
               </td>
             </tr>
-            <tr rowKey="key" class="" key="我是 1 号">
-              <td class="row" key="key" length="4" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+            <tr rowKey="key" class="" key="我是 1 号（第 1 页）">
+              <td class="t-text-ellipsis row" key="key" length="4" style="overflow:hidden;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
-                  </svg>我是 1 号</div>
+                  </svg>我是 1 号（第 1 页）</div>
               </td>
               <td class="" key="platform" length="4">私有</td>
               <td class="" key="type" length="4">Number</td>
@@ -12351,12 +12354,12 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
                 </div>
               </td>
             </tr>
-            <tr rowKey="key" class="" key="我是 2 号">
-              <td class="row" key="key" length="4" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+            <tr rowKey="key" class="" key="我是 2 号（第 1 页）">
+              <td class="t-text-ellipsis row" key="key" length="4" style="overflow:hidden;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
-                  </svg>我是 2 号</div>
+                  </svg>我是 2 号（第 1 页）</div>
               </td>
               <td class="" key="platform" length="4">共有</td>
               <td class="" key="type" length="4">Array</td>
@@ -12368,12 +12371,12 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
                 </div>
               </td>
             </tr>
-            <tr rowKey="key" class="" key="我是 3 号">
-              <td class="row" key="key" length="4" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+            <tr rowKey="key" class="" key="我是 3 号（第 1 页）">
+              <td class="t-text-ellipsis row" key="key" length="4" style="overflow:hidden;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
-                  </svg>我是 3 号</div>
+                  </svg>我是 3 号（第 1 页）</div>
               </td>
               <td class="" key="platform" length="4">私有</td>
               <td class="" key="type" length="4">Object</td>
@@ -12385,12 +12388,12 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
                 </div>
               </td>
             </tr>
-            <tr rowKey="key" class="" key="我是 4 号">
-              <td class="row" key="key" length="4" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+            <tr rowKey="key" class="" key="我是 4 号（第 1 页）">
+              <td class="t-text-ellipsis row" key="key" length="4" style="overflow:hidden;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
-                  </svg>我是 4 号</div>
+                  </svg>我是 4 号（第 1 页）</div>
               </td>
               <td class="" key="platform" length="4">共有</td>
               <td class="" key="type" length="4">String</td>
@@ -12405,10 +12408,38 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
           </tbody>
         </table>
       </div>
+      <div class="t-table__pagination">
+        <div class="t-pagination t-size-m">
+          <div class="t-pagination__total">共 100 项数据</div>
+          <div class="t-select__wrap t-pagination__select">
+            <div class="t-popup__reference t-select__popup-reference">
+              <div name="t-popup--animation" appear="true"></div>
+              <div class="t-select t-size-m"><span class="t-select__placeholder"> 请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+                  <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+                </svg></div>
+            </div>
+          </div>
+          <div disabled="disabled" class="t-pagination__btn t-pagination__btn-prev t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-left">
+              <path fill="currentColor" d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z" fill-opacity="0.9"></path>
+            </svg></div>
+          <ul class="t-pagination__pager">
+            <li class="t-pagination__number t-is-current">1</li>
+            <li class="t-pagination__number">2</li>
+            <li class="t-pagination__number">3</li>
+            <li class="t-pagination__number">4</li>
+            <li class="t-pagination__number">5</li>
+            <li class="t-pagination__number">6</li>
+            <li class="t-pagination__number">7</li>
+            <li class="t-pagination__number">8</li>
+            <li class="t-pagination__number">9</li>
+            <li class="t-pagination__number">10</li>
+          </ul>
+          <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
+              <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
+            </svg></div>
+        </div>
+      </div>
     </div>
-  </div> <br>
-  <div><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">设置为全新的数据</span></button>  
-    <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">单独设置某行数据</span></button>
   </div>
 </div>
 `;
@@ -12421,7 +12452,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc
         </div></span></label>
       <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
     </div>
-  </div><br>
+  </div> <br>
   <div class="t-table">
     <div class="t-loading__parent">
       <div class="t-table__content">
@@ -12429,7 +12460,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc
           <colgroup>
             <col style="width:48px;">
             <col style="width:50px;">
-            <col style="width:250px;">
+            <col style="width:200px;">
             <col style="width:100px;">
             <col>
             <col>
@@ -12449,7 +12480,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc
               <td class="t-table__expandable-icon-cell" key="expanded-icon-cell" length="6" style="overflow:hidden;"><span class="t-table__expand-box"><span style="transition:all .2s;display:flex;align-items:center;"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right-circle"><path fill="currentColor" d="M6.2 5.2L9 8l-2.8 2.8.71.7 3.5-3.5-3.5-3.5-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 15A7 7 0 118 1a7 7 0 010 14zm0-1A6 6 0 108 2a6 6 0 000 12z" fill-opacity="0.9"></path></svg></span></span></td>
               <td class="t-table__cell--selectable" key="row-select" length="6" style="overflow:hidden;"><label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"></span></label></td>
               <td class="" key="instance" length="6" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
                   </svg>JQTest0</div>
@@ -12469,7 +12500,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc
               <td class="t-table__expandable-icon-cell" key="expanded-icon-cell" length="6" style="overflow:hidden;"><span class="t-table__expand-box"><span style="transition:all .2s;display:flex;align-items:center;"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right-circle"><path fill="currentColor" d="M6.2 5.2L9 8l-2.8 2.8.71.7 3.5-3.5-3.5-3.5-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 15A7 7 0 118 1a7 7 0 010 14zm0-1A6 6 0 108 2a6 6 0 000 12z" fill-opacity="0.9"></path></svg></span></span></td>
               <td class="t-table__cell--selectable" key="row-select" length="6" style="overflow:hidden;"><label class="t-checkbox t-is-disabled"><input type="checkbox" disabled="disabled" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"></span></label></td>
               <td class="" key="instance" length="6" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
                   </svg>JQTest1</div>
@@ -12489,7 +12520,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc
               <td class="t-table__expandable-icon-cell" key="expanded-icon-cell" length="6" style="overflow:hidden;"><span class="t-table__expand-box"><span style="transition:all .2s;display:flex;align-items:center;"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right-circle"><path fill="currentColor" d="M6.2 5.2L9 8l-2.8 2.8.71.7 3.5-3.5-3.5-3.5-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 15A7 7 0 118 1a7 7 0 010 14zm0-1A6 6 0 108 2a6 6 0 000 12z" fill-opacity="0.9"></path></svg></span></span></td>
               <td class="t-table__cell--selectable" key="row-select" length="6" style="overflow:hidden;"><label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"></span></label></td>
               <td class="" key="instance" length="6" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
                   </svg>JQTest2</div>
@@ -12509,7 +12540,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc
               <td class="t-table__expandable-icon-cell" key="expanded-icon-cell" length="6" style="overflow:hidden;"><span class="t-table__expand-box"><span style="transition:all .2s;display:flex;align-items:center;"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right-circle"><path fill="currentColor" d="M6.2 5.2L9 8l-2.8 2.8.71.7 3.5-3.5-3.5-3.5-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 15A7 7 0 118 1a7 7 0 010 14zm0-1A6 6 0 108 2a6 6 0 000 12z" fill-opacity="0.9"></path></svg></span></span></td>
               <td class="t-table__cell--selectable" key="row-select" length="6" style="overflow:hidden;"><label class="t-checkbox t-is-disabled"><input type="checkbox" disabled="disabled" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"></span></label></td>
               <td class="" key="instance" length="6" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
                   </svg>JQTest3</div>
@@ -12529,7 +12560,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree-select.vue correc
               <td class="t-table__expandable-icon-cell" key="expanded-icon-cell" length="6" style="overflow:hidden;"><span class="t-table__expand-box"><span style="transition:all .2s;display:flex;align-items:center;"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right-circle"><path fill="currentColor" d="M6.2 5.2L9 8l-2.8 2.8.71.7 3.5-3.5-3.5-3.5-.7.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 15A7 7 0 118 1a7 7 0 010 14zm0-1A6 6 0 108 2a6 6 0 000 12z" fill-opacity="0.9"></path></svg></span></span></td>
               <td class="t-table__cell--selectable" key="row-select" length="6" style="overflow:hidden;"><label class="t-checkbox"><input type="checkbox" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label"></span></label></td>
               <td class="" key="instance" length="6" style="overflow:hidden;">
-                <div><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
+                <div class="t-table__tree-col"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add-rectangle" style="margin-right:8px;">
                     <path fill="currentColor" d="M7.5 11V8.5H5v-1h2.5V5h1v2.5H11v1H8.5V11h-1z" fill-opacity="0.9"></path>
                     <path fill="currentColor" d="M3 14a1 1 0 01-1-1V3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3zm0-1h10V3H3v10z" fill-opacity="0.9"></path>
                   </svg>JQTest4</div>

From 64085dfc409bb63e51c93f2d158fa0c5e5e3ffc0 Mon Sep 17 00:00:00 2001
From: chaishi <yaoyanhuoyi@qq.com>
Date: Sun, 26 Dec 2021 14:38:25 +0800
Subject: [PATCH 4/6] fix(table): scrollContainer is undefined

---
 src/table/base-table/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/table/base-table/index.tsx b/src/table/base-table/index.tsx
index d52bf2f74..744cff84b 100644
--- a/src/table/base-table/index.tsx
+++ b/src/table/base-table/index.tsx
@@ -135,6 +135,7 @@ export default mixins(getConfigReceiverMixins<Vue, TableConfig>('table')).extend
     // 检查是否还可以向左或者向右滚动
     checkScrollableToLeftOrRight() {
       const scrollContainer = this.$refs[this.fixedHeader ? 'scrollBody' : 'tableContent'] as HTMLElement;
+      if (!scrollContainer) return;
       const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
       this.scrollableToLeft = scrollLeft > 0;
       this.scrollableToRight = scrollLeft + clientWidth < scrollWidth;

From 1a240a834c39d98fc82c7ef4d3fa7b9d29200e10 Mon Sep 17 00:00:00 2001
From: chaishi <yaoyanhuoyi@qq.com>
Date: Sun, 26 Dec 2021 14:45:05 +0800
Subject: [PATCH 5/6] docs(table): set dragSort to be developing

---
 examples/table/table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/table/table.md b/examples/table/table.md
index 16e0765a2..2a1567b12 100644
--- a/examples/table/table.md
+++ b/examples/table/table.md
@@ -75,7 +75,7 @@ width | String / Number | - | 列宽 | N
 -- | -- | -- | -- | --
 asyncLoading | String / Slot / Function | - | 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容。TS 类型：`'loading' | 'load-more' | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<PrimaryTableCol<T>>` | N
-dragSort | Boolean | false | 是否开始拖拽排序，会显示拖拽图标 | N
+dragSort | Boolean | false |【开发中】是否开始拖拽排序，会显示拖拽图标 | N
 expandedRow | String / Slot / Function | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode<{ row: T; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 expandedRowKeys | Array | [] | 展开行。支持语法糖。TS 类型：`Array<string | number>` | N
 defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array<string | number>` | N

From cedc080a8150e414bfd1c065adb6a03be7573882 Mon Sep 17 00:00:00 2001
From: chaishi <yaoyanhuoyi@qq.com>
Date: Wed, 29 Dec 2021 18:32:20 +0800
Subject: [PATCH 6/6] feat: update common

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index 6c23b6cf0..15a17e85b 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 6c23b6cf04788fba2ba55ee05097ca5e829a69a1
+Subproject commit 15a17e85be728ef6446793a2ad5e844c87a7f5b8