feat(table): more attributes

Tencent · Jul 27, 2023 · 3bb9721 · 3bb9721
1 parent d4c7a6c
commit 3bb9721
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 5 deletions.
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
@@ -176,6 +176,8 @@ export default {
             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
@@ -133,6 +133,7 @@ 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 attributes = typeof b === 'object' && 'attrs' in b ? b.attrs : {};
             return h(v, {
@@ -146,6 +147,8 @@ export default defineComponent({
           <component
             value={this.innerFilterValue?.[column.colKey]}
             attrs={this.column.filter?.attrs}
+            class={this.column.filter?.classNames}
+            style={this.column.filter?.styles}
             props={{ ...filterComponentProps }}
             on={{ ...on }}
           ></component>

diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md
@@ -261,14 +261,16 @@ rowIndex | Number | - | required | Y
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-attrs | Array | - | html attributes of component。Typescript：`HTMLElementAttributes`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+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
+styles | 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,16 @@ rowIndex | Number | - | 必需。表格行下标，值为 `-1` 标识当前行
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-attrs | Array | - | 用于透传筛选器属性到自定义组件 `component`，HTML 原生属性。TS 类型：`HTMLElementAttributes`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+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 | - | 用于透传筛选器属性到自定义组件 `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
+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
+styles | 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,
@@ -776,6 +777,11 @@ export interface TableColumnFilter {
    * 用于透传筛选器属性到自定义组件 `component`，HTML 原生属性
    */
   attrs?: HTMLElementAttributes;
+  /**
+   * 透传类名到自定义组件 `component`
+   * @default ''
+   */
+  classNames?: ClassName;
   /**
    * 用于自定义筛选器，只要保证自定义筛选器包含 value 属性 和 change 事件，即可像内置筛选器一样正常使用。示例：`component: DatePicker`
    */
@@ -805,6 +811,10 @@ export interface TableColumnFilter {
    * @default false
    */
   showConfirmAndReset?: boolean;
+  /**
+   * 透传内联样式到自定义组件 `component`
+   */
+  styles?: Styles;
   /**
    * 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件，请更为使用 `component` 自定义任意组件
    * @default ''