两种方式:
1.采用render-header方法,在el-table-column 添加render-header属性,功能就表头为责任人的添加一个问好,鼠标hover显示一个提示。这种方给表头添加样式比较麻烦,里面的代码要自行组装。
<el-table-column
prop="dutyName"
label="责任人"
\n:render-header="headercellclassname"
>
methods: {
headercellclassname(h, { column, $index }) {
\n// 自定义表格label样式
\nif (column.label !== "责任人") {
return;
}
return\nh("div", [
\nh("span", column.label),
h(
\n"el-popover",
{
props: {
\ncontent: "最多显示5位责任人,如有更多责任人,请进入项目详情查看",
\nplacement: "top",
trigger:\n"hover",
},
},
[
\nh("span", {
class:\n"el-icon-warning",
style:\n"color:#c7c9d4",
slot:\n"reference",
}),
]
),
]);
},
}
2.使用表格自带slot属性。通过在template标签上添加slot="name" 实现自定义表头,也就是在同一个table-column下面可以同时存在原本显示每行内容的template和自定义表头的template。
<el-table-column>
<template slot="header">
\n<span>责任人</span>
\n<el-popover
\nplacement="top"
\ntrigger="hover"
content="最多显示5位责任人,如有更多责任人,请进入项目详情查看">
<i\nclass="el-icon-warning" slot="reference"\nstyle="color:#c7c9d4"></i>
\n</el-popover>
</template>
<template\nslot-scope="scope">
<span>这里是每行显示的内容</span>
</template >
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
</el-table-column>
效果如下: