iview tree层级太多显示内容太长，增加Tooltip文字提示

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"

}

})

]

);

},

效果如图：