最近项目有用到树形控件，但是内容太长，需要利用tooltip移入后显示，于是瞄准了render函数。 ``` <Tree :data="data" :render="renderContent" class="demo-tree-render"></Tree> ``` 然后再methods里面写上： ``` renderContent(h, { root, node, data }) { return h( "span",{ style: { display: "inline-block", width: "100%", cursor: "pointer" } }, [ h( "Tooltip", { props: { placement: "top-start", transfer: true } }, [ data.title, //控制树形显示的内容 h( "span", { slot: "content", style: { whiteSpace: "normal" } }, data.title //控制Tooltip显示的内容 ) ] ), h("span", { style: { display: "inline-block", float: "right", marginRight: "32px" } }) ] ); }, ``` 关于三个参数，官方文档解释如下： > Render 函数的第二个参数，包含三个字段： > root <Array>：树的根节点 > node <Object>：当前节点 > data <Object>：当前节点的数据 > 通过合理地使用 root、node 和 data 可以实现各种效果，其中，iView 给每个节点都设置了一个`nodeKey`字段，用来标识节点的 id。 > > Render 函数分两种，一种是给当前树的每个节点都设置同样的渲染内容，此 render 通过 Tree 组件的属性`render`传递；另一种是单独给某个节点设置，在该节点的`render`字段内设置；同时设置时，会优先使用当前节点的 Render 函数。