效果图:
**
第一种实现方式:element 提供的 “render-header” 方法
**
例子:
// An highlighted block
<el-table>
<el-table-column sortable
min-width="110"
:render-header="(h, { column, $index }) => renderHeader(h, { column, $index },'xx价:xxx价')"
label="xx价">
<template slot-scope="scope">
<p>¥{{scope.row.xx}}</p>
</template>
</el-table-column>
</el-table>
renderHeader (h, { column, $index }, obj) {
// console.log(h, { column, $index }, obj);
return h("span", [
h("span", column.label + " ", {
align: "left",
}),
h(
"el-popover",
{
props: {
placement: "top",
// width: "200",
trigger: "hover"
}
},
[
h("span", obj, {
class: "text-align: right; margin: 0"
}),
h("i", {
class: "el-icon-info",
// style: "color:red,margin:18px",
slot: "reference"
})
]
)
]);
}
第二种实现方式:在 template 中 设置 slot=“header”
例子:直接实现上面图片效果(推荐这种)
<el-table>
<el-table-column sortable
min-width="110">
<template slot="header">
<span>xxx价</span>
<el-popover placement="top"
width="200"
trigger="hover"
content="xx价:xxxxxxx价">
<i class="el-icon-info"
slot="reference"></i>
</el-popover>
</template>
<template slot-scope="scope">
<p>¥{{scope.row.xx}}</p>
</template>
</el-table-column>
</el-table>