From 470222261bfe65415e7e62fa15687b49481e350d Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 31 Jul 2023 10:32:29 +0800 Subject: [PATCH] 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 | 2 +- src/table/_example/filter-controlled.vue | 5 ++++- src/table/filter-controller.tsx | 15 +++++++++++++-- src/table/hooks/useTreeSelect.tsx | 1 + src/table/table.en-US.md | 5 ++++- src/table/table.md | 7 +++++-- src/table/type.ts | 18 ++++++++++++++++-- test/unit/snap/__snapshots__/csr.test.js.snap | 3 +-- test/unit/snap/__snapshots__/ssr.test.js.snap | 3 +-- 9 files changed, 46 insertions(+), 13 deletions(-) diff --git a/src/common.ts b/src/common.ts index 177d1a7b03..19a2a35520 100644 --- a/src/common.ts +++ b/src/common.ts @@ -78,7 +78,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 6f194491d5..64a378a910 100644 --- a/src/table/_example/filter-controlled.vue +++ b/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); diff --git a/src/table/filter-controller.tsx b/src/table/filter-controller.tsx index 1affbb3dda..2752db2f2f 100644 --- a/src/table/filter-controller.tsx +++ b/src/table/filter-controller.tsx @@ -79,7 +79,15 @@ export default defineComponent({ }); }); } - return ; + const filter = column.filter || {}; + return ( + + ); }; 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,7 +107,6 @@ 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) { @@ -106,6 +114,9 @@ export default defineComponent({ } }, }; + if (column.colKey && innerFilterValue && column.colKey in innerFilterValue) { + filterComponentProps.value = props.innerFilterValue?.[column.colKey]; + } // 允许自定义触发确认搜索的事件 if (column.filter.confirmEvents) { column.filter.confirmEvents.forEach((event) => { diff --git a/src/table/hooks/useTreeSelect.tsx b/src/table/hooks/useTreeSelect.tsx index 1500b08de4..09ecc94adb 100644 --- a/src/table/hooks/useTreeSelect.tsx +++ b/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) { diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md index c2524f9deb..fb7f08a88a 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-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`。[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 diff --git a/src/table/table.md b/src/table/table.md index 441c1a9a3e..5c164aa368 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-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`。[通用类型定义](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 diff --git a/src/table/type.ts b/src/table/type.ts index b7d2e651cd..2285fb0bea 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/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap index 620d46144b..66f058ecac 100644 --- a/test/unit/snap/__snapshots__/csr.test.js.snap +++ b/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": [] } diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap index 10f3577590..933c27f550 100644 --- a/test/unit/snap/__snapshots__/ssr.test.js.snap +++ b/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`] = ` "
已选筛选条件：{ - "channel": [], - "createTime": [] + "channel": [] }