diff --git a/script/utils/index.js b/script/utils/index.js index bbdd35b95..6abc4d363 100644 --- 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 index 5db79faf4..c0f66ed44 100644 --- 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 index 67b1e38ac..026f8593f 100644 --- 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 index 15293d118..e6eb706fc 100644 --- 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 ; + const filter = this.column.filter || {}; + return ( + + ); }; return ( diff --git a/src/table/hooks/useTreeSelect.tsx b/src/table/hooks/useTreeSelect.tsx index fa8de2084..edbfa40de 100644 --- 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 index fb6576298..40e9e7fbe 100644 --- 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`。[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 index d9309da6e..ec6370e5a 100644 --- 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`。[通用类型定义](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 index b7d2e651c..2285fb0be 100644 --- 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 { } 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 index e045dd42f..100c3fb66 100644 --- 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';