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';