feat(table): 支持自定义树形结构图标；支持隐藏排序文本提示 (#863)

* docs(notification): 插件调用与函数式调用 * fix(table): merged cells border style * feat(table): 支持自定义树形结构图标；支持隐藏排序文本提示 * feat(table): update common Co-authored-by: sheepluo <sheepluo@tencent.com>
Tencent · May 11, 2022 · f57b3e7 · f57b3e7
1 parent 290d3b6
commit f57b3e7
Show file tree

Hide file tree

Showing 16 changed files with 575 additions and 454 deletions.
diff --git a/examples/config-provider/config-provider.md b/examples/config-provider/config-provider.md
@@ -30,20 +30,19 @@ tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N
 treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N
 upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N
 
-### InputConfig
+### TreeSelectConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-placeholder | String | - | 语言配置，“请输入”占位符描述文本 | N
+empty | String | - | 语言配置，“暂无数据”描述文本 | N
+loadingText | String | - | 语言配置，“加载中”描述文本 | N
+placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N
 
-### PaginationConfig
+### InputConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-itemsPerPage | String | - | 语言配置，每页条数文本，示例：`'{size} 条/页'` | N
-jumpTo | String | - | 语言配置，页码跳转文本，示例：'跳至' | N
-page | String | - | 语言配置，“页”描述文本 | N
-total | String | - | 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` | N
+placeholder | String | - | 语言配置，“请输入”占位符描述文本 | N
 
 ### CalendarConfig
 
@@ -79,23 +78,19 @@ clearConfirmText | String | - | 语言配置，“确定清空最近使用的颜
 recentColorTitle | String | - | 语言配置，“最近使用颜色” 区域标题文本 | N
 swatchColorTitle | String | - | 语言配置，"系统预设颜色" 区域标题文本 | N
 
-### TransferConfig
+### AnchorConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N
-placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N
-title | String | - | 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” | N
+copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N
+copyText | String | - | 语言配置，“复制链接” 描述文本 | N
 
-### TimePickerConfig
+### AlertConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-anteMeridiem | String | - | 语言配置，“上午”描述文本 | N
-confirm | String | - | 语言配置，“确定”描述文本 | N
-now | String | - | 语言配置，“此刻”描述文本 | N
-placeholder | String | - | 语言配置，"请选择时间"占位符描述文本 | N
-postMeridiem | String | - | 语言配置，“下午”描述文本 | N
+collapseText | String | - | 语言配置，“收起”描述文本 | N
+expandText | String | - | 语言配置，“展开更多”描述文本 | N
 
 ### DatePickerConfig
 
@@ -139,6 +134,39 @@ confirmBtnTheme | Object | - | 确认按钮主题色，即 Dialog 的 `theme`
 cancel | String | - | 语言配置，“取消”描述文本。TS 类型：`string | ButtonProps` | N
 confirm | String | - | 语言配置，“确认”描述文本。TS 类型：`string | ButtonProps` | N
 
+### FormConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
+requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N
+
+### UploadConfigFileList
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+fileNameText | String | - | 语言配置，“文件名” 描述文本 | N
+fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N
+fileOperationText | String | - | 语言配置，“操作” 描述文本 | N
+fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N
+fileStatusText | String | - | 语言配置，“状态” 描述文本 | N
+
+### ListConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+loadingMoreText | String | - | 语言配置，'点击加载更多' 描述文本 | N
+loadingText | String | - | 语言配置，'正在加载中，请稍后' 描述文本 | N
+
+### PaginationConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+itemsPerPage | String | - | 语言配置，每页条数文本，示例：`'{size} 条/页'` | N
+jumpTo | String | - | 语言配置，页码跳转文本，示例：'跳至' | N
+page | String | - | 语言配置，“页”描述文本 | N
+total | String | - | 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` | N
+
 ### PopconfirmConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -158,8 +186,9 @@ columnConfigDescriptionText | String | - | 语言配置，“请选择需要在
 columnConfigTitleText | String | - | 语言配置，“表格列配置” 描述文本，列配置功能中弹框的标题 | N
 confirmText | String | - | 语言配置，“确认” 描述文本 | N
 empty | String / Slot / Function | - | 语言配置，“暂无数据” 描述文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-expandIcon | Slot / Function | undefined | 展开和收起图标（配置传入收起图标即可），如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-filterIcon | Slot / Function | undefined | 过滤图标，如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+expandIcon | Slot / Function | undefined | 展开和收起图标（配置传入收起图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+filterIcon | Slot / Function | undefined | 过滤图标，如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+hideSortTips | Boolean | false | 隐藏排序文本提示 | N
 loadingMoreText | String | - | 语言配置，“点击加载更多” 描述文本 | N
 loadingText | String | - | 语言配置，“正在加载中，请稍后” 描述文本 | N
 resetText | String | - | 语言配置，“重置” 描述文本 | N
@@ -168,7 +197,14 @@ selectAllText | String | - | 语言配置，'全选' 描述文本 | N
 sortAscendingOperationText | String | - | 语言配置，'点击升序' 描述文本 | N
 sortCancelOperationText | String | - | 语言配置，'点击取消排序' 描述文本 | N
 sortDescendingOperationText | String | - | 语言配置，'点击降序' 描述文本 | N
-sortIcon | Slot / Function | undefined | 排序图标（配置传入降序图标即可），如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+sortIcon | Slot / Function | undefined | 排序图标（配置传入降序图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+treeExpandAndFoldIcon | Function | undefined | 树形结构，展开和折叠图标。如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode<{ type: 'expand' | 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+
+### StepsConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 
 ### SelectConfig
 
@@ -179,27 +215,36 @@ empty | String | - | 语言配置，“暂无数据”描述文本 | N
 loadingText | String | - | 语言配置，“加载中”描述文本 | N
 placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N
 
-### TreeConfig
+### TagConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-empty | String | - | 语言配置，“暂无数据”描述文本 | N
-folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 
-### TreeSelectConfig
+### TimePickerConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-empty | String | - | 语言配置，“暂无数据”描述文本 | N
-loadingText | String | - | 语言配置，“加载中”描述文本 | N
-placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N
+anteMeridiem | String | - | 语言配置，“上午”描述文本 | N
+confirm | String | - | 语言配置，“确定”描述文本 | N
+now | String | - | 语言配置，“此刻”描述文本 | N
+placeholder | String | - | 语言配置，"请选择时间"占位符描述文本 | N
+postMeridiem | String | - | 语言配置，“下午”描述文本 | N
 
-### ListConfig
+### TransferConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-loadingMoreText | String | - | 语言配置，'点击加载更多' 描述文本 | N
-loadingText | String | - | 语言配置，'正在加载中，请稍后' 描述文本 | N
+empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N
+placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N
+title | String | - | 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” | N
+
+### TreeConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+empty | String | - | 语言配置，“暂无数据”描述文本 | N
+folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 
 ### UploadConfig
 
@@ -212,15 +257,6 @@ progress | Object | - | 语言配置，上传进度相关。示例：{ uploadTex
 sizeLimitMessage | String | - | 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'` | N
 triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传',  fileInput: '选择文件',reupload: '重新上传',fileInput: '删除' }。TS 类型：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string,  fileInput?: string,  reupload?: string, continueUpload: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
 
-### UploadConfigProgress
-
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-failText | String | - | 语言配置，“上传失败”文本描述 | N
-successText | String | - | 语言配置，“上传成功”文本描述 | N
-uploadingText | String | - | 语言配置，“上传中”文本描述 | N
-waitingText | String | - | 语言配置，“待上传”文本描述 | N
-
 ### UploadConfigDragger
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -229,45 +265,11 @@ clickAndDragText | String | - | 语言配置，“ 点击上方“选择文件
 dragDropText | String | - | 语言配置，“释放图标” 描述文本 | N
 draggingText | String | - | 语言配置，'拖拽到此区域' 描述文本 | N
 
-### UploadConfigFileList
-
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-fileNameText | String | - | 语言配置，“文件名” 描述文本 | N
-fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N
-fileOperationText | String | - | 语言配置，“操作” 描述文本 | N
-fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N
-fileStatusText | String | - | 语言配置，“状态” 描述文本 | N
-
-### FormConfig
-
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
-requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N
-
-### TagConfig
-
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-
-### StepsConfig
-
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-
-### AlertConfig
-
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-collapseText | String | - | 语言配置，“收起”描述文本 | N
-expandText | String | - | 语言配置，“展开更多”描述文本 | N
-
-### AnchorConfig
+### UploadConfigProgress
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N
-copyText | String | - | 语言配置，“复制链接” 描述文本 | N
+failText | String | - | 语言配置，“上传失败”文本描述 | N
+successText | String | - | 语言配置，“上传成功”文本描述 | N
+uploadingText | String | - | 语言配置，“上传中”文本描述 | N
+waitingText | String | - | 语言配置，“待上传”文本描述 | N
diff --git a/examples/config-provider/demos/table.vue b/examples/config-provider/demos/table.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="jsx">
-import { ChevronRightIcon, CaretDownSmallIcon } from 'tdesign-icons-vue';
+import { ChevronRightIcon, CaretDownSmallIcon /** , ChevronDownIcon */ } from 'tdesign-icons-vue';
 import merge from 'lodash/merge';
 import enConfig from 'tdesign-vue/es/locale/en_US';
 
@@ -65,6 +65,7 @@ export default {
           // sortAscendingOperationText: 'ascending sort',
           // sortCancelOperationText: 'cancel sort',
           // sortDescendingOperationText: 'descending sort',
+          // treeExpandAndFoldIcon: (h, { type }) => type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />,
         },
       }),
       columns,

diff --git a/examples/table/demos/single-sort.vue b/examples/table/demos/single-sort.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="tdesign-demo-block-column-large demo-container">
+    <div>
+      <t-checkbox v-model="hideSortTips"> 隐藏排序文本提示 </t-checkbox>
+      <span style="padding-left: 16px; vertical-align: top">排序：{{ sort }}</span>
+    </div>
+
     <!-- 非受控用法：不需要传 sort，或者只需要传 defaultSort: { sortBy: 'status', descending: true }），defaultSort 仅第一次有效 -->
     <!-- 非受控用法，示例代码有效，勿删 -->
     <!-- <t-table rowKey="id" :columns="columns" :data="data" @sort-change="defaultSortChange">
@@ -10,13 +15,13 @@
       </template>
     </t-table> -->
 
-    <p>排序：{{ sort }}</p>
     <!-- 受控用法，示例代码有效，勿删 -->
     <t-table
       rowKey="id"
       :columns="columns"
       :data="data"
       :sort="sort"
+      :hideSortTips="hideSortTips"
       bordered
       @sort-change="sortChange"
       @change="onChange"
@@ -62,6 +67,7 @@ export default {
     return {
       data,
       columns,
+      hideSortTips: false,
       sort: {
         // 按照 status 字段进行排序
         sortBy: 'status',

diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue
@@ -3,6 +3,9 @@
     <div>
       <t-button theme="default" @click="setData1">重置数据</t-button>
       <t-button theme="default" style="margin-left: 16px" @click="onRowToggle">展开/收起可见行</t-button>
+      <t-checkbox v-model="customTreeExpandAndFoldIcon" style="margin-left: 16px; vertical-align: middle">
+        自定义折叠/展开图标
+      </t-checkbox>
     </div>
     <br />
     <!-- 第一列展开树结点，缩进为 24px，子节点字段 childrenKey 默认为 children -->
@@ -14,6 +17,7 @@
       :data="data"
       :columns="columns"
       :tree="{ childrenKey: 'list', treeNodeColumnIndex: 1 }"
+      :tree-expand-and-fold-icon="customTreeExpandAndFoldIcon ? treeExpandAndFoldIconRender : undefined"
       :pagination="pagination"
       @page-change="onPageChange"
     ></t-enhanced-table>
@@ -34,6 +38,7 @@
 </template>
 <script lang="jsx">
 import { EnhancedTable } from 'tdesign-vue';
+import { ChevronRightIcon, ChevronDownIcon } from 'tdesign-icons-vue';
 
 function getData(currentPage = 1) {
   const data = [];
@@ -82,6 +87,7 @@ export default {
   components: { TEnhancedTable: EnhancedTable },
   data() {
     return {
+      customTreeExpandAndFoldIcon: false,
       data,
       pagination: {
         current: 1,
@@ -206,6 +212,11 @@ export default {
         // this.$refs.table.toggleExpandData({ rowIndex: rowData.rowIndex, row: rowData.row });
       });
     },
+
+    // eslint-disable-next-line
+    treeExpandAndFoldIconRender(h, { type }) {
+      return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
+    },
   },
 };
 </script>