1.绑定属性:render-content="renderContent"
<div v-for="(item, index) in baseSizeTypeData" :key="index">
<el-tree
@node-click="handleNodeClick"
:data="item.configMatterClasses"
default-expand-all
highlight-current
:expand-on-click-node="false"
:props="{ children: 'children', label: 'name' }"
:render-content="renderContent"
>
</el-tree>
</div>
2.方法
methods: {
//提示框
renderContent(h, { node, data, store }) {
return (
<div class="custom-tree-node">
<el-tooltip class="item" effect="dark" placement="top">
//提示框
<div slot="content">{node.label}</div>
//标签
<p class="tooltip">{node.label}</p>
</el-tooltip>
</div>
);
},
}
3.通过css宽度设置溢出隐藏
.tooltip{
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}