feat: improve long text display in table chart

This commit is contained in:
ulleo
2026-01-22 17:30:27 +08:00
committed by ulleo
parent 92d2190638
commit bb0a6ab54e
@@ -8,6 +8,7 @@ import {
type S2MountContainer,
type SortMethod,
type Node,
type CellTextWordWrapStyle,
} from '@antv/s2'
import { debounce, filter } from 'lodash-es'
import { i18n } from '@/i18n'
@@ -70,6 +71,15 @@ export class Table extends BaseChart {
data: this.data,
}
const cellTextWordWrapStyle: CellTextWordWrapStyle = {
// 最大行数,文本超出后将被截断
maxLines: 3,
// 文本是否换行
wordWrap: true,
// 可选项见:https://g.antv.antgroup.com/api/basic/text#textoverflow
textOverflow: 'ellipsis',
}
const s2Options: S2Options = {
width: 600,
height: 360,
@@ -146,6 +156,24 @@ export class Table extends BaseChart {
},
},
},
// 如果有省略号, 复制到的是完整文本
interaction: {
copy: {
enable: true,
withFormat: true,
withHeader: true,
},
brushSelection: {
dataCell: true,
rowCell: true,
colCell: true,
},
},
style: {
colCell: cellTextWordWrapStyle,
// 如果是数值不建议换行, 容易产生歧义
dataCell: cellTextWordWrapStyle,
},
placeholder: {
cell: '-',
empty: {