Table - Highlight & Style

Through table properties and column configuration, implement row highlight, column highlight, header icons, content wrapping and overflow style control.

Highlight Row

After setting highlight-current-row, clicking a table row will highlight it.

Highlight Current Row

Highlight Column

Dynamically set column className to is-column-highlight through the cell-click event to highlight the entire column when clicking a cell.

Highlight Column

Header Prefix Icon

Add icons before header text through column config headerPrefixIcon property. Supports passing Vue components (such as SVG icon components).

Header Prefix Icon

Header Suffix Icon

Add icons after header text through column config headerSuffixIcon property, commonly used to mark required fields or hint information.

Header Suffix Icon

Auto Wrap

Add class="is-auto-wrap" to yh-table to enable automatic cell content wrapping, suitable for scenarios displaying long text.

Auto Wrap

Overflow Hidden

Configure column with showOverflowTooltip: true to automatically ellipsis content that exceeds column width, showing a full content Tooltip on hover.

Overflow Hidden + Tooltip

API

Highlight Properties

Property	Description	Type	Default
highlight-current-row	Whether to highlight the currently clicked row	boolean	false
current-row-key / v-model:current-row-key	Key value of the currently highlighted row	string | number	—

Highlight Events

Event	Description	Parameters
current-change	Triggered when the current row changes	(currentRow, oldRow)

Column Highlight

Implement column highlight by dynamically setting the is-column-highlight class name through the column className property.

Property	Description	Type	Default
className	Custom class name for the column	string	—

Header Icon Properties

Property	Description	Type	Default
headerPrefixIcon	Header prefix icon (Vue component or string)	string | Component	—
headerSuffixIcon	Header suffix icon (Vue component or string)	string | Component	—

Wrapping & Overflow

Usage	Description	Type
class="is-auto-wrap"	Table-level auto wrap (add to yh-table)	string
showOverflowTooltip	Column-level overflow hidden, show tooltip on hover	boolean | TooltipConfig
ellipsis	Column-level ellipsis	boolean | EllipsisConfig

showOverflowTooltip Config (TooltipConfig)

Property	Description	Type	Default
effect	Tooltip theme	'dark' | 'light'	'dark'
placement	Tooltip placement	string	'top'
offset	Tooltip offset	number	—

ellipsis Config (EllipsisConfig)

Property	Description	Type	Default
tooltip	Whether to show tooltip when truncated	boolean	false
lineClamp	Limit the number of displayed rows	number	—