2024年4月8日发(作者：)

elementui table单元格样式

一、表格单元格样式

ElTable以行为单位，行中的单元格有以下样式控制:

： 指定某一行的某个单元格占据几行几列，即跨行跨列，

默认值为1

：单元格水平对齐，默认值为‘left’，可选值为‘left’,

‘center’, ‘right’

Align：表头单元格水平对齐，默认值为‘left’，可选

值为‘left’, ‘center’, ‘right’

-overflow-tooltip：当内容过长被隐藏时显示tooltip，

默认值为true

-name：单元格的自定义类名

-class-name：表头单元格的自定义类名

-width：单元格最小宽度

示例代码：

:data='tableData'

border

style='width: 100%'>

prop='date'

label='日期'

- 1 -

width='180'

:span='2'

:align=''center''

:header-align=''center''

:show-overflow-tooltip='false'

:class-name=''test-class-name''

:label-class-name=''test-label-class-name''

:min-width='100'

>

二、单元格渲染

ElTable单元格可以使用render渲染的方式实现自定义渲染功

能，render渲染函数会接受三个参数(h, { row, column, rowIndex,

columnIndex })，分别代表createElement函数，当前行所对应的数

据对象，当前列对象，当前行索引，当前列索引。

- 2 -