Table 表格 - 高亮与样式

通过表格属性和列配置，实现行高亮、列高亮、表头图标、内容换行与溢出等样式控制。

高亮行

设置 highlight-current-row 后，点击表格某行会高亮该行。

高亮当前行

高亮列

通过 cell-click 事件动态设置列的 className 属性为 is-column-highlight，实现点击单元格高亮整列。

高亮列

标题前缀图标

通过列配置 headerPrefixIcon 属性可在表头文字前添加图标。支持传入 Vue 组件（如 SVG 图标组件）。

表头前缀图标

标题后缀图标

通过列配置 headerSuffixIcon 属性可在表头文字后添加图标，常用于标记必填字段或提示信息。

表头后缀图标

自动换行

在 yh-table 上添加 class="is-auto-wrap" 可以让单元格内容自动换行，适用于需要展示长文本的场景。

自动换行

溢出隐藏

通过列配置 showOverflowTooltip: true 使超出列宽的内容自动省略，鼠标悬浮时显示完整内容的 Tooltip。

溢出隐藏 + Tooltip

API

高亮属性

属性	说明	类型	默认值
highlight-current-row	是否高亮当前点击行	boolean	false
current-row-key / v-model:current-row-key	当前高亮行的 key 值	string | number	—

高亮事件

事件名	说明	参数
current-change	当前行变化时触发	(currentRow, oldRow)

列高亮

通过列的 className 属性动态设置 is-column-highlight 类名实现列高亮。

属性	说明	类型	默认值
className	列的自定义类名	string	—

表头图标属性

属性	说明	类型	默认值
headerPrefixIcon	表头前缀图标（Vue 组件或字符串）	string | Component	—
headerSuffixIcon	表头后缀图标（Vue 组件或字符串）	string | Component	—

换行与溢出

用法	说明	类型
class="is-auto-wrap"	表格级别的自动换行（添加到 yh-table）	string
showOverflowTooltip	列级别的溢出隐藏，悬浮显示 Tooltip	boolean | TooltipConfig
ellipsis	列级别的省略号	boolean | EllipsisConfig

showOverflowTooltip 配置 (TooltipConfig)

属性	说明	类型	默认值
effect	Tooltip 主题	'dark' | 'light'	'dark'
placement	Tooltip 位置	string	'top'
offset	Tooltip 偏移	number	—

ellipsis 配置 (EllipsisConfig)

属性	说明	类型	默认值
tooltip	是否在省略时显示 Tooltip	boolean	false
lineClamp	限制显示的行数	number	—