Skip to content

Commit 9be025f

Browse files
chaishichaishi
authored
Merge pull request #1365 from PDieE/feat/table-tooltip
feat(table): 文本超出提示由 `Popup` 更为 `Tooltip`，以便于定制各种提示文本主题色
2 parents 44c7683 + 43a0aab commit 9be025f

File tree

8 files changed

+31
-34
lines changed

8 files changed

+31
-34
lines changed

‎examples/table/table.en-US.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@ cell | String / Function | - | use cell to render table cell。Typescript：`str
8383
children | Array | - | grouping table head。Typescript：`Array<BaseTableCol<T>>` | N
8484
className | String / Object / Array / Function | - | cell classnames。Typescript：`ClassName | ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' | 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
8585
colKey | String | - | unique key for column | N
86-
ellipsis | Boolean / Object / Slot / Function | false | ellipsis cell content。Typescript：`boolean | TNode<BaseTableCellParams<T>> | PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
87-
ellipsisTitle | Boolean / Object / Slot / Function | undefined | ellipsis title content。Typescript：`boolean | TNode<BaseTableColParams<T>> | PopupProps` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
86+
ellipsis | Boolean / Object / Slot / Function | false | ellipsis cell content。Typescript：`boolean | TNode<BaseTableCellParams<T>> | TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
87+
ellipsisTitle | Boolean / Object / Slot / Function | undefined | ellipsis title content。Typescript：`boolean | TNode<BaseTableColParams<T>> | TooltipProps` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
8888
fixed | String | left | fixed current column to left or right。options：left/right | N
8989
foot | String / Function | - | tfoot content。Typescript：`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
9090
minWidth | String / Number | - | add CSS property `min-width` to HTML Element `<col>`，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) support `minWidth` | N
@@ -280,7 +280,7 @@ component | \- | - | component definition。Typescript：`ComponentType`。[see
280280
defaultEditable | Boolean | false | set default editable once | N
281281
onEdited | Function | - | trigger on finishing editing。Typescript：`(context: { trigger: string; newRowData: T; rowIndex: number }) => void` | N
282282
props | Object | - | props of `edit.component`。Typescript：`TableEditableCellProps<T>` `type TableEditableCellProps<T> = TablePlainObject | ((params: TableEditableCellPropsParams<T>) => TablePlainObject)` `interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<T> { editedRow: T }` `interface TablePlainObject{ [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
283-
rules | Array | - | form rules。Typescript：`FormRule[]`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
283+
rules | Array | - | form rules。Typescript：`TableEditableCellRules<T>` `type TableEditableCellRules<T> = FormRule[] | ((params: TableEditableCellPropsParams<T>) => FormRule[])`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
284284
showEditIcon | Boolean | true | show edit icon | N
285285

286286
### TableTreeConfig

‎examples/table/table.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@ cell | String / Function | - | 自定义单元格渲染。值类型为 Function
8383
children | Array | - | 用于多级表头，泛型 T 指表格数据类型。TS 类型：`Array<BaseTableCol<T>>` | N
8484
className | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`ClassName | ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' | 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
8585
colKey | String | - | 渲染列所需字段 | N
86-
ellipsis | Boolean / Object / Slot / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义浮层显示内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整浮层方向等特性。TS 类型：`boolean | TNode<BaseTableCellParams<T>> | PopupProps`，[Popup API Documents](./popup?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
87-
ellipsisTitle | Boolean / Object / Slot / Function | undefined | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则浮层默认显示表头全部内容；<br/>值类型为 `Function` 则自定义浮层显示表头内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整浮层方向等特性。TS 类型：`boolean | TNode<BaseTableColParams<T>> | PopupProps` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
86+
ellipsis | Boolean / Object / Slot / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义浮层显示内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层方向等特性。TS 类型：`boolean | TNode<BaseTableCellParams<T>> | TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
87+
ellipsisTitle | Boolean / Object / Slot / Function | undefined | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则浮层默认显示表头全部内容；<br/>值类型为 `Function` 则自定义浮层显示表头内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层方向等特性。TS 类型：`boolean | TNode<BaseTableColParams<T>> | TooltipProps` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
8888
fixed | String | left | 固定列显示位置。可选项：left/right | N
8989
foot | String / Function | - | 自定义表尾表尾。值类型为 Function 表示以函数形式渲染表尾内容。值类型为 string 表示使用插槽渲染，插槽名称为 `foot` 值。TS 类型：`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
9090
minWidth | String / Number | - | 透传 CSS 属性 `min-width` 到 `<col>` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N
@@ -280,7 +280,7 @@ component | \- | - | 组件定义，如：`Input` `Select`。对于完全自定
280280
defaultEditable | Boolean | false | 单元格默认状态是否为编辑态 | N
281281
onEdited | Function | - | 编辑完成后，退出编辑模式时触发。TS 类型：`(context: { trigger: string; newRowData: T; rowIndex: number }) => void` | N
282282
props | Object | - | 透传给组件 `edit.component` 的属性。TS 类型：`TableEditableCellProps<T>` `type TableEditableCellProps<T> = TablePlainObject | ((params: TableEditableCellPropsParams<T>) => TablePlainObject)` `interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<T> { editedRow: T }` `interface TablePlainObject{ [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
283-
rules | Array | - | 校验规则。TS 类型：`FormRule[]`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
283+
rules | Array | - | 校验规则。TS 类型：`TableEditableCellRules<T>` `type TableEditableCellRules<T> = FormRule[] | ((params: TableEditableCellPropsParams<T>) => FormRule[])`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
284284
showEditIcon | Boolean | true | 是否显示编辑图标 | N
285285

286286
### TableTreeConfig

‎src/table/ellipsis.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ import debounce from 'lodash/debounce';
66
import { TNode } from '../common';
77
import { renderContent } from '../utils/render-tnode';
88
import { isNodeOverflow } from '../utils/dom';
9-
import TPopup, { PopupProps } from '../popup';
9+
import TTooltip, { TooltipProps } from '../tooltip';
1010
import { useConfig } from '../config-provider/useConfig';
1111

1212
export interface EllipsisProps {
1313
content: string | TNode;
1414
default: string | TNode;
15-
popupContent: string | number | TNode;
16-
placement: PopupProps['placement'];
15+
tooltipContent: string | number | TNode;
16+
placement: TooltipProps['placement'];
1717
attach: () => HTMLElement;
18-
popupProps: PopupProps;
18+
tooltipProps: TooltipProps;
1919
zIndex: number;
2020
}
2121

@@ -32,15 +32,15 @@ export default defineComponent({
3232
type: [String, Function] as PropType<EllipsisProps['default']>,
3333
},
3434
/** 内容，同 content，可以单独自定义浮层内容，无需和触发元素保持一致 */
35-
popupContent: {
36-
type: [String, Number, Function] as PropType<EllipsisProps['popupContent']>,
35+
tooltipContent: {
36+
type: [String, Number, Function] as PropType<EllipsisProps['tooltipContent']>,
3737
},
3838
/** 浮层位置 */
3939
placement: String as PropType<EllipsisProps['placement']>,
4040
/** 挂载元素 */
4141
attach: Function as PropType<EllipsisProps['attach']>,
42-
/** 透传 Popup 组件属性 */
43-
popupProps: Object as PropType<EllipsisProps['popupProps']>,
42+
/** 透传 Tooltip 组件属性 */
43+
tooltipProps: Object as PropType<EllipsisProps['tooltipProps']>,
4444
zIndex: Number,
4545
},
4646

@@ -56,7 +56,7 @@ export default defineComponent({
5656
`${classPrefix.value}-text-ellipsis`,
5757
]);
5858

59-
// 当表格数据量大时，不希望默认渲染全量的 Popup，期望在用户 mouseenter 的时候再显示
59+
// 当表格数据量大时，不希望默认渲染全量的 Tooltip，期望在用户 mouseenter 的时候再显示
6060
const onTriggerMouseenter = () => {
6161
if (!root.value) return;
6262
isOverflow.value = isNodeOverflow(root.value);
@@ -89,14 +89,14 @@ export default defineComponent({
8989
let content = null;
9090
if (this.isOverflow) {
9191
const rProps = {
92-
content: this.popupContent || (() => cellNode),
92+
content: this.tooltipContent || (() => cellNode),
9393
destroyOnClose: true,
9494
zIndex: this.zIndex,
9595
attach: this.attach || (() => this.root),
9696
placement: this.placement,
97-
...(this.popupProps || {}),
97+
...(this.tooltipProps || {}),
9898
};
99-
content = <TPopup props={rProps}>{ellipsisContent}</TPopup>;
99+
content = <TTooltip props={rProps}>{ellipsisContent}</TTooltip>;
100100
} else {
101101
content = ellipsisContent;
102102
}

‎src/table/hooks/useTableHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ export default function useTableHeader(props: TdBaseTableProps) {
6363
<TEllipsis
6464
placement="bottom-right"
6565
attach={attach ? () => attach : undefined}
66-
popupContent={content && (() => content)}
67-
popupProps={typeof ellipsisTitle === 'object' ? ellipsisTitle : undefined}
66+
tooltipContent={content && (() => content)}
67+
tooltipProps={typeof ellipsisTitle === 'object' ? ellipsisTitle : undefined}
6868
>
6969
{title}
7070
</TEllipsis>

‎src/table/primary-table-props.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export default {
3434
/** 列配置功能中，当前显示的列 */
3535
displayColumns: {
3636
type: Array as PropType<TdPrimaryTableProps['displayColumns']>,
37-
default: undefined,
3837
},
3938
/** 列配置功能中，当前显示的列，非受控属性 */
4039
defaultDisplayColumns: {
@@ -74,7 +73,7 @@ export default {
7473
/** 展开行 */
7574
expandedRowKeys: {
7675
type: Array as PropType<TdPrimaryTableProps['expandedRowKeys']>,
77-
default: undefined,
76+
default: (): TdPrimaryTableProps['expandedRowKeys'] => [],
7877
},
7978
/** 展开行，非受控属性 */
8079
defaultExpandedRowKeys: {
@@ -92,7 +91,6 @@ export default {
9291
/** 过滤数据的值 */
9392
filterValue: {
9493
type: Object as PropType<TdPrimaryTableProps['filterValue']>,
95-
default: undefined,
9694
},
9795
/** 过滤数据的值，非受控属性 */
9896
defaultFilterValue: {
@@ -109,7 +107,7 @@ export default {
109107
/** 选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制 */
110108
selectedRowKeys: {
111109
type: Array as PropType<TdPrimaryTableProps['selectedRowKeys']>,
112-
default: undefined,
110+
default: (): TdPrimaryTableProps['selectedRowKeys'] => [],
113111
},
114112
/** 选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制，非受控属性 */
115113
defaultSelectedRowKeys: {
@@ -119,7 +117,6 @@ export default {
119117
/** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序 */
120118
sort: {
121119
type: [Object, Array] as PropType<TdPrimaryTableProps['sort']>,
122-
default: undefined,
123120
},
124121
/** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序，非受控属性 */
125122
defaultSort: {

‎src/table/thead.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,8 @@ export default defineComponent({
143143
<TEllipsis
144144
placement="bottom"
145145
attach={this.theadRef ? () => this.theadRef : undefined}
146-
popupContent={content && (() => content)}
147-
popupProps={typeof col.ellipsisTitle === 'object' ? col.ellipsisTitle : undefined}
146+
tooltipContent={content && (() => content)}
147+
tooltipProps={typeof col.ellipsisTitle === 'object' ? col.ellipsisTitle : undefined}
148148
>
149149
{innerTh}
150150
</TEllipsis>

‎src/table/tr.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,8 +240,8 @@ export default defineComponent({
240240
<TEllipsis
241241
placement={placement}
242242
attach={this.tableElm ? () => this.tableElm : undefined}
243-
popupContent={content && (() => content)}
244-
popupProps={typeof col.ellipsis === 'object' ? col.ellipsis : undefined}
243+
tooltipContent={content && (() => content)}
244+
tooltipProps={typeof col.ellipsis === 'object' ? col.ellipsis : undefined}
245245
>
246246
{cellNode}
247247
</TEllipsis>

‎src/table/type.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import { AffixProps } from '../affix';
88
import { LoadingProps } from '../loading';
99
import { PaginationProps, PageInfo } from '../pagination';
10-
import { PopupProps } from '../popup';
10+
import { TooltipProps } from '../tooltip';
1111
import { CheckboxGroupValue } from '../checkbox';
1212
import { SortableEvent, SortableOptions } from 'sortablejs';
1313
import { CheckboxProps } from '../checkbox';
@@ -271,14 +271,14 @@ export interface BaseTableCol<T extends TableRowData = TableRowData> {
271271
*/
272272
colKey?: string;
273273
/**
274-
* 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义浮层显示内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整浮层方向等特性
274+
* 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义浮层显示内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层方向等特性
275275
* @default false
276276
*/
277-
ellipsis?: boolean | TNode<BaseTableCellParams<T>> | PopupProps;
277+
ellipsis?: boolean | TNode<BaseTableCellParams<T>> | TooltipProps;
278278
/**
279-
* 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则浮层默认显示表头全部内容；<br/>值类型为 `Function` 则自定义浮层显示表头内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整浮层方向等特性
279+
* 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则浮层默认显示表头全部内容；<br/>值类型为 `Function` 则自定义浮层显示表头内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层方向等特性
280280
*/
281-
ellipsisTitle?: boolean | TNode<BaseTableColParams<T>> | PopupProps;
281+
ellipsisTitle?: boolean | TNode<BaseTableColParams<T>> | TooltipProps;
282282
/**
283283
* 固定列显示位置
284284
* @default left

0 commit comments

Comments
 (0)