From b5f8223ed5e9d9c979ce16b3ca39e5f77f14fa5b Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 30 Sep 2026 23:17:35 +0800 Subject: [PATCH 1/2] feat(Table): support ellipsis and ellipsisTitle props --- packages/components/table/README.en-US.md | 2 + packages/components/table/README.md | 4 +- .../__test__/__snapshots__/demo.test.js.snap | 94 +++++---- .../table/_example/bordered/index.js | 74 +++++-- packages/components/table/_example/table.wxml | 2 +- packages/components/table/table.json | 3 +- packages/components/table/table.less | 16 ++ packages/components/table/table.ts | 185 ++++++++++++++++++ packages/components/table/table.wxml | 36 +++- packages/components/table/type.ts | 16 ++ packages/components/table/utils.ts | 50 +++++ .../uniapp-components/table/README.en-US.md | 2 + packages/uniapp-components/table/README.md | 2 + packages/uniapp-components/table/type.ts | 16 ++ 14 files changed, 439 insertions(+), 63 deletions(-) diff --git a/packages/components/table/README.en-US.md b/packages/components/table/README.en-US.md index d7c5d1448f..09da6d89b4 100644 --- a/packages/components/table/README.en-US.md +++ b/packages/components/table/README.en-US.md @@ -59,6 +59,8 @@ align | String | left | align type。options: left/right/center | N cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams) => string)` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N col-key | String | - | unique key for column | N +ellipsis | Boolean / Object / Function | false | ellipsis cell content。Typescript: `boolean \| PopoverProps \| { props: PopoverProps; content: string }`，[Popover API Documents](./popover?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N +ellipsis-title | Boolean / Object / Function | undefinde | ellipsis title content。Typescript: `boolean \| PopoverProps \| { props: PopoverProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N fixed | String | left | fixed current column to left or right。options: left/right | N min-width | String / Number | - | add CSS property `min-width` to HTML Element ``，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) support `minWidth` | N width | String / Number | - | column width | N diff --git a/packages/components/table/README.md b/packages/components/table/README.md index 5884ab5dbd..7bbaedd91e 100644 --- a/packages/components/table/README.md +++ b/packages/components/table/README.md @@ -45,7 +45,7 @@ toc: false {{ stripe }} -#### 带边框表格样式 +#### 带边框表格样式（内容超出省略与浮层预览） {{ bordered }} @@ -113,6 +113,8 @@ align | String | left | 列横向对齐方式。可选项：left/right/center | cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。
如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams) => string)` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N +ellipsis | Boolean / Object / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popover 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| PopoverProps \| { props: PopoverProps; content: string }`，[Popover API Documents](./popover?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N +ellipsis-title | Boolean / Object / Function | undefinde | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popover 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。TS 类型：`boolean \| PopoverProps \| { props: PopoverProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N fixed | String | left | 固定列显示位置。可选项：left/right | N min-width | String / Number | - | 透传 CSS 属性 `min-width` 到 `` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N diff --git a/packages/components/table/__test__/__snapshots__/demo.test.js.snap b/packages/components/table/__test__/__snapshots__/demo.test.js.snap index a48ba3cbe8..4cc9ce8d9f 100644 --- a/packages/components/table/__test__/__snapshots__/demo.test.js.snap +++ b/packages/components/table/__test__/__snapshots__/demo.test.js.snap @@ -150,21 +150,39 @@ exports[`Table Table bordered demo works fine 1`] = ` Object { "colKey": "applicant", "ellipsis": true, - "title": "标题", + "title": "标题(布尔)", }, Object { "colKey": "status", - "ellipsis": true, - "title": "标题", + "ellipsis": Object { + "placement": "bottom", + "theme": "light", + }, + "ellipsisTitle": Object { + "content": [Function], + "props": Object { + "placement": "bottom", + "theme": "brand", + }, + }, + "title": "很长很长的标题用于测试表头超出省略", }, Object { "colKey": "channel", - "ellipsis": true, - "title": "标题", + "ellipsis": [Function], + "ellipsisTitle": false, + "title": "标题(函数)", + }, + Object { + "colKey": "remark", + "ellipsis": [Function], + "ellipsisTitle": [Function], + "title": "标题(函数)", }, Object { "colKey": "detail.email", - "ellipsis": true, + "ellipsis": [Function], + "ellipsisTitle": true, "title": "标题", }, ] @@ -173,92 +191,82 @@ exports[`Table Table bordered demo works fine 1`] = ` Array [ Object { "applicant": "内容", - "channel": "内容", + "channel": "这是一段很长很长的内容", "detail": Object { - "email": "内容", + "email": "这是一段很长很长很长的邮箱地址", }, "id": 1, - "index": 1, - "status": "内容", + "remark": "这是一段很长很长很长的备注内容", + "status": "这是一段很长的内容", }, Object { - "applicant": "内容", + "applicant": "这是一段很长很长很长的内容", "channel": "内容", "detail": Object { "email": "内容", }, "id": 2, - "index": 2, + "remark": "内容", "status": "内容", }, Object { "applicant": "内容", "channel": "内容", "detail": Object { - "email": "内容内容内容", + "email": "内容", }, "id": 3, - "index": 3, - "status": "内容", + "remark": "内容", + "status": "这是一段很长很长很长很长的内容", }, Object { "applicant": "内容", - "channel": "内容", + "channel": "这是一段很长很长的内容", "detail": Object { - "email": "内容", + "email": "这是一段很长很长很长的邮箱地址", }, "id": 4, - "index": 4, - "status": "内容", + "remark": "这是一段很长很长很长的备注内容", + "status": "这是一段很长的内容", }, Object { - "applicant": "内容", + "applicant": "这是一段很长很长很长的内容", "channel": "内容", "detail": Object { "email": "内容", }, "id": 5, - "index": 5, + "remark": "内容", "status": "内容", }, Object { "applicant": "内容", "channel": "内容", "detail": Object { - "email": "内容内容内容", + "email": "内容", }, "id": 6, - "index": 6, - "status": "内容", + "remark": "内容", + "status": "这是一段很长很长很长很长的内容", }, Object { "applicant": "内容", - "channel": "内容", + "channel": "这是一段很长很长的内容", "detail": Object { - "email": "内容", + "email": "这是一段很长很长很长的邮箱地址", }, "id": 7, - "index": 7, - "status": "内容", + "remark": "这是一段很长很长很长的备注内容", + "status": "这是一段很长的内容", }, Object { - "applicant": "内容", + "applicant": "这是一段很长很长很长的内容", "channel": "内容", "detail": Object { "email": "内容", }, "id": 8, - "index": 8, - "status": "内容", - }, - Object { - "applicant": "内容", - "channel": "内容", - "detail": Object { - "email": "内容内容内容", - }, - "id": 9, - "index": 9, + "remark": "内容", "status": "内容", }, Object { @@ -267,9 +275,9 @@ exports[`Table Table bordered demo works fine 1`] = ` "detail": Object { "email": "内容", }, - "id": 10, - "index": 10, - "status": "内容", + "id": 9, + "remark": "内容", + "status": "这是一段很长很长很长很长的内容", }, ] }}" diff --git a/packages/components/table/_example/bordered/index.js b/packages/components/table/_example/bordered/index.js index 85afad3f92..f9a2339c04 100644 --- a/packages/components/table/_example/bordered/index.js +++ b/packages/components/table/_example/bordered/index.js @@ -1,31 +1,75 @@ import SkylineBehavior from '@behaviors/skyline.js'; +const originalData = [ + { + id: 1, + applicant: '内容', + status: '这是一段很长的内容', + channel: '这是一段很长很长的内容', + detail: { email: '这是一段很长很长很长的邮箱地址' }, + remark: '这是一段很长很长很长的备注内容', + }, + { + id: 2, + applicant: '这是一段很长很长很长的内容', + status: '内容', + channel: '内容', + detail: { email: '内容' }, + remark: '内容', + }, + { + id: 3, + applicant: '内容', + status: '这是一段很长很长很长很长的内容', + channel: '内容', + detail: { email: '内容' }, + remark: '内容', + }, +]; + Component({ behaviors: [SkylineBehavior], data: { columns: [ - { colKey: 'applicant', title: '标题', ellipsis: true }, - { colKey: 'status', title: '标题', ellipsis: true }, - { colKey: 'channel', title: '标题', ellipsis: true }, - { colKey: 'detail.email', title: '标题', ellipsis: true }, + // boolean：值为 true，浮层默认显示单元格内容 + { colKey: 'applicant', title: '标题(布尔)', ellipsis: true }, + // Object：整体透传给 Popover 组件；ellipsisTitle 优先级高于 ellipsis + { + colKey: 'status', + title: '很长很长的标题用于测试表头超出省略', + ellipsis: { placement: 'bottom', theme: 'light' }, + ellipsisTitle: { props: { placement: 'bottom', theme: 'brand' }, content: () => '自定义表头浮层内容' }, + }, + // Function 返回 boolean：按行动态决定是否省略；ellipsisTitle = false 表示仅单元格超出省略 + { + colKey: 'channel', + title: '标题(函数)', + ellipsis: ({ rowIndex }) => rowIndex % 2 === 0, + ellipsisTitle: false, + }, + // Function 返回内容：自定义浮层显示的内容；表头用 Function 单独控制 + { + colKey: 'remark', + title: '标题(函数)', + ellipsis: ({ row }) => `备注：${row.remark}`, + ellipsisTitle: ({ colIndex }) => colIndex === 3, + }, + // Function 返回 Object：同时透传 Popover 属性与自定义浮层内容 + { + colKey: 'detail.email', + title: '标题', + ellipsis: ({ row }) => ({ props: { theme: 'warning' }, content: () => `邮箱：${row.detail.email}` }), + ellipsisTitle: true, + }, ], data: [], }, lifetimes: { attached() { const data = []; - const total = 10; + const total = 9; for (let i = 0; i < total; i += 1) { - data.push({ - id: i + 1, - index: i + 1, - applicant: ['内容', '内容', '内容'][i % 3], - status: ['内容', '内容', '内容'][i % 3], - channel: ['内容', '内容', '内容'][i % 3], - detail: { - email: ['内容', '内容', '内容内容内容'][i % 3], - }, - }); + data.push({ ...originalData[i % originalData.length], id: i + 1 }); } this.setData({ data }); }, diff --git a/packages/components/table/_example/table.wxml b/packages/components/table/_example/table.wxml index 234f169c11..fda322b176 100644 --- a/packages/components/table/_example/table.wxml +++ b/packages/components/table/_example/table.wxml @@ -14,7 +14,7 @@ - + diff --git a/packages/components/table/table.json b/packages/components/table/table.json index f20e16478f..70507629a5 100644 --- a/packages/components/table/table.json +++ b/packages/components/table/table.json @@ -2,6 +2,7 @@ "component": true, "styleIsolation": "apply-shared", "usingComponents": { - "t-loading": "../loading/loading" + "t-loading": "../loading/loading", + "t-popover": "../popover/popover" } } diff --git a/packages/components/table/table.less b/packages/components/table/table.less index aa60ecd112..20f3633a87 100644 --- a/packages/components/table/table.less +++ b/packages/components/table/table.less @@ -102,10 +102,26 @@ &__th-content, &__td-content { overflow: hidden; + } + + // 开启 ellipsis / ellipsisTitle 后才出现超出省略 + &__th-content--ellipsis, + &__td-content--ellipsis { text-overflow: ellipsis; white-space: nowrap; } + // 预览气泡的定位锚点 + &__popover-anchor { + position: absolute; + pointer-events: none; + } + + // 气泡展示时需要响应交互（关闭气泡的遮罩层位于锚点内部） + &__popover-anchor--visible { + pointer-events: auto; + } + // 空数据 &__empty-row { display: flex; diff --git a/packages/components/table/table.ts b/packages/components/table/table.ts index 1c2b28cb4a..d2892a724a 100644 --- a/packages/components/table/table.ts +++ b/packages/components/table/table.ts @@ -1,6 +1,7 @@ import { SuperComponent, wxComponent } from '../common/src/index'; import config from '../common/config'; import usingConfig from '../mixins/using-config'; +import { getWindowInfo } from '../common/wechat'; import props from './base-table-props'; import type { BaseTableCol, TableRowData } from './type'; import { @@ -10,13 +11,31 @@ import { getCellKey, getSkipSpansMap, handleCellSpan, + hasEllipsisColumn, isFirstColumnInSpan, isLastRowInSpan, + resolveEllipsis, } from './utils'; const { prefix } = config; const componentName = 'table'; +/** 单元格预览气泡的默认最大宽度（px） */ +const DEFAULT_POPOVER_MAX_WIDTH = 280; + +/** 归一化气泡最大宽度，支持数字（px）与带单位字符串（如 `300px` / `600rpx`） */ +function normalizeMaxWidth(maxWidth?: string | number): string { + if (maxWidth === undefined || maxWidth === null || maxWidth === '') return `${DEFAULT_POPOVER_MAX_WIDTH}px`; + return String(formatCSSUnit(maxWidth) || `${DEFAULT_POPOVER_MAX_WIDTH}px`); +} + +/** 气泡最大宽度换算为 px，用于计算气泡相对单元格的对齐方式 */ +function maxWidthToPx(maxWidth: string | number | undefined, windowWidth: number) { + const value = normalizeMaxWidth(maxWidth); + if (value.endsWith('rpx')) return (parseFloat(value) * windowWidth) / 750; + return parseFloat(value) || DEFAULT_POPOVER_MAX_WIDTH; +} + @wxComponent() export default class Table extends SuperComponent { behaviors = [usingConfig({ componentName })]; @@ -48,6 +67,23 @@ export default class Table extends SuperComponent { scrollableToLeft: false, scrollableToRight: false, contentClasses: '', + // 超出省略（ellipsis / ellipsisTitle） + hasEllipsis: false, + titleClassNames: [] as string[], + titleEllipsisFlags: [] as boolean[], + popoverConfig: { + placement: 'top', + theme: 'dark', + showArrow: true, + closeOnClickOutside: true, + maxWidth: `${DEFAULT_POPOVER_MAX_WIDTH}px`, + } as Record, + popoverPlacement: 'top', + popoverVisible: false, + // 每次弹出重新挂载，避免复用组件沿用上一次的坐标 + popoverMounted: false, + popoverContent: '', + popoverAnchorStyle: '', }; observers = { @@ -85,6 +121,9 @@ export default class Table extends SuperComponent { } = this.properties; const { classPrefix } = this.data; + // 开启后才渲染气泡，并为单元格/表头附加测量与定位用的类名 + const hasEllipsis = hasEllipsisColumn((columns || []) as BaseTableCol[]); + // 解析 fixedRows const fixedTopRows = (fixedRows && (fixedRows as number[])[0]) || 0; const fixedBottomRows = (fixedRows && (fixedRows as number[])[1]) || 0; @@ -207,6 +246,19 @@ export default class Table extends SuperComponent { return classes.filter(Boolean).join(' '); }); + // 表头内容类名与省略标记：ellipsisTitle 优先级高于 ellipsis + const titleEllipsisList = (columns || []).map((col: BaseTableCol, colIndex: number) => + resolveEllipsis(col.ellipsisTitle !== undefined ? col.ellipsisTitle : col.ellipsis, { col, colIndex }), + ); + const titleClassNames = titleEllipsisList.map((item: any, colIndex: number) => { + const classes: string[] = [`${classPrefix}__th-content`]; + if (item.enabled) { + classes.push(`${classPrefix}__th-content--ellipsis`, `${classPrefix}__th-content-${colIndex}`); + } + return classes.filter(Boolean).join(' '); + }); + const titleEllipsisFlags = titleEllipsisList.map((item: any) => !!item.enabled); + // 计算合并单元格 const hasSpan = !!rowspanAndColspan && !!data?.length && !!columns?.length; const skipSpansMap = getSkipSpansMap(data, columns, rowKey, rowspanAndColspan as Function); @@ -245,11 +297,21 @@ export default class Table extends SuperComponent { } } + const cellEllipsis = resolveEllipsis(col.ellipsis, { row, col, rowIndex, colIndex }); + // 合并场景用 grid 定位实现跨行跨列，非合并场景沿用列宽样式 const cellStyle = hasSpan ? `grid-column: ${colIndex + 1} / span ${colspan || 1}; grid-row: ${rowIndex + 1} / span ${rowspan || 1}` : colStyles[colIndex]; + const contentClasses: string[] = [`${classPrefix}__td-content`]; + if (cellEllipsis.enabled) { + contentClasses.push( + `${classPrefix}__td-content--ellipsis`, + `${classPrefix}__td-content-${rowIndex}-${colIndex}`, + ); + } + return { colKey: col.colKey || String(colIndex), colIndex, @@ -257,6 +319,9 @@ export default class Table extends SuperComponent { tdClass: tdClasses.filter(Boolean).join(' '), cellStyle, skipped: skipped || false, + contentClass: contentClasses.filter(Boolean).join(' '), + textClass: `${classPrefix}__td-text-${rowIndex}-${colIndex}`, + ellipsis: !!cellEllipsis.enabled, }; }); @@ -338,6 +403,9 @@ export default class Table extends SuperComponent { hasSpan, tbodyStyles, contentClasses, + hasEllipsis, + titleClassNames, + titleEllipsisFlags, }, () => { // 动态测量行高，修正固定行的 top/bottom 值 @@ -403,9 +471,121 @@ export default class Table extends SuperComponent { } }, + /** + * 计算气泡弹出方位。 + * 气泡以配置方位（`placement`）为准，但当单元格靠近屏幕左/右边缘时， + * 居中气泡会被贴边截断、箭头随之偏离单元格，此时改为贴边对齐以保证箭头落在单元格上。 + */ + getPopoverPlacement(this: any, contentRect: Record, config: Record) { + const { windowWidth } = getWindowInfo(); + const base = String(config.placement || 'top').split('-')[0]; + const maxWidth = maxWidthToPx(config.maxWidth, windowWidth); + const cellCenter = contentRect.left + contentRect.width / 2; + + if (cellCenter < maxWidth / 2) return `${base}-left`; + if (windowWidth - cellCenter < maxWidth / 2) return `${base}-right`; + return base; + }, + + getPopoverConfig(this: any, props: Record) { + return { + placement: props.placement || 'top', + theme: props.theme || 'dark', + showArrow: props.showArrow !== false, + closeOnClickOutside: props.closeOnClickOutside !== false, + // 限制气泡宽度，避免超长内容撑满屏幕导致定位与箭头偏移 + maxWidth: normalizeMaxWidth(props.maxWidth), + }; + }, + + /** 展示超出省略内容的预览气泡，气泡通过定位锚点跟随目标（单元格 / 表头） */ + showEllipsisPopover( + this: any, + type: 'td' | 'th', + rowIndex: number, + colIndex: number, + content: string, + props: Record, + ) { + if (!content) return; + + const { classPrefix } = this.data; + const suffix = type === 'th' ? `${colIndex}` : `${rowIndex}-${colIndex}`; + const nextConfig = this.getPopoverConfig(props); + + const query = this.createSelectorQuery(); + query.select(`.${classPrefix}__${type}-content-${suffix}`).boundingClientRect(); + query.select(`.${classPrefix}__${type}-text-${suffix}`).boundingClientRect(); + query.select(`.${classPrefix}`).boundingClientRect(); + query.exec((res: any) => { + if (!res) return; + const [contentRect, textRect, tableRect] = res; + if (!contentRect || !textRect || !tableRect) return; + + // 文本实际尺寸大于可视尺寸，说明内容被隐藏 + const isOverflow = textRect.width - contentRect.width > 1 || textRect.height - contentRect.height > 1; + if (!isOverflow) return; + + const top = contentRect.top - tableRect.top; + const left = contentRect.left - tableRect.left; + + const payload = { + popoverAnchorStyle: `top: ${top}px; left: ${left}px; width: ${contentRect.width}px; height: ${contentRect.height}px;`, + popoverContent: content, + popoverConfig: nextConfig, + popoverPlacement: this.getPopoverPlacement(contentRect, nextConfig), + }; + + // 先卸载再挂载，确保每次弹出都重新计算坐标（复用组件会沿用上一次的 top/left） + if (this.data.popoverMounted) { + this.setData({ popoverMounted: false, popoverVisible: false }, () => + this.setData({ ...payload, popoverMounted: true, popoverVisible: true }), + ); + } else { + this.setData({ ...payload, popoverMounted: true, popoverVisible: true }); + } + }); + }, + + /** 点击表头：表头内容超出省略时，弹出气泡预览完整标题 */ + onTitleClick(this: any, e: any) { + const { colIndex } = e.currentTarget.dataset; + const { columns } = this.properties; + const col = columns && columns[colIndex]; + if (!col) return; + + const resolved = resolveEllipsis(col.ellipsisTitle !== undefined ? col.ellipsisTitle : col.ellipsis, { + col, + colIndex, + }); + if (!resolved.enabled) return; + + this.showEllipsisPopover('th', 0, colIndex, resolved.content || col.title || '', resolved.props); + }, + + onPopoverVisibleChange(this: any, e: any) { + const { visible } = e.detail || {}; + if (!!visible !== this.data.popoverVisible) { + this.setData({ popoverVisible: !!visible }); + } + // 关闭时延迟卸载，保留 popover 的淡出过渡 + clearTimeout(this.popoverUnmountTimer); + if (!visible && this.data.popoverMounted) { + this.popoverUnmountTimer = setTimeout(() => this.setData({ popoverMounted: false }), 350); + } + }, + onCellClick(this: any, e: any) { const { rowIndex, colIndex } = e.currentTarget.dataset; const { data, columns } = this.properties; + const cell = this.data.renderData?.[rowIndex]?.cells?.[colIndex]; + const col = columns && columns[colIndex]; + if (cell && col) { + const resolved = resolveEllipsis(col.ellipsis, { row: data[rowIndex], col, rowIndex, colIndex }); + if (resolved.enabled) { + this.showEllipsisPopover('td', rowIndex, colIndex, resolved.content || cell.content, resolved.props); + } + } if (data && data[rowIndex] && columns && columns[colIndex]) { this.triggerEvent('cell-click', { row: data[rowIndex], @@ -427,6 +607,11 @@ export default class Table extends SuperComponent { const { classPrefix } = this.data; this.triggerEvent('scroll', { e }); + // 滚动后单元格位置变化，预览气泡不再匹配，直接关闭 + if (this.data.popoverVisible) { + this.setData({ popoverVisible: false }); + } + const target = e.detail || {}; // 更新固定列滚动阴影状态 diff --git a/packages/components/table/table.wxml b/packages/components/table/table.wxml index 2fa0f239c9..9f6c7b80dd 100644 --- a/packages/components/table/table.wxml +++ b/packages/components/table/table.wxml @@ -9,7 +9,12 @@ data-col-index="{{cell.colIndex}}" bind:tap="onCellClick" > - {{cell.content}} + + + {{cell.content}} + + {{cell.content}} + @@ -32,8 +37,15 @@ wx:key="colKey" class="{{classPrefix}}__th {{thClassNames[colIndex]}}" style="{{colStyles[colIndex]}}" + data-col-index="{{colIndex}}" + bind:tap="onTitleClick" > - {{col.title}} + + + {{col.title}} + + {{col.title}} + @@ -93,4 +105,24 @@ {{footerSummary}} + + + + + diff --git a/packages/components/table/type.ts b/packages/components/table/type.ts index e639e93115..06c65a06f3 100644 --- a/packages/components/table/type.ts +++ b/packages/components/table/type.ts @@ -5,6 +5,7 @@ * */ import { LoadingProps } from '../loading/index'; +import { PopoverProps } from '../popover/index'; import type { ClassName } from '../common/common'; export interface TdBaseTableProps { @@ -166,6 +167,16 @@ export interface BaseTableCol { * @default '' */ colKey?: string; + /** + * 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popover 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素 + * @default false + */ + ellipsis?: boolean | PopoverProps | { props: PopoverProps; content: string }; + /** + * 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popover 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }` + * @default undefinde + */ + ellipsisTitle?: boolean | PopoverProps | { props: PopoverProps; content: string }; /** * 固定列显示位置 * @default left @@ -209,4 +220,9 @@ export interface CellData extends BaseTab type: 'th' | 'td'; } +export interface BaseTableColParams { + col: BaseTableCol; + colIndex: number; +} + export type DataType = TableRowData; diff --git a/packages/components/table/utils.ts b/packages/components/table/utils.ts index c3cba4aae3..13df207708 100644 --- a/packages/components/table/utils.ts +++ b/packages/components/table/utils.ts @@ -117,3 +117,53 @@ export function isLastRowInSpan(rowIndex: number, rowspan?: number, totalDataLen export function isFirstColumnInSpan(colIndex: number): boolean { return colIndex === 0; } + +// ------- 超出省略（ellipsis / ellipsisTitle） ------- + +export interface EllipsisResult { + /** 是否开启超出省略 */ + enabled: boolean; + /** 浮层展示内容，缺省时回退为单元格/表头完整内容 */ + content?: string; + /** 透传给 Popover 组件的属性 */ + props: Record; +} + +/** + * 解析 `ellipsis` / `ellipsisTitle` 配置。 + * 支持 `boolean` / `Object`（透传 Popover）/ `{ props, content }` / `Function`（按单元格动态返回）。 + * `ellipsisTitle` 优先级高于 `ellipsis`，由调用方决定取值。 + */ +export function resolveEllipsis(value: any, params: Record): EllipsisResult { + const disabled: EllipsisResult = { enabled: false, props: {} }; + let result = value; + + if (typeof value === 'function') { + try { + result = value(params); + } catch (err) { + // 函数可能依赖行数据（表头场景没有 row），异常时按未开启超出省略处理 + return disabled; + } + } + + if (result === false || result === null || result === undefined) return disabled; + if (typeof result === 'string') return { enabled: true, content: result, props: {} }; + if (typeof result !== 'object') return { enabled: !!result, props: {} }; + + // `{ props, content }` 中 props 透传 Popover；其余形式整体作为 Popover 属性透传 + const props: Record = result.props && typeof result.props === 'object' ? { ...result.props } : {}; + if (!result.props) { + Object.keys(result).forEach((key) => { + if (key !== 'content') props[key] = result[key]; + }); + } + + const content = typeof result.content === 'function' ? result.content() : result.content; + return { enabled: true, content: typeof content === 'string' ? content : undefined, props }; +} + +/** 是否存在列开启了超出省略 */ +export function hasEllipsisColumn(columns: BaseTableCol[]): boolean { + return (columns || []).some((col) => !!col.ellipsis || !!col.ellipsisTitle); +} diff --git a/packages/uniapp-components/table/README.en-US.md b/packages/uniapp-components/table/README.en-US.md index efab84369f..ec2af5d139 100644 --- a/packages/uniapp-components/table/README.en-US.md +++ b/packages/uniapp-components/table/README.en-US.md @@ -50,6 +50,8 @@ align | String | left | align type。options: left/right/center | N cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams) => string)` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N col-key | String | - | unique key for column | N +ellipsis | Boolean / Object / Function | false | ellipsis cell content。Typescript: `boolean \| PopoverProps \| { props: PopoverProps; content: string }`，[Popover API Documents](./popover?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N +ellipsis-title | Boolean / Object / Function | undefinde | ellipsis title content。Typescript: `boolean \| PopoverProps \| { props: PopoverProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N fixed | String | left | fixed current column to left or right。options: left/right | N min-width | String / Number | - | add CSS property `min-width` to HTML Element ``，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) support `minWidth` | N width | String / Number | - | column width | N diff --git a/packages/uniapp-components/table/README.md b/packages/uniapp-components/table/README.md index 53bb6deba3..f3fb1c49f2 100644 --- a/packages/uniapp-components/table/README.md +++ b/packages/uniapp-components/table/README.md @@ -95,6 +95,8 @@ align | String | left | 列横向对齐方式。可选项：left/right/center | cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。
如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams) => string)` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N +ellipsis | Boolean / Object / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popover 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| PopoverProps \| { props: PopoverProps; content: string }`，[Popover API Documents](./popover?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N +ellipsis-title | Boolean / Object / Function | undefinde | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popover 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。TS 类型：`boolean \| PopoverProps \| { props: PopoverProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N fixed | String | left | 固定列显示位置。可选项：left/right | N min-width | String / Number | - | 透传 CSS 属性 `min-width` 到 `` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N diff --git a/packages/uniapp-components/table/type.ts b/packages/uniapp-components/table/type.ts index 65a884ac26..c1ce54f4bd 100644 --- a/packages/uniapp-components/table/type.ts +++ b/packages/uniapp-components/table/type.ts @@ -5,6 +5,7 @@ * */ import type { TdLoadingProps as LoadingProps } from '../loading/type'; +import type { TdPopoverProps as PopoverProps } from '../popover/type'; import type { ClassName } from '../common/common'; export interface TdBaseTableProps { @@ -119,6 +120,16 @@ export interface BaseTableCol { * @default '' */ colKey?: string; + /** + * 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popover 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素 + * @default false + */ + ellipsis?: boolean | PopoverProps | { props: PopoverProps; content: string }; + /** + * 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popover 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }` + * @default undefinde + */ + ellipsisTitle?: boolean | PopoverProps | { props: PopoverProps; content: string }; /** * 固定列显示位置 * @default left @@ -177,4 +188,9 @@ export interface CellData extends BaseTab type: 'th' | 'td'; } +export interface BaseTableColParams { + col: BaseTableCol; + colIndex: number; +} + export type DataType = TableRowData; From a307622803f37618c68452233e8bc251c7880601 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Fri, 30 Oct 2026 22:30:43 +0800 Subject: [PATCH 2/2] chore(Table): change PopoverProps to PopupProps --- .../__test__/__snapshots__/index.test.js.snap | 2 +- .../__test__/__snapshots__/index.test.js.snap | 2 +- .../__test__/__snapshots__/index.test.js.snap | 2 +- .../__test__/__snapshots__/index.test.js.snap | 2 +- .../components/mixins/using-custom-navbar.ts | 8 +- .../__test__/__snapshots__/index.test.js.snap | 2 +- packages/components/popup/popup.less | 1 + packages/components/popup/popup.ts | 2 +- packages/components/popup/popup.wxml | 4 +- packages/components/table/README.en-US.md | 4 +- packages/components/table/README.md | 4 +- .../__test__/__snapshots__/demo.test.js.snap | 187 +++++++++++++----- .../components/table/__test__/demo.test.js | 2 +- .../components/table/_example/base/index.wxss | 1 - .../table/_example/bordered/index.js | 74 ++----- .../table/_example/bordered/index.wxss | 1 - .../table/_example/ellipsis/index.js | 89 +++++++++ .../table/_example/ellipsis/index.json | 6 + .../table/_example/ellipsis/index.wxml | 9 + .../table/_example/rowspan-colspan/index.wxss | 1 - .../table/_example/scroll/index.wxss | 1 - .../table/_example/stripe/index.wxss | 1 - packages/components/table/_example/table.json | 1 + packages/components/table/_example/table.wxml | 5 +- packages/components/table/table.json | 2 +- packages/components/table/table.less | 72 ++++++- packages/components/table/table.ts | 133 +++---------- packages/components/table/table.wxml | 39 ++-- packages/components/table/type.ts | 10 +- packages/components/table/utils.ts | 17 +- .../uniapp-components/table/README.en-US.md | 4 +- packages/uniapp-components/table/README.md | 4 +- packages/uniapp-components/table/type.ts | 13 +- 33 files changed, 421 insertions(+), 284 deletions(-) delete mode 100644 packages/components/table/_example/base/index.wxss delete mode 100644 packages/components/table/_example/bordered/index.wxss create mode 100644 packages/components/table/_example/ellipsis/index.js create mode 100644 packages/components/table/_example/ellipsis/index.json create mode 100644 packages/components/table/_example/ellipsis/index.wxml delete mode 100644 packages/components/table/_example/rowspan-colspan/index.wxss delete mode 100644 packages/components/table/_example/scroll/index.wxss delete mode 100644 packages/components/table/_example/stripe/index.wxss diff --git a/packages/components/calendar/__test__/__snapshots__/index.test.js.snap b/packages/components/calendar/__test__/__snapshots__/index.test.js.snap index 5d458ac3a2..7e96062302 100644 --- a/packages/components/calendar/__test__/__snapshots__/index.test.js.snap +++ b/packages/components/calendar/__test__/__snapshots__/index.test.js.snap @@ -816,7 +816,7 @@ exports[`calendar :base 1`] = ` diff --git a/packages/components/date-time-picker/__test__/__snapshots__/index.test.js.snap b/packages/components/date-time-picker/__test__/__snapshots__/index.test.js.snap index 1f620bf4fb..918cc34b9e 100644 --- a/packages/components/date-time-picker/__test__/__snapshots__/index.test.js.snap +++ b/packages/components/date-time-picker/__test__/__snapshots__/index.test.js.snap @@ -521,7 +521,7 @@ exports[`date-time-picker :base 1`] = ` diff --git a/packages/components/dialog/__test__/__snapshots__/index.test.js.snap b/packages/components/dialog/__test__/__snapshots__/index.test.js.snap index 00ae9e2586..fbcc291f25 100644 --- a/packages/components/dialog/__test__/__snapshots__/index.test.js.snap +++ b/packages/components/dialog/__test__/__snapshots__/index.test.js.snap @@ -48,7 +48,7 @@ exports[`dialog :base 1`] = ` /> diff --git a/packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap index 7983eb5617..51e3e1621d 100644 --- a/packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap +++ b/packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap @@ -675,7 +675,7 @@ exports[`dropdown-menu :base 1`] = ` class="t-dropdown-item__footer t-class-footer" /> diff --git a/packages/components/mixins/using-custom-navbar.ts b/packages/components/mixins/using-custom-navbar.ts index eb25c9f964..d3d3968e6f 100644 --- a/packages/components/mixins/using-custom-navbar.ts +++ b/packages/components/mixins/using-custom-navbar.ts @@ -15,10 +15,12 @@ const useCustomNavbarBehavior = Behavior({ distanceTop: 0, }, - lifetimes: { - attached() { - if (this.properties.usingCustomNavbar) { + observers: { + usingCustomNavbar(value) { + if (value) { this.calculateCustomNavbarDistanceTop(); + } else { + this.setData({ distanceTop: 0 }); } }, }, diff --git a/packages/components/picker/__test__/__snapshots__/index.test.js.snap b/packages/components/picker/__test__/__snapshots__/index.test.js.snap index 776f95b7f1..60a3fb50be 100644 --- a/packages/components/picker/__test__/__snapshots__/index.test.js.snap +++ b/packages/components/picker/__test__/__snapshots__/index.test.js.snap @@ -200,7 +200,7 @@ exports[`picker :base 1`] = ` diff --git a/packages/components/popup/popup.less b/packages/components/popup/popup.less index 5f9f4281df..d8bd3c5579 100644 --- a/packages/components/popup/popup.less +++ b/packages/components/popup/popup.less @@ -33,6 +33,7 @@ padding: 20rpx; line-height: 1; color: @popup-close-btn-color; + font-size: 48rpx; } &--top { diff --git a/packages/components/popup/popup.ts b/packages/components/popup/popup.ts index a2f2f95fb9..73ebbfe66c 100644 --- a/packages/components/popup/popup.ts +++ b/packages/components/popup/popup.ts @@ -14,7 +14,7 @@ const name = `${prefix}-popup`; @wxComponent() export default class Popup extends SuperComponent { - externalClasses = [`${prefix}-class`, `${prefix}-class-content`]; + externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-close`]; behaviors = [transition(), useCustomNavbar]; diff --git a/packages/components/popup/popup.wxml b/packages/components/popup/popup.wxml index 673e377744..6fa11a0812 100644 --- a/packages/components/popup/popup.wxml +++ b/packages/components/popup/popup.wxml @@ -29,8 +29,8 @@ > - - + + diff --git a/packages/components/table/README.en-US.md b/packages/components/table/README.en-US.md index 09da6d89b4..5f591630e0 100644 --- a/packages/components/table/README.en-US.md +++ b/packages/components/table/README.en-US.md @@ -59,8 +59,8 @@ align | String | left | align type。options: left/right/center | N cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams) => string)` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N col-key | String | - | unique key for column | N -ellipsis | Boolean / Object / Function | false | ellipsis cell content。Typescript: `boolean \| PopoverProps \| { props: PopoverProps; content: string }`，[Popover API Documents](./popover?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N -ellipsis-title | Boolean / Object / Function | undefinde | ellipsis title content。Typescript: `boolean \| PopoverProps \| { props: PopoverProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N +ellipsis | Boolean / Object / Function | false | ellipsis cell content。Typescript: `boolean \| PopupProps \| { props: PopupProps; content: string }`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N +ellipsis-title | Boolean / Object / Function | undefinde | ellipsis title content。Typescript: `boolean \| PopupProps \| { props: PopupProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N fixed | String | left | fixed current column to left or right。options: left/right | N min-width | String / Number | - | add CSS property `min-width` to HTML Element ``，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) support `minWidth` | N width | String / Number | - | column width | N diff --git a/packages/components/table/README.md b/packages/components/table/README.md index 7bbaedd91e..4e4aeeb980 100644 --- a/packages/components/table/README.md +++ b/packages/components/table/README.md @@ -113,8 +113,8 @@ align | String | left | 列横向对齐方式。可选项：left/right/center | cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。
如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams) => string)` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N -ellipsis | Boolean / Object / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popover 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| PopoverProps \| { props: PopoverProps; content: string }`，[Popover API Documents](./popover?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N -ellipsis-title | Boolean / Object / Function | undefinde | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popover 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。TS 类型：`boolean \| PopoverProps \| { props: PopoverProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N +ellipsis | Boolean / Object / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。
同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| PopupProps \| { props: PopupProps; content: string }`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N +ellipsis-title | Boolean / Object / Function | undefinde | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。
同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }`。TS 类型：`boolean \| PopupProps \| { props: PopupProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/table/type.ts) | N fixed | String | left | 固定列显示位置。可选项：left/right | N min-width | String / Number | - | 透传 CSS 属性 `min-width` 到 `` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N diff --git a/packages/components/table/__test__/__snapshots__/demo.test.js.snap b/packages/components/table/__test__/__snapshots__/demo.test.js.snap index 4cc9ce8d9f..ad06c098a0 100644 --- a/packages/components/table/__test__/__snapshots__/demo.test.js.snap +++ b/packages/components/table/__test__/__snapshots__/demo.test.js.snap @@ -150,39 +150,21 @@ exports[`Table Table bordered demo works fine 1`] = ` Object { "colKey": "applicant", "ellipsis": true, - "title": "标题(布尔)", + "title": "标题", }, Object { "colKey": "status", - "ellipsis": Object { - "placement": "bottom", - "theme": "light", - }, - "ellipsisTitle": Object { - "content": [Function], - "props": Object { - "placement": "bottom", - "theme": "brand", - }, - }, - "title": "很长很长的标题用于测试表头超出省略", + "ellipsis": true, + "title": "标题", }, Object { "colKey": "channel", - "ellipsis": [Function], - "ellipsisTitle": false, - "title": "标题(函数)", - }, - Object { - "colKey": "remark", - "ellipsis": [Function], - "ellipsisTitle": [Function], - "title": "标题(函数)", + "ellipsis": true, + "title": "标题", }, Object { "colKey": "detail.email", - "ellipsis": [Function], - "ellipsisTitle": true, + "ellipsis": true, "title": "标题", }, ] @@ -191,93 +173,103 @@ exports[`Table Table bordered demo works fine 1`] = ` Array [ Object { "applicant": "内容", - "channel": "这是一段很长很长的内容", + "channel": "内容", "detail": Object { - "email": "这是一段很长很长很长的邮箱地址", + "email": "内容", }, "id": 1, - "remark": "这是一段很长很长很长的备注内容", - "status": "这是一段很长的内容", + "index": 1, + "status": "内容", }, Object { - "applicant": "这是一段很长很长很长的内容", + "applicant": "内容", "channel": "内容", "detail": Object { "email": "内容", }, "id": 2, - "remark": "内容", + "index": 2, "status": "内容", }, Object { "applicant": "内容", "channel": "内容", "detail": Object { - "email": "内容", + "email": "内容内容内容", }, "id": 3, - "remark": "内容", - "status": "这是一段很长很长很长很长的内容", + "index": 3, + "status": "内容", }, Object { "applicant": "内容", - "channel": "这是一段很长很长的内容", + "channel": "内容", "detail": Object { - "email": "这是一段很长很长很长的邮箱地址", + "email": "内容", }, "id": 4, - "remark": "这是一段很长很长很长的备注内容", - "status": "这是一段很长的内容", + "index": 4, + "status": "内容", }, Object { - "applicant": "这是一段很长很长很长的内容", + "applicant": "内容", "channel": "内容", "detail": Object { "email": "内容", }, "id": 5, - "remark": "内容", + "index": 5, "status": "内容", }, Object { "applicant": "内容", "channel": "内容", "detail": Object { - "email": "内容", + "email": "内容内容内容", }, "id": 6, - "remark": "内容", - "status": "这是一段很长很长很长很长的内容", + "index": 6, + "status": "内容", }, Object { "applicant": "内容", - "channel": "这是一段很长很长的内容", + "channel": "内容", "detail": Object { - "email": "这是一段很长很长很长的邮箱地址", + "email": "内容", }, "id": 7, - "remark": "这是一段很长很长很长的备注内容", - "status": "这是一段很长的内容", + "index": 7, + "status": "内容", }, Object { - "applicant": "这是一段很长很长很长的内容", + "applicant": "内容", "channel": "内容", "detail": Object { "email": "内容", }, "id": 8, - "remark": "内容", + "index": 8, "status": "内容", }, Object { "applicant": "内容", "channel": "内容", "detail": Object { - "email": "内容", + "email": "内容内容内容", }, "id": 9, - "remark": "内容", - "status": "这是一段很长很长很长很长的内容", + "index": 9, + "status": "内容", + }, + Object { + "applicant": "内容", + "channel": "内容", + "detail": Object { + "email": "内容", + }, + "id": 10, + "index": 10, + "status": "内容", }, ] }}" @@ -289,6 +281,99 @@ exports[`Table Table bordered demo works fine 1`] = ` `; +exports[`Table Table ellipsis demo works fine 1`] = ` + + + +`; + exports[`Table Table rowspan-colspan demo works fine 1`] = ` { mapper.forEach((demoName) => { diff --git a/packages/components/table/_example/base/index.wxss b/packages/components/table/_example/base/index.wxss deleted file mode 100644 index bc0171b967..0000000000 --- a/packages/components/table/_example/base/index.wxss +++ /dev/null @@ -1 +0,0 @@ -/* base demo 无额外样式 */ diff --git a/packages/components/table/_example/bordered/index.js b/packages/components/table/_example/bordered/index.js index f9a2339c04..85afad3f92 100644 --- a/packages/components/table/_example/bordered/index.js +++ b/packages/components/table/_example/bordered/index.js @@ -1,75 +1,31 @@ import SkylineBehavior from '@behaviors/skyline.js'; -const originalData = [ - { - id: 1, - applicant: '内容', - status: '这是一段很长的内容', - channel: '这是一段很长很长的内容', - detail: { email: '这是一段很长很长很长的邮箱地址' }, - remark: '这是一段很长很长很长的备注内容', - }, - { - id: 2, - applicant: '这是一段很长很长很长的内容', - status: '内容', - channel: '内容', - detail: { email: '内容' }, - remark: '内容', - }, - { - id: 3, - applicant: '内容', - status: '这是一段很长很长很长很长的内容', - channel: '内容', - detail: { email: '内容' }, - remark: '内容', - }, -]; - Component({ behaviors: [SkylineBehavior], data: { columns: [ - // boolean：值为 true，浮层默认显示单元格内容 - { colKey: 'applicant', title: '标题(布尔)', ellipsis: true }, - // Object：整体透传给 Popover 组件；ellipsisTitle 优先级高于 ellipsis - { - colKey: 'status', - title: '很长很长的标题用于测试表头超出省略', - ellipsis: { placement: 'bottom', theme: 'light' }, - ellipsisTitle: { props: { placement: 'bottom', theme: 'brand' }, content: () => '自定义表头浮层内容' }, - }, - // Function 返回 boolean：按行动态决定是否省略；ellipsisTitle = false 表示仅单元格超出省略 - { - colKey: 'channel', - title: '标题(函数)', - ellipsis: ({ rowIndex }) => rowIndex % 2 === 0, - ellipsisTitle: false, - }, - // Function 返回内容：自定义浮层显示的内容；表头用 Function 单独控制 - { - colKey: 'remark', - title: '标题(函数)', - ellipsis: ({ row }) => `备注：${row.remark}`, - ellipsisTitle: ({ colIndex }) => colIndex === 3, - }, - // Function 返回 Object：同时透传 Popover 属性与自定义浮层内容 - { - colKey: 'detail.email', - title: '标题', - ellipsis: ({ row }) => ({ props: { theme: 'warning' }, content: () => `邮箱：${row.detail.email}` }), - ellipsisTitle: true, - }, + { colKey: 'applicant', title: '标题', ellipsis: true }, + { colKey: 'status', title: '标题', ellipsis: true }, + { colKey: 'channel', title: '标题', ellipsis: true }, + { colKey: 'detail.email', title: '标题', ellipsis: true }, ], data: [], }, lifetimes: { attached() { const data = []; - const total = 9; + const total = 10; for (let i = 0; i < total; i += 1) { - data.push({ ...originalData[i % originalData.length], id: i + 1 }); + data.push({ + id: i + 1, + index: i + 1, + applicant: ['内容', '内容', '内容'][i % 3], + status: ['内容', '内容', '内容'][i % 3], + channel: ['内容', '内容', '内容'][i % 3], + detail: { + email: ['内容', '内容', '内容内容内容'][i % 3], + }, + }); } this.setData({ data }); }, diff --git a/packages/components/table/_example/bordered/index.wxss b/packages/components/table/_example/bordered/index.wxss deleted file mode 100644 index 0a74168579..0000000000 --- a/packages/components/table/_example/bordered/index.wxss +++ /dev/null @@ -1 +0,0 @@ -/* bordered demo 无额外样式 */ diff --git a/packages/components/table/_example/ellipsis/index.js b/packages/components/table/_example/ellipsis/index.js new file mode 100644 index 0000000000..885201d7df --- /dev/null +++ b/packages/components/table/_example/ellipsis/index.js @@ -0,0 +1,89 @@ +import SkylineBehavior from '@behaviors/skyline.js'; + +Component({ + behaviors: [SkylineBehavior], + data: { + // 组合 ellipsis + ellipsisTitle 的不同形式与取值 + // 约束：弹出层方向仅 bottom / center；弹出内容为单元格内容；弹出标题为该列表头 + columns: [ + // 1. ellipsis 为 Object：整体透传给 Popup（center 弹出 + 列表头作为标题）；content 缺省时回退为单元格内容 + { + colKey: 'applicant', + title: '申请人', + ellipsis: { placement: 'center', title: '申请人' }, + }, + // 2. ellipsis 为 Object + ellipsisTitle 为 true：表头内容也超出省略（优先级高于 ellipsis）；bottom 弹出 + { + colKey: 'status', + title: '审批状态与处理结果', + ellipsis: { placement: 'bottom', title: '审批状态' }, + ellipsisTitle: true, + }, + // 3. ellipsis 为 Object + ellipsisTitle 为 false：仅单元格超出省略，表头不省略 + { + colKey: 'channel', + title: '签署方式', + ellipsis: { placement: 'bottom', title: '签署方式' }, + ellipsisTitle: false, + }, + // 4. ellipsis 与 ellipsisTitle 均为 Object：单元格浮层与表头浮层均带列表头标题；bottom 弹出 + { + colKey: 'email', + title: '邮箱地址', + ellipsis: { placement: 'bottom', title: '邮箱地址' }, + ellipsisTitle: { placement: 'bottom', title: '邮箱地址' }, + }, + ], + data: [], + }, + lifetimes: { + attached() { + const data = [ + { + id: 1, + applicant: '贾明（kyrieJia）', + status: '审批通过，流程已全部走完', + channel: '电子签署（在线完成）', + email: 'jiaming.kyrie@example.com', + }, + { + id: 2, + applicant: '张三（threeZhang）', + status: '审批失败，请联系管理员处理', + channel: '纸质签署（线下邮寄）', + email: 'zhangsan.three@example.com', + }, + { + id: 3, + applicant: '王芳（fangWang）', + status: '审批已过期，需重新发起', + channel: '电子签署（在线完成）', + email: 'wangfang.fw@example.com', + }, + { + id: 4, + applicant: '李雷（leiLi）', + status: '审批中，等待上级确认', + channel: '纸质签署（线下邮寄）', + email: 'lilei.ll@example.com', + }, + { + id: 5, + applicant: '韩梅梅（meiHan）', + status: '审批通过，流程已全部走完', + channel: '电子签署（在线完成）', + email: 'hanmeimei.mm@example.com', + }, + ]; + this.setData({ data }); + }, + }, + methods: { + handleRowClick(e) { + console.log('[row-click]', e.detail); + }, + handleCellClick(e) { + console.log('[cell-click]', e.detail); + }, + }, +}); diff --git a/packages/components/table/_example/ellipsis/index.json b/packages/components/table/_example/ellipsis/index.json new file mode 100644 index 0000000000..e3c621db08 --- /dev/null +++ b/packages/components/table/_example/ellipsis/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-table": "tdesign-miniprogram/table/table" + } +} diff --git a/packages/components/table/_example/ellipsis/index.wxml b/packages/components/table/_example/ellipsis/index.wxml new file mode 100644 index 0000000000..dcd1ef5bdf --- /dev/null +++ b/packages/components/table/_example/ellipsis/index.wxml @@ -0,0 +1,9 @@ + diff --git a/packages/components/table/_example/rowspan-colspan/index.wxss b/packages/components/table/_example/rowspan-colspan/index.wxss deleted file mode 100644 index 8fae2cf7c7..0000000000 --- a/packages/components/table/_example/rowspan-colspan/index.wxss +++ /dev/null @@ -1 +0,0 @@ -/* rowspan-colspan demo 无额外样式 */ diff --git a/packages/components/table/_example/scroll/index.wxss b/packages/components/table/_example/scroll/index.wxss deleted file mode 100644 index 6c14f83f70..0000000000 --- a/packages/components/table/_example/scroll/index.wxss +++ /dev/null @@ -1 +0,0 @@ -/* scroll demo 无额外样式 */ diff --git a/packages/components/table/_example/stripe/index.wxss b/packages/components/table/_example/stripe/index.wxss deleted file mode 100644 index dacf7e23a1..0000000000 --- a/packages/components/table/_example/stripe/index.wxss +++ /dev/null @@ -1 +0,0 @@ -/* stripe demo 无额外样式 */ diff --git a/packages/components/table/_example/table.json b/packages/components/table/_example/table.json index 0dd71e440d..f85f125f51 100644 --- a/packages/components/table/_example/table.json +++ b/packages/components/table/_example/table.json @@ -6,6 +6,7 @@ "bordered": "./bordered", "stripe": "./stripe", "scroll": "./scroll", + "ellipsis": "./ellipsis", "rowspan-colspan": "./rowspan-colspan" } } diff --git a/packages/components/table/_example/table.wxml b/packages/components/table/_example/table.wxml index fda322b176..5ea3e8cd81 100644 --- a/packages/components/table/_example/table.wxml +++ b/packages/components/table/_example/table.wxml @@ -14,9 +14,12 @@ - + + + + diff --git a/packages/components/table/table.json b/packages/components/table/table.json index 70507629a5..0d40836af5 100644 --- a/packages/components/table/table.json +++ b/packages/components/table/table.json @@ -3,6 +3,6 @@ "styleIsolation": "apply-shared", "usingComponents": { "t-loading": "../loading/loading", - "t-popover": "../popover/popover" + "t-popup": "../popup/popup" } } diff --git a/packages/components/table/table.less b/packages/components/table/table.less index 20f3633a87..51906a4b89 100644 --- a/packages/components/table/table.less +++ b/packages/components/table/table.less @@ -7,6 +7,8 @@ @table-header-bg-color: var(--td-table-header-bg-color, @bg-color-container); @table-header-text-color: var(--td-table-header-text-color, @text-color-placeholder); @table-body-text-color: var(--td-table-body-text-color, @text-color-primary); +@table-popup-title-color: @text-color-primary; +@table-popup-title-font: @font-title-medium; @table-stripe-bg-color: var(--td-table-stripe-bg-color, @bg-color-secondarycontainer); @table-td-padding: var(--td-table-td-padding, @spacer @spacer-1); @table-th-padding: var(--td-table-th-padding, @spacer @spacer-1); @@ -111,15 +113,69 @@ white-space: nowrap; } - // 预览气泡的定位锚点 - &__popover-anchor { - position: absolute; - pointer-events: none; - } + &__popup { + &--center { + width: 480rpx; + height: 480rpx; + } + + &--bottom, + &--top { + width: 100%; + height: 436rpx; + } + + &--left, + &--right { + width: 65%; + height: 100%; + } + + &-inner { + display: flex; + flex-direction: column; + height: 100%; + box-sizing: border-box; + } + + &-title { + flex-shrink: 0; + padding: @spacer-2; + overflow: hidden; + color: @table-popup-title-color; + font: @table-popup-title-font; + font-weight: 600; + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + + &:empty { + display: none; + } + } + + &-close { + padding: @spacer-2; + } + + &-content { + flex: 1; + overflow: auto; + word-break: break-all; + color: @table-body-text-color; + box-sizing: border-box; + padding: calc(48rpx + @spacer-2 * 2) @spacer-2 @spacer-2; - // 气泡展示时需要响应交互（关闭气泡的遮罩层位于锚点内部） - &__popover-anchor--visible { - pointer-events: auto; + &--center { + padding-right: @spacer-3; + padding-bottom: @spacer-3; + padding-left: @spacer-3; + } + } + + &-title:not(:empty) + .@{table-prefix}__popup-content { + padding-top: 0; + } } // 空数据 diff --git a/packages/components/table/table.ts b/packages/components/table/table.ts index d2892a724a..8c86a093c2 100644 --- a/packages/components/table/table.ts +++ b/packages/components/table/table.ts @@ -1,7 +1,6 @@ import { SuperComponent, wxComponent } from '../common/src/index'; import config from '../common/config'; import usingConfig from '../mixins/using-config'; -import { getWindowInfo } from '../common/wechat'; import props from './base-table-props'; import type { BaseTableCol, TableRowData } from './type'; import { @@ -14,28 +13,13 @@ import { hasEllipsisColumn, isFirstColumnInSpan, isLastRowInSpan, + isTextEllipsis, resolveEllipsis, } from './utils'; const { prefix } = config; const componentName = 'table'; -/** 单元格预览气泡的默认最大宽度（px） */ -const DEFAULT_POPOVER_MAX_WIDTH = 280; - -/** 归一化气泡最大宽度，支持数字（px）与带单位字符串（如 `300px` / `600rpx`） */ -function normalizeMaxWidth(maxWidth?: string | number): string { - if (maxWidth === undefined || maxWidth === null || maxWidth === '') return `${DEFAULT_POPOVER_MAX_WIDTH}px`; - return String(formatCSSUnit(maxWidth) || `${DEFAULT_POPOVER_MAX_WIDTH}px`); -} - -/** 气泡最大宽度换算为 px，用于计算气泡相对单元格的对齐方式 */ -function maxWidthToPx(maxWidth: string | number | undefined, windowWidth: number) { - const value = normalizeMaxWidth(maxWidth); - if (value.endsWith('rpx')) return (parseFloat(value) * windowWidth) / 750; - return parseFloat(value) || DEFAULT_POPOVER_MAX_WIDTH; -} - @wxComponent() export default class Table extends SuperComponent { behaviors = [usingConfig({ componentName })]; @@ -71,19 +55,8 @@ export default class Table extends SuperComponent { hasEllipsis: false, titleClassNames: [] as string[], titleEllipsisFlags: [] as boolean[], - popoverConfig: { - placement: 'top', - theme: 'dark', - showArrow: true, - closeOnClickOutside: true, - maxWidth: `${DEFAULT_POPOVER_MAX_WIDTH}px`, - } as Record, - popoverPlacement: 'top', - popoverVisible: false, - // 每次弹出重新挂载，避免复用组件沿用上一次的坐标 - popoverMounted: false, - popoverContent: '', - popoverAnchorStyle: '', + popupProps: { placement: 'center' } as Record, + popupVisible: false, }; observers = { @@ -121,7 +94,7 @@ export default class Table extends SuperComponent { } = this.properties; const { classPrefix } = this.data; - // 开启后才渲染气泡，并为单元格/表头附加测量与定位用的类名 + // 开启后才渲染预览弹窗，并为单元格/表头附加超出省略测量用的类名 const hasEllipsis = hasEllipsisColumn((columns || []) as BaseTableCol[]); // 解析 fixedRows @@ -320,7 +293,6 @@ export default class Table extends SuperComponent { cellStyle, skipped: skipped || false, contentClass: contentClasses.filter(Boolean).join(' '), - textClass: `${classPrefix}__td-text-${rowIndex}-${colIndex}`, ellipsis: !!cellEllipsis.enabled, }; }); @@ -471,35 +443,8 @@ export default class Table extends SuperComponent { } }, - /** - * 计算气泡弹出方位。 - * 气泡以配置方位（`placement`）为准，但当单元格靠近屏幕左/右边缘时， - * 居中气泡会被贴边截断、箭头随之偏离单元格，此时改为贴边对齐以保证箭头落在单元格上。 - */ - getPopoverPlacement(this: any, contentRect: Record, config: Record) { - const { windowWidth } = getWindowInfo(); - const base = String(config.placement || 'top').split('-')[0]; - const maxWidth = maxWidthToPx(config.maxWidth, windowWidth); - const cellCenter = contentRect.left + contentRect.width / 2; - - if (cellCenter < maxWidth / 2) return `${base}-left`; - if (windowWidth - cellCenter < maxWidth / 2) return `${base}-right`; - return base; - }, - - getPopoverConfig(this: any, props: Record) { - return { - placement: props.placement || 'top', - theme: props.theme || 'dark', - showArrow: props.showArrow !== false, - closeOnClickOutside: props.closeOnClickOutside !== false, - // 限制气泡宽度，避免超长内容撑满屏幕导致定位与箭头偏移 - maxWidth: normalizeMaxWidth(props.maxWidth), - }; - }, - - /** 展示超出省略内容的预览气泡，气泡通过定位锚点跟随目标（单元格 / 表头） */ - showEllipsisPopover( + /** 展示超出省略内容的预览弹窗（仅当内容实际溢出时才弹出） */ + showEllipsisPopup( this: any, type: 'td' | 'th', rowIndex: number, @@ -511,43 +456,31 @@ export default class Table extends SuperComponent { const { classPrefix } = this.data; const suffix = type === 'th' ? `${colIndex}` : `${rowIndex}-${colIndex}`; - const nextConfig = this.getPopoverConfig(props); const query = this.createSelectorQuery(); query.select(`.${classPrefix}__${type}-content-${suffix}`).boundingClientRect(); query.select(`.${classPrefix}__${type}-text-${suffix}`).boundingClientRect(); - query.select(`.${classPrefix}`).boundingClientRect(); query.exec((res: any) => { - if (!res) return; - const [contentRect, textRect, tableRect] = res; - if (!contentRect || !textRect || !tableRect) return; - - // 文本实际尺寸大于可视尺寸，说明内容被隐藏 - const isOverflow = textRect.width - contentRect.width > 1 || textRect.height - contentRect.height > 1; - if (!isOverflow) return; - - const top = contentRect.top - tableRect.top; - const left = contentRect.left - tableRect.left; - - const payload = { - popoverAnchorStyle: `top: ${top}px; left: ${left}px; width: ${contentRect.width}px; height: ${contentRect.height}px;`, - popoverContent: content, - popoverConfig: nextConfig, - popoverPlacement: this.getPopoverPlacement(contentRect, nextConfig), - }; - - // 先卸载再挂载，确保每次弹出都重新计算坐标（复用组件会沿用上一次的 top/left） - if (this.data.popoverMounted) { - this.setData({ popoverMounted: false, popoverVisible: false }, () => - this.setData({ ...payload, popoverMounted: true, popoverVisible: true }), - ); - } else { - this.setData({ ...payload, popoverMounted: true, popoverVisible: true }); - } + const [contentRect, textRect] = res || []; + // 内容实际宽度大于可视宽度才视为溢出（对齐桌面端 scrollWidth > clientWidth） + if (!isTextEllipsis(contentRect, textRect)) return; + + this.setData({ + popupProps: { + placement: props.placement || 'center', + showOverlay: props.showOverlay !== false, + closeOnOverlayClick: props.closeOnOverlayClick !== false, + closeBtn: props.closeBtn !== false, + usingCustomNavbar: !!props.usingCustomNavbar, + title: props.title || '', + content, + }, + popupVisible: true, + }); }); }, - /** 点击表头：表头内容超出省略时，弹出气泡预览完整标题 */ + /** 点击表头：表头内容超出省略时，弹出浮层预览完整标题 */ onTitleClick(this: any, e: any) { const { colIndex } = e.currentTarget.dataset; const { columns } = this.properties; @@ -560,18 +493,13 @@ export default class Table extends SuperComponent { }); if (!resolved.enabled) return; - this.showEllipsisPopover('th', 0, colIndex, resolved.content || col.title || '', resolved.props); + this.showEllipsisPopup('th', 0, colIndex, resolved.content || col.title || '', resolved.props); }, - onPopoverVisibleChange(this: any, e: any) { + onPopupVisibleChange(this: any, e: any) { const { visible } = e.detail || {}; - if (!!visible !== this.data.popoverVisible) { - this.setData({ popoverVisible: !!visible }); - } - // 关闭时延迟卸载，保留 popover 的淡出过渡 - clearTimeout(this.popoverUnmountTimer); - if (!visible && this.data.popoverMounted) { - this.popoverUnmountTimer = setTimeout(() => this.setData({ popoverMounted: false }), 350); + if (!!visible !== this.data.popupVisible) { + this.setData({ popupVisible: !!visible }); } }, @@ -583,7 +511,7 @@ export default class Table extends SuperComponent { if (cell && col) { const resolved = resolveEllipsis(col.ellipsis, { row: data[rowIndex], col, rowIndex, colIndex }); if (resolved.enabled) { - this.showEllipsisPopover('td', rowIndex, colIndex, resolved.content || cell.content, resolved.props); + this.showEllipsisPopup('td', rowIndex, colIndex, resolved.content || cell.content, resolved.props); } } if (data && data[rowIndex] && columns && columns[colIndex]) { @@ -607,11 +535,6 @@ export default class Table extends SuperComponent { const { classPrefix } = this.data; this.triggerEvent('scroll', { e }); - // 滚动后单元格位置变化，预览气泡不再匹配，直接关闭 - if (this.data.popoverVisible) { - this.setData({ popoverVisible: false }); - } - const target = e.detail || {}; // 更新固定列滚动阴影状态 diff --git a/packages/components/table/table.wxml b/packages/components/table/table.wxml index 9f6c7b80dd..8087681215 100644 --- a/packages/components/table/table.wxml +++ b/packages/components/table/table.wxml @@ -11,7 +11,7 @@ > - {{cell.content}} + {{cell.content}} {{cell.content}} @@ -106,23 +106,24 @@ - - + - - + + {{popupProps.title}} + {{popupProps.content}} + + diff --git a/packages/components/table/type.ts b/packages/components/table/type.ts index 06c65a06f3..c55faca4ed 100644 --- a/packages/components/table/type.ts +++ b/packages/components/table/type.ts @@ -5,7 +5,7 @@ * */ import { LoadingProps } from '../loading/index'; -import { PopoverProps } from '../popover/index'; +import { PopupProps } from '../popup/index'; import type { ClassName } from '../common/common'; export interface TdBaseTableProps { @@ -168,15 +168,15 @@ export interface BaseTableCol { */ colKey?: string; /** - * 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popover 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素 + * 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。
同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素 * @default false */ - ellipsis?: boolean | PopoverProps | { props: PopoverProps; content: string }; + ellipsis?: boolean | PopupProps | { props: PopupProps; content: string }; /** - * 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popover 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }` + * 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。
同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }` * @default undefinde */ - ellipsisTitle?: boolean | PopoverProps | { props: PopoverProps; content: string }; + ellipsisTitle?: boolean | PopupProps | { props: PopupProps; content: string }; /** * 固定列显示位置 * @default left diff --git a/packages/components/table/utils.ts b/packages/components/table/utils.ts index 13df207708..3048d125f6 100644 --- a/packages/components/table/utils.ts +++ b/packages/components/table/utils.ts @@ -125,13 +125,13 @@ export interface EllipsisResult { enabled: boolean; /** 浮层展示内容，缺省时回退为单元格/表头完整内容 */ content?: string; - /** 透传给 Popover 组件的属性 */ + /** 透传给 Popup 组件的属性 */ props: Record; } /** * 解析 `ellipsis` / `ellipsisTitle` 配置。 - * 支持 `boolean` / `Object`（透传 Popover）/ `{ props, content }` / `Function`（按单元格动态返回）。 + * 支持 `boolean` / `Object`（透传 Popup）/ `{ props, content }` / `Function`（按单元格动态返回）。 * `ellipsisTitle` 优先级高于 `ellipsis`，由调用方决定取值。 */ export function resolveEllipsis(value: any, params: Record): EllipsisResult { @@ -151,7 +151,7 @@ export function resolveEllipsis(value: any, params: Record): Ellips if (typeof result === 'string') return { enabled: true, content: result, props: {} }; if (typeof result !== 'object') return { enabled: !!result, props: {} }; - // `{ props, content }` 中 props 透传 Popover；其余形式整体作为 Popover 属性透传 + // `{ props, content }` 中 props 透传 Popup；其余形式整体作为 Popup 属性透传 const props: Record = result.props && typeof result.props === 'object' ? { ...result.props } : {}; if (!result.props) { Object.keys(result).forEach((key) => { @@ -167,3 +167,14 @@ export function resolveEllipsis(value: any, params: Record): Ellips export function hasEllipsisColumn(columns: BaseTableCol[]): boolean { return (columns || []).some((col) => !!col.ellipsis || !!col.ellipsisTitle); } + +/** + * 判断单元格/表头内容是否溢出（对齐桌面端 `isTextEllipsis`：`scrollWidth > clientWidth`）。 + * 小程序无法直接取节点 `scrollWidth`，故用内层文本节点的实际宽度（≈ scrollWidth） + * 与内容容器的可视宽度（≈ clientWidth）比较，内容宽度更大即为溢出。 + * `tolerance` 用于消除 `boundingClientRect` 的亚像素误差。 + */ +export function isTextEllipsis(contentRect?: { width: number }, textRect?: { width: number }, tolerance = 1): boolean { + if (!contentRect || !textRect) return false; + return textRect.width - contentRect.width > tolerance; +} diff --git a/packages/uniapp-components/table/README.en-US.md b/packages/uniapp-components/table/README.en-US.md index ec2af5d139..73b53a5231 100644 --- a/packages/uniapp-components/table/README.en-US.md +++ b/packages/uniapp-components/table/README.en-US.md @@ -50,8 +50,8 @@ align | String | left | align type。options: left/right/center | N cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams) => string)` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N col-key | String | - | unique key for column | N -ellipsis | Boolean / Object / Function | false | ellipsis cell content。Typescript: `boolean \| PopoverProps \| { props: PopoverProps; content: string }`，[Popover API Documents](./popover?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N -ellipsis-title | Boolean / Object / Function | undefinde | ellipsis title content。Typescript: `boolean \| PopoverProps \| { props: PopoverProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N +ellipsis | Boolean / Object / Function | false | ellipsis cell content。Typescript: `boolean \| PopupProps \| { props: PopupProps; content: string }`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N +ellipsis-title | Boolean / Object / Function | undefinde | ellipsis title content。Typescript: `boolean \| PopupProps \| { props: PopupProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N fixed | String | left | fixed current column to left or right。options: left/right | N min-width | String / Number | - | add CSS property `min-width` to HTML Element ``，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) support `minWidth` | N width | String / Number | - | column width | N diff --git a/packages/uniapp-components/table/README.md b/packages/uniapp-components/table/README.md index f3fb1c49f2..43bf7988a6 100644 --- a/packages/uniapp-components/table/README.md +++ b/packages/uniapp-components/table/README.md @@ -95,8 +95,8 @@ align | String | left | 列横向对齐方式。可选项：left/right/center | cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。
如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams) => string)` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N -ellipsis | Boolean / Object / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popover 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| PopoverProps \| { props: PopoverProps; content: string }`，[Popover API Documents](./popover?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N -ellipsis-title | Boolean / Object / Function | undefinde | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popover 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。TS 类型：`boolean \| PopoverProps \| { props: PopoverProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N +ellipsis | Boolean / Object / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。
同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素。TS 类型：`boolean \| PopupProps \| { props: PopupProps; content: string }`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N +ellipsis-title | Boolean / Object / Function | undefinde | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。
同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }`。TS 类型：`boolean \| PopupProps \| { props: PopupProps; content: string }` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N fixed | String | left | 固定列显示位置。可选项：left/right | N min-width | String / Number | - | 透传 CSS 属性 `min-width` 到 `` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N diff --git a/packages/uniapp-components/table/type.ts b/packages/uniapp-components/table/type.ts index c1ce54f4bd..5ba5934b51 100644 --- a/packages/uniapp-components/table/type.ts +++ b/packages/uniapp-components/table/type.ts @@ -5,7 +5,7 @@ * */ import type { TdLoadingProps as LoadingProps } from '../loading/type'; -import type { TdPopoverProps as PopoverProps } from '../popover/type'; +import type { TdPopupProps as PopupProps } from '../popup/type'; import type { ClassName } from '../common/common'; export interface TdBaseTableProps { @@ -121,15 +121,15 @@ export interface BaseTableCol { */ colKey?: string; /** - * 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popover 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素 + * 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。
值为 `true`，则超出省略浮层默认显示单元格内容；
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。
同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }`。
请注意单元格超出省略的两个基本点：1. 内容元素是内联元素或样式（自定义单元格内容时需特别注意）；2. 内容超出父元素 * @default false */ - ellipsis?: boolean | PopoverProps | { props: PopoverProps; content: string }; + ellipsis?: boolean | PopupProps | { props: PopupProps; content: string }; /** - * 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popover 组件，则自动透传属性到 Tooltip 组件，可用于调整浮层背景色和方向等特性。
同时透传 Popover 属性和自定义浮层内容，请使用 `{ props: { theme: 'light' }, content: () => 'something' }` + * 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。
值为 `true`，则超出省略的浮层默认显示表头全部内容；
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容；
值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整弹窗方向等特性。
同时透传 Popup 属性和自定义浮层内容，请使用 `{ props: { showOverlay: false }, content: () => 'something' }` * @default undefinde */ - ellipsisTitle?: boolean | PopoverProps | { props: PopoverProps; content: string }; + ellipsisTitle?: boolean | PopupProps | { props: PopupProps; content: string }; /** * 固定列显示位置 * @default left @@ -181,8 +181,7 @@ export interface BaseTableCellParams { } export type TableColumnClassName = - | ClassName - | ((context: CellData) => ClassName); + ClassName | ((context: CellData) => ClassName); export interface CellData extends BaseTableCellParams { type: 'th' | 'td';