用户56828078185

【Vue项目实战7】（上）el-tree==＞添加分级图标==＞添加引导线样式==＞【node-click】点击节点展示全部父节点信息

1. 设置展开，折叠图标 2. 设置节点前的图标

马赛克效果图 方式一 使用base64背景图 方式二 使用渐变背景图 完整代码 el-tree图标修改效果图 方式一 js修改指定dom的innerHTML 方式二 css隐藏+伪元素 方式三 css

1.HTML页面渲染 构建三个面板，面板1渲染需要被拖动的节点树，面板2和面板3用于接收并展示被拖动到该区域的节点，且面板1和面板2必须是固定的高度（自适应的目前不适用，无法获取固定的 x，y 范围）

本插件在element-plus树形组件基础上，进行了二次封装。适用于vue3项目，在具备了element-plus 的Tree组件的所有功能的基础上，又增加了组织树展示效果，并同时支持拖拽

最近在项目中碰到了一个这样的树状结构目录，效果如下 代码片段如下 CSS tree (juejin.cn) 如果用到了 Ant Design 这样的框架，那可以直接用现成的组件。如果没有用到这样的框架

问题描述 树组件如果数据比较多的话，一次性把整棵树的数据都请求到，略有耗时。所以为了优化性能，我们就要实现树组件懒加载的效果，也就是当我们点击树节点的时候，再去向后端发请求，获取对应点击的树节点下的数