![[element-ui] el-table表格頭添加圖標(biāo)-鼠標(biāo)移入顯示el-tooltip提示信息](https://imgs.yssmx.com/Uploads/2023/07/512233-1.png)
方法一、render-header=“renderPrice”(此方法無(wú)法使tooltip換行)
只是單純的想在table中添加圖標(biāo)和tooltip
在el-table-column中綁定:render-header=“renderPrice”(此方法無(wú)法使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' // 懸停內(nèi)容展示的位置
}
},
[h('span', { class: { 'el-icon-question': true }})] // 圖標(biāo)
)
]
},
方法二、
使用組件插槽，elementui已封裝好文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-512233.html
<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">
弱宮縮：宮縮持續(xù)20-30秒 <br />
中度宮縮：宮縮持續(xù)30-40秒<br />
強(qiáng)度宮縮：宮縮持續(xù)40秒以上
</div>
</el-tooltip>
</span>
</template>
</el-table-column>
elementUI表格頭添加圖標(biāo)-鼠標(biāo)移入顯示el-tooltip提示信息文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-512233.html
到了這里，關(guān)于[element-ui] el-table表格頭添加圖標(biāo)-鼠標(biāo)移入顯示el-tooltip提示信息的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
