[Table] support group columns (#2810)

* feat(table): column controller * test(table): update snapshots * fix(table): props.locale * fix: lint error * fix: lint error
Tencent · Sep 18, 2023 · 2b0f6f7 · 2b0f6f7
1 parent f27c0d3
commit 2b0f6f7
Show file tree

Hide file tree

Showing 22 changed files with 587 additions and 107 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/config-provider/useConfig.tsx b/src/config-provider/useConfig.tsx
@@ -1,4 +1,6 @@
-import { inject, h, ref } from '@vue/composition-api';
+import {
+  inject, h, ref, computed,
+} from '@vue/composition-api';
 import { GlobalConfigProvider, defaultGlobalConfig } from './context';
 
 // 处理正则表达式
@@ -29,11 +31,15 @@ const t = function <T> (pattern: T, ...args: any[]) {
  * @returns {t, global}
  * useConfig('pagination')
  */
-export function useConfig<T extends keyof GlobalConfigProvider>(componentName?: T) {
+export function useConfig<T extends keyof GlobalConfigProvider>(
+  componentName: T = undefined,
+  componentLocale?: GlobalConfigProvider[T],
+) {
   const injectGlobalConfig = inject<GlobalConfigProvider>('globalConfig', null);
   const mergedGlobalConfig = injectGlobalConfig || defaultGlobalConfig;
 
-  const global = ref(mergedGlobalConfig[componentName]);
+  // eslint-disable-next-line
+  const global = computed(() => Object.assign({}, mergedGlobalConfig[componentName], componentLocale));
   const classPrefix = ref(mergedGlobalConfig.classPrefix);
 
   return {

diff --git a/src/table/_example/custom-col-button.vue b/src/table/_example/custom-col-button.vue
@@ -10,6 +10,7 @@
       </t-radio-group>
 
       <t-space>
+        <t-checkbox v-model="groupColumn">分组列配置</t-checkbox>
         <t-checkbox v-model="bordered">是否显示边框</t-checkbox>
         <t-checkbox v-model="customText" style="margin-left: 16px">自定义列配置按钮</t-checkbox>
       </t-space>
@@ -19,18 +20,13 @@
     <!-- 2. displayColumns 动态设置显示哪些列，受控属性，支持 displayColumns.sync 语法糖 -->
     <!-- 3. onDisplayColumnsChange 当前显示列发生变化时触发 -->
     <!-- 4. 如果希望顶部内容 和 列配置按钮 保持在同一行，可将内容放在 topContent，并调整按钮父元素宽度(CSS) -->
-    <!-- 受控用法，示例代码有效，勿删  -->
+    <!-- :locale="tableLocale" 可用于定义列配置弹框所有文本信息 -->
     <t-table
       rowKey="index"
       :data="data"
       :columns="columns"
       :displayColumns.sync="displayColumns"
-      :columnController="{
-        placement,
-        fields: ['channel', 'detail.email', 'createTime'],
-        dialogProps: { preventScrollThrough: true },
-        buttonProps: customText ? { content: '显示列控制', theme: 'primary', variant: 'base' } : undefined,
-      }"
+      :column-controller="columnControllerConfig"
       :pagination="{ defaultPageSize: 5, defaultCurrent: 1, total: 100 }"
       :bordered="bordered"
       drag-sort="col"
@@ -70,17 +66,41 @@ for (let i = 0; i < 100; i++) {
     matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
     time: [2, 3, 1, 4][i % 4],
     createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
+    data1: '123',
+    data2: '23414',
+    data3: '52435',
+    data4: '132434',
   });
 }
 
 const staticColumn = ['applicant', 'status'];
+
+const GROUP_COLUMNS = [
+  {
+    label: '指标维度',
+    value: 'index',
+    columns: ['applicant', 'status', 'channel'],
+  },
+  {
+    label: '次要维度',
+    value: 'secondary',
+    columns: ['detail.email', 'createTime'],
+  },
+  {
+    label: '数据维度',
+    value: 'data',
+    columns: ['data1', 'data2', 'data3', 'data4'],
+  },
+];
+
 export default {
   data() {
     return {
       data: initialData,
       placement: 'top-right',
       customText: false,
       bordered: true,
+      groupColumn: false,
       displayColumns: staticColumn.concat(['channel', 'detail.email', 'createTime']),
       columns: [
         { colKey: 'applicant', title: '申请人', width: '100' },
@@ -105,10 +125,29 @@ export default {
         { colKey: 'channel', title: '签署方式', width: '120' },
         { colKey: 'detail.email', title: '邮箱地址', ellipsis: true },
         { colKey: 'createTime', title: '申请时间' },
+        { colKey: 'data1', title: 'Data A', align: 'right' },
+        { colKey: 'data2', title: 'Data B', align: 'right' },
+        { colKey: 'data3', title: 'Data C', align: 'right' },
+        { colKey: 'data4', title: 'Data D', align: 'right' },
       ],
     };
   },
 
+  computed: {
+    columnControllerConfig() {
+      return {
+        placement: this.placement,
+        fields: ['channel', 'detail.email', 'createTime', 'data1', 'data2', 'data3', 'data4'],
+        // 弹框组件属性透传
+        dialogProps: { preventScrollThrough: true },
+        // 列配置按钮属性头像
+        buttonProps: this.customText ? { content: '显示列控制', theme: 'primary', variant: 'base' } : undefined,
+        // 数据字段分组显示
+        groupColumns: this.groupColumn ? GROUP_COLUMNS : undefined,
+      };
+    },
+  },
+
   methods: {
     onColumnChange(params) {
       console.log(params);

diff --git a/src/table/_example/custom-col.vue b/src/table/_example/custom-col.vue
@@ -1,33 +1,38 @@
 <template>
   <div class="tdesign-demo-block-column-large tdesign-demo__table">
     <!-- 按钮操作区域 -->
-    <div>
+    <t-space align="center">
       <t-button @click="columnControllerVisible = true">显示列配置弹窗</t-button>
-    </div>
+      <t-checkbox v-model="groupColumn">分组列配置</t-checkbox>
+    </t-space>
 
     <!-- 1. defaultDisplayColumns = ['platform'] 设置默认显示哪些列，仅第一次有效 -->
     <!-- 2. displayColumns 动态设置显示哪些列，受控属性，支持 displayColumns.sync 语法糖 -->
     <!-- 3. onDisplayColumnsChange 当前显示列发生变化时触发 -->
     <!-- 4. 开启 resizable 之后，请勿使用 tableLayout: auto -->
-    <!-- 受控用法，示例代码有效，勿删  -->
+    <!-- :locale="tableLocale" 可用于定义列配置弹框所有文本信息 -->
     <t-table
       rowKey="index"
       :data="data"
       :columns="columns"
       :displayColumns.sync="displayColumns"
       :columnControllerVisible.sync="columnControllerVisible"
-      :columnController="{
-        fields: ['channel', 'detail.email', 'createTime'],
-        dialogProps: { preventScrollThrough: true },
-        hideTriggerButton: true,
-      }"
+      :column-controller="columnControllerConfig"
+      :locale="tableLocale"
       :pagination="{ defaultPageSize: 5, defaultCurrent: 1, total: 100 }"
       stripe
       resizable
       lazyLoad
       @column-resize-change="onColumnResizeChange"
       @column-change="onColumnChange"
-    ></t-table>
+    >
+      <template #columnControllerTopContent>
+        <div>You can custom top content of column controller dialog.</div>
+      </template>
+      <template #columnControllerBottomContent>
+        <div>You can custom bottom content of column controller dialog.</div>
+      </template>
+    </t-table>
     <!-- :on-column-resize-change="onColumnResizeChange" -->
   </div>
 </template>
@@ -47,15 +52,42 @@ for (let i = 0; i < 100; i++) {
     matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
     time: [2, 3, 1, 4][i % 4],
     createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
+    data1: '123',
+    data2: '23414',
+    data3: '52435',
+    data4: '132434',
   });
 }
 
+const GROUP_COLUMNS = [
+  {
+    label: '指标维度',
+    value: 'index',
+    columns: ['applicant', 'status', 'channel'],
+  },
+  {
+    label: '次要维度',
+    value: 'secondary',
+    columns: ['detail.email', 'createTime'],
+  },
+  {
+    label: '数据维度',
+    value: 'data',
+    columns: ['data1', 'data2', 'data3', 'data4'],
+  },
+];
+
 const staticColumn = ['applicant', 'status'];
 export default {
   data() {
     return {
       data,
       columnControllerVisible: false,
+      tableLocale: {
+        columnConfigDescriptionText: 'Please check columns need to show in table.',
+      },
+      // show columns in controller dialog by group
+      groupColumn: true,
       displayColumns: staticColumn.concat(['channel', 'detail.email', 'createTime']),
       columns: [
         { colKey: 'applicant', title: '申请人', width: '100' },
@@ -80,10 +112,29 @@ export default {
         { colKey: 'channel', title: '签署方式', width: '120' },
         { colKey: 'detail.email', title: '邮箱地址', ellipsis: true },
         { colKey: 'createTime', title: '申请时间' },
+        { colKey: 'data1', title: 'Data A', align: 'right' },
+        { colKey: 'data2', title: 'Data B', align: 'right' },
+        { colKey: 'data3', title: 'Data C', align: 'right' },
+        { colKey: 'data4', title: 'Data D', align: 'right' },
       ],
     };
   },
 
+  computed: {
+    columnControllerConfig() {
+      return {
+        // 隐藏组件内部的 列配置按钮
+        hideTriggerButton: true,
+        // 允许哪些列参与显示-隐藏控制
+        fields: ['channel', 'detail.email', 'createTime', 'data1', 'data2', 'data3', 'data4'],
+        // 透传弹框组件全部属性
+        dialogProps: { preventScrollThrough: true },
+        // 数据字段分组显示
+        groupColumns: this.groupColumn ? GROUP_COLUMNS : undefined,
+      };
+    },
+  },
+
   methods: {
     onColumnChange(params) {
       console.log(params);

diff --git a/src/table/base-table-props.ts b/src/table/base-table-props.ts
@@ -8,6 +8,21 @@ import { TdBaseTableProps } from '../table/type';
 import { PropType } from 'vue';
 
 export default {
+  /** 高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为 */
+  activeRowKeys: {
+    type: Array as PropType<TdBaseTableProps['activeRowKeys']>,
+    default: undefined,
+  },
+  /** 高亮行，支持鼠标键盘操作(Shift)连续高亮行，可用于处理行选中等批量操作，模拟操作系统区域选择行为，非受控属性 */
+  defaultActiveRowKeys: {
+    type: Array as PropType<TdBaseTableProps['defaultActiveRowKeys']>,
+    default: (): TdBaseTableProps['defaultActiveRowKeys'] => [],
+  },
+  /** 默认不会高亮点击行，`activeRowType=single` 表示鼠标点击仅允许同时高亮一行，Shift 键盘操作加鼠标操作依然可以高亮多行，因为这属于明显的区域选择行为。`activeRowType= multiple ` 表示允许鼠标点击同时高亮多行 */
+  activeRowType: {
+    type: String as PropType<TdBaseTableProps['activeRowType']>,
+    default: '',
+  },
   /** 已废弃。是否允许调整列宽。请更为使用 `resizable` */
   allowResizeColumnWidth: {
     type: Boolean,
@@ -39,6 +54,11 @@ export default {
   },
   /** 是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页 */
   disableDataPage: Boolean,
+  /** 默认重复按下 Space 键可取消当前行高亮，是否禁用取消 */
+  disableSpaceInactiveRow: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 空表格呈现样式，支持全局配置 `GlobalConfigProvider` */
   empty: {
     type: [String, Function] as PropType<TdBaseTableProps['empty']>,
@@ -89,6 +109,11 @@ export default {
   },
   /** 是否显示鼠标悬浮状态 */
   hover: Boolean,
+  /** 键盘操作行显示悬浮效果，一般用于键盘操作行选中、行展开、行高亮等功能 */
+  keyboardRowHover: {
+    type: Boolean,
+    default: true,
+  },
   /** 尾行内容，横跨所有列 */
   lastFullRow: {
     type: [String, Function] as PropType<TdBaseTableProps['lastFullRow']>,
@@ -104,6 +129,10 @@ export default {
   loadingProps: {
     type: Object as PropType<TdBaseTableProps['loadingProps']>,
   },
+  /** 语言配置 */
+  locale: {
+    type: Object as PropType<TdBaseTableProps['locale']>,
+  },
   /** 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px */
   maxHeight: {
     type: [String, Number] as PropType<TdBaseTableProps['maxHeight']>,
@@ -187,6 +216,10 @@ export default {
       return ['top', 'middle', 'bottom'].includes(val);
     },
   },
+  /** 高亮行发生变化时触发，泛型 T 指表格数据类型。参数 `activeRowList` 表示所有高亮行数据， `currentRowData` 表示当前操作行数据 */
+  onActiveChange: Function as PropType<TdBaseTableProps['onActiveChange']>,
+  /** 键盘操作事件。开启行高亮功能后，会自动开启键盘操作功能，如：通过键盘(Shift)或鼠标操作连续选中高亮行时触发，一般用于处理行选中等批量操作，模拟操作系统区域选择行为 */
+  onActiveRowAction: Function as PropType<TdBaseTableProps['onActiveRowAction']>,
   /** 单元格点击时触发 */
   onCellClick: Function as PropType<TdBaseTableProps['onCellClick']>,
   /** 列调整大小之后触发。`context.columnsWidth` 表示操作后各个列的宽度； */

diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx
@@ -68,7 +68,7 @@ export default defineComponent({
     const {
       tableClasses, sizeClassNames, tableContentStyles, tableElementStyles,
     } = useStyle(props);
-    const { global } = useConfig('table');
+    const { global } = useConfig('table', props.locale);
     const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader(props);
     const finalColumns = computed(() => spansAndLeafNodes.value?.leafColumns || props.columns);
     const isIE = computed(() => getIEVersion() <= 11);