1、问题描述:在开发的过程中发现使用iview 的树形结构,但是数据太长,需要超长隐藏,显示...,并且鼠标滑过标题显示标题内容。
利用render自定义Tooltip,鼠标滑过显示树的内容。
<Tree
:data="data1"
:load-data="loadData"
:render="renderContent"
style="margin-left: 16px;"
></Tree>
renderContent(h, { root, node, data }) {
return h(
"span",
{
style: {
display: "inline-block",
width: "100%",
cursor: "pointer"
},
on: {
click: () => {
this.clickTree1(data);
}
}
},
[
h(
"Tooltip",
{
props: {
placement: "top-end",
transfer: true
}
},
[
data.title,//控制树形显示的内容
h(
"span",
{
slot: "content",
style: {
whiteSpace: "normal"
}
},
data.title//控制Tooltip显示的内容
)
]
),
h("span", {
style: {
display: "inline-block",
float: "right",
marginRight: "32px"
}
})
]
);
},
效果如图: