elementui表格中tip设置_Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用...

render-header

render-header在官方文档中的介绍是这样的：

参数

说明

类型

可选值

默认值

render-header

列标题 Label 区域渲染使用的 Function

Function(h, { column, $index })

—

—

修改列标题样式

1.在列标题后面加一个图标。

以element-ui官方文档一个table表格为例，我们在地址的后面加一个定位标志的图标，代码如下：

:data="tableData2"

style="width: 100%"

:row-class-name="tableRowClassName">

prop="date"

label="日期"

width="180">

prop="name"

label="姓名"

width="180">

prop="address"

label="地址" :render-header="renderHeader"> // 加入render事件

.el-table .warning-row {

background: oldlace;

}

.el-table .success-row {

background: #f0f9eb;

}

export default {

methods: {

tableRowClassName({row, rowIndex}) {

if (rowIndex === 1) {

return 'warning-row';

} else if (rowIndex === 3) {

return 'success-row'