给 el-table-column 添加 :render-header="renderHeader"
// 表头增加提示
// render 事件
renderHeader(h, { column }) {
return h("div", [
h("span", column.label),
h(
"el-tooltip",
{
props: {
effect: "dark",//背景颜色
content: "提示内容",
placement: "top",
},
},
[
h("i", {
class: "el-icon-question", //icon图标
style: "color:#909399;margin-left:5px;",
}),
],
{
content: "",
}
),
]);
},
当鼠标放到“❓”上面是,弹出一个小框进行提示:
代码如下:
参考文档: