fix(table): table empty node can not keep same width as table (#1454)

* fix(table): refresh table on table resize * fix(table): resizeObserver is not defined * feat(table): resizeObserver could be undefined * feat(table): some features * test(table): update snapshots * docs(table): add documents * feat: update common
Tencent · Sep 5, 2022 · 63d3f71 · 63d3f71
1 parent 9b78408
commit 63d3f71
Show file tree

Hide file tree

Showing 19 changed files with 271 additions and 900 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/alert/__tests__/__snapshots__/demo.test.js.snap b/src/alert/__tests__/__snapshots__/demo.test.js.snap
@@ -616,66 +616,73 @@ exports[`Alert Alert iconVue demo works fine 1`] = `
 `;
 
 exports[`Alert Alert operationVue demo works fine 1`] = `
-<t-sapce>
+<div
+  class="t-space t-space-horizontal"
+  style="gap: 16px;"
+>
   <div
-    class="t-alert t-alert--info"
+    class="t-space-item"
   >
     <div
-      class="t-alert__icon"
-    >
-      <svg
-        class="t-icon t-icon-info-circle-filled"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-    </div>
-    <div
-      class="t-alert__content"
+      class="t-alert t-alert--info"
     >
       <div
-        class="t-alert__message"
+        class="t-alert__icon"
       >
-        <div
-          class="t-alert__description"
+        <svg
+          class="t-icon t-icon-info-circle-filled"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
         >
-          这是一条普通的消息提示
-        </div>
+          <path
+            d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-alert__content"
+      >
         <div
-          class="t-alert__operation"
+          class="t-alert__message"
         >
-          <span>
-            相关操作
-          </span>
+          <div
+            class="t-alert__description"
+          >
+            这是一条普通的消息提示
+          </div>
+          <div
+            class="t-alert__operation"
+          >
+            <span>
+              相关操作
+            </span>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="t-alert__close"
-    >
-      <svg
-        class="t-icon t-icon-close"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+      <div
+        class="t-alert__close"
+      >
+        <svg
+          class="t-icon t-icon-close"
+          fill="none"
+          height="1em"
+          viewBox="0 0 16 16"
+          width="1em"
+        >
+          <path
+            d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
     </div>
   </div>
-</t-sapce>
+</div>
 `;
 
 exports[`Alert Alert titleVue demo works fine 1`] = `

diff --git a/src/alert/_example/operation.vue b/src/alert/_example/operation.vue
@@ -1,11 +1,11 @@
 <template>
-  <t-sapce>
+  <t-space>
     <t-alert theme="info" message="这是一条普通的消息提示" close>
       <template #operation>
         <span @click="handleOperation">相关操作</span>
       </template>
     </t-alert>
-  </t-sapce>
+  </t-space>
 </template>
 <script lang="jsx">
 export default {

diff --git a/src/table/__tests__/__snapshots__/demo.test.js.snap b/src/table/__tests__/__snapshots__/demo.test.js.snap
@@ -21563,55 +21563,76 @@ exports[`Table Table treeSelectVue demo works fine 1`] = `
 <div
   class="t-table-tree-select-demo"
 >
-  <div>
+  <div
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
+  >
     <div
-      class="t-radio-group t-size-m t-radio-group--filled"
+      class="t-space-item"
     >
-      <label
-        class="t-radio-button t-is-checked"
+      <div
+        class="t-radio-group t-size-m t-radio-group--filled"
       >
-        <input
-          class="t-radio-button__former"
-          name=""
-          type="radio"
-          value="true"
-        />
-        <span
-          class="t-radio-button__input"
-        />
-        <span
-          class="t-radio-button__label"
+        <label
+          class="t-radio-button t-is-checked"
         >
-          父子行选中独立
-        </span>
-      </label>
-
-      <label
-        class="t-radio-button"
-      >
-        <input
-          class="t-radio-button__former"
-          name=""
-          type="radio"
-          value="false"
-        />
-        <span
-          class="t-radio-button__input"
-        />
-        <span
-          class="t-radio-button__label"
+          <input
+            class="t-radio-button__former"
+            name=""
+            type="radio"
+            value="true"
+          />
+          <span
+            class="t-radio-button__input"
+          />
+          <span
+            class="t-radio-button__label"
+          >
+            父子行选中独立
+          </span>
+        </label>
+         
+        <label
+          class="t-radio-button"
         >
-          <span>
-
+          <input
+            class="t-radio-button__former"
+            name=""
+            type="radio"
+            value="false"
+          />
+          <span
+            class="t-radio-button__input"
+          />
+          <span
+            class="t-radio-button__label"
+          >
+            <span>
+
           父子行选中关联
 
+            </span>
           </span>
+        </label>
+        <div
+          class="t-radio-group__bg-block"
+          style="width: 0px; left: 0px;"
+        />
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <button
+        class="t-button t-size-m t-button--variant-base t-button--theme-default"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          获取树形结构展开的节点
         </span>
-      </label>
-      <div
-        class="t-radio-group__bg-block"
-        style="width: 0px; left: 0px;"
-      />
+      </button>
     </div>
   </div>
 

diff --git a/src/table/_example/editable-cell.vue b/src/table/_example/editable-cell.vue
@@ -16,6 +16,7 @@
 import {
   Input, Select, DatePicker, MessagePlugin,
 } from 'tdesign-vue';
+import dayjs from 'dayjs';
 
 const initData = new Array(5).fill(null).map((_, i) => ({
   key: String(i + 1),
@@ -86,7 +87,7 @@ export default {
         {
           title: 'Framework',
           colKey: 'framework',
-          cell: (h, { row }) => FRAMEWORK_OPTIONS.find((t) => t.value === row.framework).label,
+          cell: (h, { row }) => FRAMEWORK_OPTIONS.find((t) => t.value === row.framework)?.label,
           edit: {
             component: Select,
             // props, 透传全部属性到 Select 组件
@@ -155,6 +156,13 @@ export default {
               console.log('Edit Date:', context);
               MessagePlugin.success('Success');
             },
+            // 校验规则，此处同 Form 表单
+            rules: () => [
+              {
+                validator: (val) => dayjs(val).isAfter(dayjs()),
+                message: '只能选择今天以后日期',
+              },
+            ],
           },
         },
       ];

diff --git a/src/table/_example/tree-select.vue b/src/table/_example/tree-select.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="t-table-tree-select-demo">
-    <div>
+    <t-space>
       <t-radio-group v-model="checkStrictly" variant="default-filled">
         <t-radio-button value="true">父子行选中独立</t-radio-button>
         <t-radio-button value="false">
@@ -11,12 +11,15 @@
           </t-popup>
         </t-radio-button>
       </t-radio-group>
-    </div>
+
+      <t-button theme="default" @click="getTreeExpandedRow">获取树形结构展开的节点</t-button>
+    </t-space>
     <br />
     <!-- 子节点字段不是 children，而是 childrenList -->
     <!-- expandedRow 和 expanded-row-keys 控制是否显示展开收起行，以及哪些行展开 -->
     <!-- !!! EnhancedTable 才支持，普通 Table 不支持 !!! -->
     <t-enhanced-table
+      ref="enhancedTableRef"
       row-key="key"
       :expandedRow="expandedRowRender"
       :expanded-row-keys="expandedRowKeys"
@@ -34,7 +37,7 @@
 </template>
 
 <script lang="jsx">
-import { EnhancedTable } from 'tdesign-vue';
+import { EnhancedTable, MessagePlugin } from 'tdesign-vue';
 import cloneDeep from 'lodash/cloneDeep';
 
 const data = [];
@@ -133,6 +136,19 @@ export default {
     onExpandChange(val) {
       this.expandedRowKeys = val;
     },
+
+    getTreeExpandedRow() {
+      const treeExpandedRowKeys = this.$refs.enhancedTableRef.getTreeExpandedRow('unique');
+      console.log('行唯一标识值：', treeExpandedRowKeys);
+
+      const treeExpandedRow = this.$refs.enhancedTableRef.getTreeExpandedRow('data');
+      console.log('行数据：', treeExpandedRow);
+
+      const treeExpandedRowState = this.$refs.enhancedTableRef.getTreeExpandedRow('all');
+      console.log('全部行信息：', treeExpandedRowState);
+
+      MessagePlugin.success('获取成功，请打开控制台查看');
+    },
   },
 };
 </script>

diff --git a/src/table/_example/tree.vue b/src/table/_example/tree.vue
@@ -18,9 +18,7 @@
     <br />
     <!-- 第一列展开树结点，缩进为 24px，子节点字段 childrenKey 默认为 children -->
     <!-- !!! 树形结构 EnhancedTable 才支持，普通 Table 不支持 !!! -->
-    <!-- treeNodeColumnIndex 定义第几列作为树结点展开列，默认为第一列 -->
-    <!-- tree.defaultExpandAll: true 默认展开全部 -->
-    <!-- this.$refs.table.dataSource 查看树形结构平铺数据 -->
+    <!-- Ref: this.$refs.table.dataSource 查看树形结构平铺数据，获取属性结构使用 this.$refs.table.getTreeNode() -->
     <t-enhanced-table
       ref="table"
       rowKey="key"
@@ -209,11 +207,11 @@ export default {
   computed: {
     // 可以使用同名插槽代替渲染函数：<template #treeExpandAndFoldIcon><icon /></template>
     treeExpandIcon() {
-      // 懒加载图标渲染
-      if (this.lazyLoadingData) return this.lazyLoadingTreeIconRender;
       // 自定义展开图标
-      if (this.customTreeExpandAndFoldIcon) return this.treeExpandAndFoldIconRender;
-      return undefined;
+      if (this.customTreeExpandAndFoldIcon) {
+        return this.treeExpandAndFoldIconRender;
+      }
+      return this.lazyLoadingTreeIconRender;
     },
   },
 
@@ -333,7 +331,10 @@ export default {
     },
 
     // eslint-disable-next-line
-    treeExpandAndFoldIconRender(h, { type }) {
+    treeExpandAndFoldIconRender(h, { type, row }) {
+      if (this.lazyLoadingData && this.lazyLoadingData.id === row?.id) {
+        return <Loading size="14px" />;
+      }
       return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
     },
+5 −5		js/global-config/locale/en_US.ts
+3 −3		js/global-config/locale/ja_JP.ts
+1 −1		js/global-config/locale/ko_KR.ts
+1 −1		js/global-config/locale/zh_CN.ts
+1 −1		package.json
+1 −1		style/web/components/cascader/_index.less