Fix enhanced table (#94)

* fix(table): ellipsis is invalid in first column of enhanced table * fix(table): tree data is error with pagination * test(table): update snapshots * fix(table): scrollContainer is undefined * docs(table): set dragSort to be developing * feat: update common Co-authored-by: chaishi <[email protected]>
Tencent · Dec 29, 2021 · cc3eca1 · cc3eca1
1 parent 3c184ac
commit cc3eca1
Show file tree

Hide file tree

Showing 11 changed files with 202 additions and 118 deletions.
diff --git 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,25 +144,25 @@ 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;
       border-radius: 50%;
     }
   }
   .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
@@ -1,6 +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
@@ -9,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' }"` -->
@@ -27,51 +27,62 @@
       :columns="columns"
       :tree="{ indent: 12, treeNodeColumnIndex: 1, childrenKey: 'list' }"
     ></t-enhanced-table> -->
-
   </div>
 </template>
 <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: '数据源',
+    };
+    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;
     });
-    secondObj.list = new Array(3).fill(null).map((m, n) => ({
-      ...obj,
-      key: `我是 ${secondIndex * 1000 + (100 * m) + ((n + 1) * 10)} 号`,
-    }));
-    return secondObj;
-  });
-  data.push(obj);
+    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: '200',
+          width: 200,
           className: 'row',
           colKey: 'key',
           title: '编号',
+          ellipsis: true,
         },
         {
           colKey: 'platform',
@@ -83,26 +94,23 @@ export default {
         },
         {
           colKey: 'operate',
-          width: 350,
+          width: 300,
           title: '操作',
           align: 'center',
           // 增、删、改、查 等操作
           // 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>
@@ -168,6 +176,14 @@ export default {
       });
       this.$message.success(`已插入子节点我是 ${randomKey} 号，请展开查看`);
     },
+
+    onPageChange(pageInfo) {
+      this.pagination = {
+        ...this.pagination,
+        ...pageInfo,
+      };
+      this.data = getData(pageInfo.current);
+    },
   },
 };
 </script>

diff --git 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
diff --git 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
@@ -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;
@@ -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;

diff --git 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();
+2 −1		.github/workflows/pull-request.yml
+24 −0		docs/mobile/api/action-sheet.md
+31 −0		docs/mobile/api/badge.md
+27 −0		docs/mobile/api/cell.md
+19 −0		docs/mobile/api/checkbox.md
+21 −0		docs/mobile/api/collapse.md
+15 −0		docs/mobile/api/count-down.md
+25 −0		docs/mobile/api/dialog.md
+27 −0		docs/mobile/api/divider.md
+15 −0		docs/mobile/api/drawer.md
+37 −0		docs/mobile/api/dropdown-menu.md
+19 −0		docs/mobile/api/fab.md
+7 −0		docs/mobile/api/icon.md
+11 −0		docs/mobile/api/indexes.md
+25 −0		docs/mobile/api/input.md
+36 −0		docs/mobile/api/message.md
+20 −0		docs/mobile/api/navbar.md
+46 −0		docs/mobile/api/notice-bar.md
+11 −0		docs/mobile/api/picker.md
+41 −0		docs/mobile/api/popup.md
+23 −0		docs/mobile/api/preview.md
+27 −0		docs/mobile/api/progress.md
+17 −0		docs/mobile/api/radio.md
+43 −0		docs/mobile/api/rate.md
+17 −0		docs/mobile/api/search-field.md
+12 −0		docs/mobile/api/segmented-control.md
+33 −0		docs/mobile/api/slider.md
+25 −0		docs/mobile/api/stepper.md
+33 −0		docs/mobile/api/steps.md
+23 −0		docs/mobile/api/swiper.md
+23 −0		docs/mobile/api/switch.md
+30 −0		docs/mobile/api/tab-bar.md
+25 −0		docs/mobile/api/tabs.md
+45 −0		docs/mobile/api/tag.md
+33 −0		docs/mobile/api/toast.md
+1 −1		js/tree/tree-node.ts
+10 −12		style/mobile/components/tag/_index.less
+0 −1		style/web/components/table/_index.less