vue+element 表头说明文字
第一种直接hover 表头出现说明文字
html:
<el-table-column prop="last_result" label="上次评估结果" width="120" :render-header="renderHeader"></el-table-column>
js:
methods: {
renderHeader(h, {column}) {
return h(
'div', [
h('el-tooltip', {
props: {
effect: 'dark',
content: '测试测试',
placement: 'top',
},
},
[h('span', column.label)])
]
)
},
}
第二种hover 给表头添加图标,hover图标时出现说明
html:
<el-table-column prop="last_result" label="上次评估结果" width="120">
<template slot="header">
<span>测试1</span>
<el-tooltip popper-class="tooltip" placement="top">
<i class="el-icon-warning-outline"></i>
<div slot="content" class="tooltip-content">
<div>测试测试</div>
</div>
</el-tooltip>
</template>
</el-table-column>