方法一、render-header=“renderPrice”(此方法无法使tooltip换行)
只是单纯的想在table中添加图标和tooltip
在el-table-column中绑定:render-header=“renderPrice”(此方法无法使tooltip换行)
<el-table-column label="age" align="center" width="200">
</el-table-column>
renderPrice(h, { column, $index }) {
return [
column.label,
h(
'el-tooltip',
{
props: {
content: '11111'
placement: 'top' // 悬停内容展示的位置
}
},
[h('span', { class: { 'el-icon-question': true }})] // 图标
)
]
},
方法二、
使用组件插槽,elementui已封装好
<el-table-column align="center" label="缩力" width="150px">
<template v-slot:header='scope'> // 插槽插入header
<span>
缩力
<el-tooltip
:aa="scope"
class="item"
effect="dark"
placement="top-start"
>
<i class="el-icon-question"> </i>
<div style="width: 200px" slot="content">
弱宫缩:宫缩持续20-30秒 <br />
中度宫缩:宫缩持续30-40秒<br />
强度宫缩:宫缩持续40秒以上
</div>
</el-tooltip>
</span>
</template>
</el-table-column>