ElementUI 中 table 表格自定义表头 Tooltip 文字提示
table 表格需要增加提示文案说明,没有现成的属性添加,我们可以通过 render-header
来渲染表头。
代码如下:
<el-table-column
align="center"
label="价格"
:render-header="renderTipsHeader"
>
<template slot-scope="scope">
{{ scope.row.amount }}
</template>
</el-table-column>
renderTipsHeader:
renderTipsHeader (h,{column}) {
return h(
'div',[
h('span', column.label),
h('el-tooltip',{
props:{
effect:'dark',
content:'提示文案',
placement:'top'
},
},[
h('i', {
class:'el-icon-question',
style:'color:#409EFF;margin-left:5px;'
})
])
]
);
}
效果如图:
render-header 列标题 Label 区域渲染使用的 Function
Function(h, { column, $index })
感兴趣可以打印出来看看,这里还有更复杂的应用–github.com/Darkerxi/ElementUI-Tabl...
参考文章:
element-ui 自定义 table 表头,修改标题样式、添加 tooltip 及 :render-header 使用简介
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: