gpt4 book ai didi

vuejs2 - 如何在Element库的table-column中使用render-header函数?

转载 作者:行者123 更新时间:2023-12-02 03:41:23 25 4
gpt4 key购买 nike

我需要为元素表提供一个自定义表头(标题 + svg + 工具提示)。我试图使用“渲染标题”功能,但没有运气。更具体地说 - 如何打印每列的标签 + SVG(悬停时带有工具提示)?

HTML:

 <el-table-column property="name" label="Indicator" :render-header="appendTip">
</el-table-column>

脚本:

appendTip(h, { column }) {
return h(
"el-tooltip",
{
attrs: {
effect: "dark",
content: "Test",
placement: "top"
}
},
[h("el-button", ["Tooltip"])]
);

谢谢。

最佳答案

这是我的解决方案:

appendTip(h, { column, $index }) {
// Function(h, { column, $index })
return h("span", [
column.label,
h(
"el-popover",
{
props: {
placement: "top",
// title: "hello",
// width: "200",
trigger: "hover",
content: this.test(column.label)
}
},
[
h(
"i",
{
slot: "reference",
class: "el-icon-info"
//style: "color:gray;font-size:16px;margin-left:10px;"
},
""
)
]
)
]);

我用这个作为引用: https://v2.vuejs.org/v2/guide/render-function.html

关于vuejs2 - 如何在Element库的table-column中使用render-header函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51348701/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com