feat(table): support TableColumnFilter.attrs .style .classNames (Tenc…

…ent#2629) * feat(table): support TableColumnFilter.attrs * feat(table): more attributes * refactor(table): custom filter component * revert(group): group value * feat(table): remove value from filter component * fix(table): styles -> style * fix(table): support selectedRowKeys which not exist in data
KMethod · Aug 25, 2023 · 5c84552 · 5c84552
1 parent c7376c4
commit 5c84552
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 11 deletions.
diff --git a/script/utils/index.js b/script/utils/index.js
@@ -1,6 +1,6 @@
+const fs = require('fs');
 const path = require('path');
 const clc = require('cli-color');
-const fs = require('fs');
 
 function deleteFolderRecursive(path) {
   if (fs.existsSync(path)) {

diff --git a/src/common.ts b/src/common.ts
@@ -72,7 +72,7 @@ export interface KeysType {
 }
 
 export interface HTMLElementAttributes {
-  [css: string]: string;
+  [attribute: string]: string;
 }
 
 export interface TScroll {

diff --git a/src/table/_example/filter-controlled.vue b/src/table/_example/filter-controlled.vue
@@ -173,6 +173,11 @@ export default {
             props: {
               firstDayOfWeek: 7,
             },
+            attrs: {
+              'data-id': 'attribute-id-value',
+            },
+            classNames: 'custom-class-name',
+            styles: { fontSize: '14px' },
             // 是否显示重置取消按钮，一般情况不需要显示
             showConfirmAndReset: true,
             // 日期范围是一个组件，重置时需赋值为 []

diff --git a/src/table/filter-controller.tsx b/src/table/filter-controller.tsx
@@ -135,15 +135,26 @@ export default defineComponent({
         if (!component) return null;
         const isVueComponent = component.install && component.component;
         if (typeof component === 'function' && !isVueComponent) {
+          // component() is going to be deprecated
           return component((v: FirstParams, b: SecondParams) => {
-            const tProps = typeof b === 'object' && 'attrs' in b ? b.attrs : {};
+            const attributes = typeof b === 'object' && 'attrs' in b ? b.attrs : {};
             return h(v, {
-              props: { ...filterComponentProps, ...tProps },
+              props: { ...filterComponentProps },
+              attrs: attributes,
               on,
             });
           });
         }
-        return <component props={{ ...filterComponentProps }} on={{ ...on }}></component>;
+        const filter = this.column.filter || {};
+        return (
+          <component
+            attrs={filter.attrs}
+            class={filter.classNames}
+            style={filter.style}
+            props={{ ...filterComponentProps }}
+            on={{ ...on }}
+          ></component>
+        );
       };
 
       return (

diff --git a/src/table/hooks/useTreeSelect.tsx b/src/table/hooks/useTreeSelect.tsx
@@ -139,6 +139,7 @@ export default function useTreeSelect(props: TdEnhancedTableProps, treeDataMap:
     for (let i = 0, len = tSelectedRowKeys.value.length; i < len; i++) {
       const rowValue = tSelectedRowKeys.value[i];
       const state = treeDataMap.value.get(rowValue);
+      if (!state) continue;
       const children = get(state.row, rowDataKeys.value.childrenKey);
       // 根据选中的叶子结点计算父节点半选状态
       if (!children || !children.length) {

diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md
@@ -261,13 +261,16 @@ rowIndex | Number | - | required | Y
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+attrs | Object | - | html attributes of component。Typescript：`HTMLElementAttributes`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+classNames | String | - | component class names。Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 component | Slot / Function | - | Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 confirmEvents | Array | - | Typescript：`string[]` | N
 list | Array | - | Typescript：`Array<OptionData>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
-props | Array | - | Typescript：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+props | Object | - | Typescript：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 resetValue | \- | - | Typescript：`any` | N
 showConfirmAndReset | Boolean | false | \- | N
+style | Object | - | styles of component。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 type | String | - | Typescript：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 
 ### TableColumnController

diff --git a/src/table/table.md b/src/table/table.md
@@ -261,14 +261,17 @@ rowIndex | Number | - | 必需。表格行下标，值为 `-1` 标识当前行
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+attrs | Object | - | 用于透传筛选器属性到自定义组件 `component`，HTML 原生属性。TS 类型：`HTMLElementAttributes`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+classNames | String | - | 透传类名到自定义组件 `component`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 component | Slot / Function | - | 用于自定义筛选器，只要保证自定义筛选器包含 value 属性 和 change 事件，即可像内置筛选器一样正常使用。示例：`component: DatePicker`。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 confirmEvents | Array | - | 哪些事件触发后会进行过滤搜索（确认按钮无需配置，会默认触发搜索）。输入框组件示例：`confirmEvents: ['onEnter']`。TS 类型：`string[]` | N
 list | Array | - | 用于配置当前筛选器可选值有哪些，仅当 `filter.type` 等于 `single` 或 `multiple` 时有效。TS 类型：`Array<OptionData>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 popupProps | Object | - | 透传 Popup 组件全部属性到筛选器浮层。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
-props | Array | - | 用于透传筛选器属性，可以对筛选器进行任何原组件支持的属性配置。TS 类型：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+props | Object | - | 用于透传筛选器属性到自定义组件 `component`，可以对筛选器进行任何原组件支持的属性配置。TS 类型：`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 resetValue | \- | - | 重置时设置的值，示例：'' 或 []。TS 类型：`any` | N
 showConfirmAndReset | Boolean | false | 是否显示重置和确认。值为真，过滤事件（filter-change）会在确定时触发；值为假，则数据变化时会立即触发过滤事件 | N
-type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。TS 类型：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+style | Object | - | 透传内联样式到自定义组件 `component`。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件，请更为使用 `component` 自定义任意组件。TS 类型：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 
 ### TableColumnController
 

diff --git a/src/table/type.ts b/src/table/type.ts
@@ -23,6 +23,7 @@ import {
   OptionData,
   SizeEnum,
   ClassName,
+  Styles,
   AttachNode,
   HTMLElementAttributes,
   ComponentType,
@@ -772,6 +773,15 @@ export interface TableRowState<T extends TableRowData = TableRowData> {
 }
 
 export interface TableColumnFilter {
+  /**
+   * 用于透传筛选器属性到自定义组件 `component`，HTML 原生属性
+   */
+  attrs?: HTMLElementAttributes;
+  /**
+   * 透传类名到自定义组件 `component`
+   * @default ''
+   */
+  classNames?: ClassName;
   /**
    * 用于自定义筛选器，只要保证自定义筛选器包含 value 属性 和 change 事件，即可像内置筛选器一样正常使用。示例：`component: DatePicker`
    */
@@ -789,7 +799,7 @@ export interface TableColumnFilter {
    */
   popupProps?: PopupProps;
   /**
-   * 用于透传筛选器属性，可以对筛选器进行任何原组件支持的属性配置
+   * 用于透传筛选器属性到自定义组件 `component`，可以对筛选器进行任何原组件支持的属性配置
    */
   props?: FilterProps;
   /**
@@ -802,7 +812,11 @@ export interface TableColumnFilter {
    */
   showConfirmAndReset?: boolean;
   /**
-   * 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器
+   * 透传内联样式到自定义组件 `component`
+   */
+  style?: Styles;
+  /**
+   * 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件，请更为使用 `component` 自定义任意组件
    * @default ''
    */
   type?: FilterType;

diff --git a/vitest.config.js b/vitest.config.js
@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
 import path from 'path';
+import { defineConfig } from 'vite';
 import { createVuePlugin } from 'vite-plugin-vue2';
 import ScriptSetup from 'unplugin-vue2-script-setup/vite';