Table 表格 - 高亮与样式
通过表格属性和列配置，实现行高亮、列高亮、表头图标、内容换行与溢出等样式控制。
高亮行
设置 highlight-current-row 后，点击表格某行会高亮该行。
点击行可高亮选中，再次点击其他行会切换高亮。
姓名 | 年龄 | 部门 | 薪资 | 地址 |
|---|
张三 | 28 | 技术部 | 15000 | 北京市朝阳区建国路88号SOHO现代城A座1205室 |
李四 | 32 | 产品部 | 18000 | 上海市浦东新区世纪大道100号上海环球金融中心 |
王五 | 25 | 设计部 | 14000 | 广州市天河区天河路385号太古汇一座 |
赵六 | 35 | 运营部 | 22000 | 深圳市南山区深南大道9966号威盛科技大厦 |
钱七 | 29 | 市场部 | 16000 | 杭州市西湖区文三路398号东信大厦B座 |
高亮当前行
高亮列
通过 cell-click 事件动态设置列的 className 属性为 is-column-highlight，实现点击单元格高亮整列。
点击单元格可高亮整列。
姓名 | 年龄 | 部门 | 薪资 | 地址 |
|---|
张三 | 28 | 技术部 | 15000 | 北京市朝阳区建国路88号SOHO现代城A座1205室 |
李四 | 32 | 产品部 | 18000 | 上海市浦东新区世纪大道100号上海环球金融中心 |
王五 | 25 | 设计部 | 14000 | 广州市天河区天河路385号太古汇一座 |
赵六 | 35 | 运营部 | 22000 | 深圳市南山区深南大道9966号威盛科技大厦 |
钱七 | 29 | 市场部 | 16000 | 杭州市西湖区文三路398号东信大厦B座 |
高亮列
标题前缀图标
通过列配置 headerPrefixIcon 属性可在表头文字前添加图标。支持传入 Vue 组件（如 SVG 图标组件）。
姓名 | 年龄 | 部门 | 地址 |
|---|
张三 | 28 | 技术部 | 北京市朝阳区建国路88号SOHO现代城A座1205室 |
李四 | 32 | 产品部 | 上海市浦东新区世纪大道100号上海环球金融中心 |
王五 | 25 | 设计部 | 广州市天河区天河路385号太古汇一座 |
表头前缀图标
标题后缀图标
通过列配置 headerSuffixIcon 属性可在表头文字后添加图标，常用于标记必填字段或提示信息。
姓名 | 年龄 | 部门 | 薪资 | 地址 |
|---|
张三 | 28 | 技术部 | 15000 | 北京市朝阳区建国路88号SOHO现代城A座1205室 |
李四 | 32 | 产品部 | 18000 | 上海市浦东新区世纪大道100号上海环球金融中心 |
王五 | 25 | 设计部 | 14000 | 广州市天河区天河路385号太古汇一座 |
表头后缀图标
自动换行
在 yh-table 上添加 class="is-auto-wrap" 可以让单元格内容自动换行，适用于需要展示长文本的场景。
姓名 | 内容描述 | 状态 |
|---|
张三 | 这是一段非常长的文本内容，用来测试单元格自动换行的效果，可以看到文字会自动换行而不是被截断。实际项目中经常需要展示较长的描述信息。 | 进行中 |
李四 | 短文本 | 已完成 |
王五 | 这也是一段较长的内容，包含了各种细节描述，例如项目的需求分析文档、功能设计说明以及测试验收标准等信息。 | 待审核 |
自动换行
溢出隐藏
通过列配置 showOverflowTooltip: true 使超出列宽的内容自动省略，鼠标悬浮时显示完整内容的 Tooltip。
姓名 | 地址（溢出隐藏 + Tooltip） | 部门 |
|---|
张三 | 北京市朝阳区建国路88号SOHO现代城A座1205室 | 技术部 |
李四 | 上海市浦东新区世纪大道100号上海环球金融中心 | 产品部 |
王五 | 广州市天河区天河路385号太古汇一座 | 设计部 |
赵六 | 深圳市南山区深南大道9966号威盛科技大厦 | 运营部 |
钱七 | 杭州市西湖区文三路398号东信大厦B座 | 市场部 |
溢出隐藏 + 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 | — |