如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加竖线、横线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！

ElementUI、ElementPlus树组件功能很不错，但是官方的树形组件没有显示线条，感觉稍微不够大气。于是网上查了一些资料，找了很多也感觉也不够完美，最后找到一个还不错的实现方案，并且再美化改进一下，分享给大家。

一、基于Vue2+ElementUI的例子

（1）示例代码

（2）效果如下~

二、基于Vue3+ElementPlus的例子

1.普通示例

（1）示例代码

（2）效果如下~

 2.高级示例

（1）示例代码

（2）效果如下~

三、基于Vue3+DevUI的附赠例子

1.导入相关依赖

npm i vue-devui -D

2.官方文档

https://vue-devui.github.io/

3.普通示例

（1）示例代码

（2）效果如下~

4.高级示例

（1）示例代码

（2）效果如下~

四、参考资料

vue树形控件tree的使用方法_vue.js_脚本之家

Vue DevUI