feat(table): tableColumnFilter.attrs .style .classNames (#3164)

* feat(table): tableColumnFilter.attrs .style .classNames

* fix(table): selectedRowKeys include not exist keys throw error

src/common.ts

@@ -78,7 +78,7 @@ export interface KeysType {
 }
 
 export interface HTMLElementAttributes {
-  [css: string]: string;
+  [attribute: string]: string;
 }
 
 export interface TScroll {

src/table/_example/filter-controlled.vue

@@ -153,6 +153,9 @@ const columns = computed(() => [
       props: {
         firstDayOfWeek: 7,
       },
+      style: { fontSize: '14px' },
+      classNames: 'custom-class-name',
+      attrs: { 'data-type': 'date-range-picker' },
       // 是否显示重置取消按钮，一般情况不需要显示
       showConfirmAndReset: true,
       // 日期范围是一个组件，重置时需赋值为 []
@@ -161,7 +164,7 @@ const columns = computed(() => [
   },
 ]);
 
-const filterValue = ref({ channel: [], createTime: [] });
+const filterValue = ref({ channel: [] });
 const data = ref([...initData]);
 const bordered = ref(true);
 

src/table/filter-controller.tsx

@@ -79,7 +79,15 @@ export default defineComponent({
           });
         });
       }
-      return <component value={props.innerFilterValue?.[column.colKey]} {...filterComponentProps}></component>;
+      const filter = column.filter || {};
+      return (
+        <component
+          class={filter.classNames}
+          style={filter.style}
+          {...filter.attrs}
+          {...filterComponentProps}
+        ></component>
+      );
     };
 
     const getFilterContent = (column: PrimaryTableCol) => {
@@ -88,6 +96,7 @@ export default defineComponent({
         console.error(`TDesign Table Error: column.filter.type must be the following: ${JSON.stringify(types)}`);
         return;
       }
+      const { innerFilterValue } = props;
       const component =
         {
           single: RadioGroup,
@@ -98,14 +107,16 @@ export default defineComponent({
       const filterComponentProps: { [key: string]: any } = {
         options: ['single', 'multiple'].includes(column.filter.type) ? column.filter?.list : undefined,
         ...(column.filter?.props || {}),
-        value: props.innerFilterValue?.[column.colKey],
         onChange: (val: any, ctx: any) => {
           context.emit('inner-filter-change', val, column);
           if (column.filter.props?.onChange) {
             column.filter.props.onChange?.(val, ctx);
           }
         },
       };
+      if (column.colKey && innerFilterValue && column.colKey in innerFilterValue) {
+        filterComponentProps.value = props.innerFilterValue?.[column.colKey];
+      }
       // 允许自定义触发确认搜索的事件
       if (column.filter.confirmEvents) {
         column.filter.confirmEvents.forEach((event) => {

src/table/hooks/useTreeSelect.tsx

@@ -131,6 +131,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) {

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-next/blob/develop/src/common.ts) | N
+classNames | String | - | component class names。Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 component | Slot / Function | - | Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/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-next/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-next/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-next/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-next/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-next/tree/develop/src/table/type.ts) | N
 
 ### TableColumnController

src/table/table.md

@@ -261,14 +261,17 @@ rowIndex | Number | - | 必需。表格行下标，值为 `-1` 标识当前行
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+attrs | Object | - | 用于透传筛选器属性到自定义组件 `component`，HTML 原生属性。TS 类型：`HTMLElementAttributes`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+classNames | String | - | 透传类名到自定义组件 `component`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 component | Slot / Function | - | 用于自定义筛选器，只要保证自定义筛选器包含 value 属性 和 change 事件，即可像内置筛选器一样正常使用。示例：`component: DatePicker`。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts) | N
 popupProps | Object | - | 透传 Popup 组件全部属性到筛选器浮层。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/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-next/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-next/tree/develop/src/table/type.ts) | N
+style | Object | - | 透传内联样式到自定义组件 `component`。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件，请更为使用 `component` 自定义任意组件。TS 类型：`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/table/type.ts) | N
 
 ### TableColumnController
 

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;

test/unit/snap/__snapshots__/csr.test.js.snap

@@ -131433,8 +131433,7 @@ exports[`csr snapshot test > csr test ./src/table/_example/filter-controlled.vue
       style="padding-left: 36px;"
     >
       已选筛选条件：{
-  "channel": [],
-  "createTime": []
+  "channel": []
 }
     </span>
   </div>

test/unit/snap/__snapshots__/ssr.test.js.snap

@@ -1044,8 +1044,7 @@ exports[`ssr snapshot test > ssr test ./src/table/_example/expandable.vue 1`] =
 
 exports[`ssr snapshot test > ssr test ./src/table/_example/filter-controlled.vue 1`] = `
 "<div data-v-8850064e><div data-v-8850064e><div class=\\"t-radio-group t-size-m t-radio-group--filled\\" data-v-8850064e><!--[--><label class=\\"t-radio-button t-is-checked\\" tabindex=\\"0\\" data-v-8850064e><input type=\\"radio\\" class=\\"t-radio-button__former\\" name checked value=\\"left\\" tabindex=\\"-1\\" data-value=\\"&#39;left&#39;\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"><!--[--><!--[-->左对齐<!--]--><!--]--></span></label><label class=\\"t-radio-button\\" tabindex=\\"0\\" data-v-8850064e><input type=\\"radio\\" class=\\"t-radio-button__former\\" name value=\\"center\\" tabindex=\\"-1\\" data-value=\\"&#39;center&#39;\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"><!--[--><!--[-->居中对齐<!--]--><!--]--></span></label><label class=\\"t-radio-button\\" tabindex=\\"0\\" data-v-8850064e><input type=\\"radio\\" class=\\"t-radio-button__former\\" name value=\\"right\\" tabindex=\\"-1\\" data-value=\\"&#39;right&#39;\\"><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"><!--[--><!--[-->右对齐<!--]--><!--]--></span></label><!--]--><div style=\\"width:0px;height:0px;left:0px;top:0px;\\" class=\\"t-radio-group__bg-block\\"></div></div><button style=\\"margin-left:36px;\\" class=\\"t-button t-button--variant-text t-button--theme-default\\" type=\\"button\\" href data-v-8850064e><span class=\\"t-button__text\\"><!--[-->清除筛选条件<!--]--></span></button><span style=\\"padding-left:36px;\\" data-v-8850064e>已选筛选条件：{
-  &quot;channel&quot;: [],
-  &quot;createTime&quot;: []
+  &quot;channel&quot;: []
 }</span></div><div style=\\"margin:16px;\\" data-v-8850064e><label class=\\"t-checkbox t-is-checked\\" tabindex=\\"0\\" data-v-8850064e><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->是否显示表格边框<!--]--></span><!--]--></label></div><!-- 1. 此处代码有效，勿删！支持语法糖 filter-value.sync ， 支持非受控属性 defaultFilterValue --><!-- 2. 其中，filterIcon 用于自定义筛选图标，支持渲染函数 props.filterIcon，支持插槽 filterIcon。 --><!-- 3. filterRow={() => null}，则不会显示过滤行 --><!-- <t-table
       rowKey='key'
       :columns=\\"columns\\"