vue+element 表头说明文字

vue+element 表头说明文字

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>