24｜树：如何设计一个树形组件？
该思维导图由 AI 生成，仅供参考
组件功能分析
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文介绍了如何设计和实现树形组件。树形组件是前端开发中常见的组件，具有无限层级的特点，常用于后台管理系统的菜单管理、文件夹管理等场景。文章首先分析了树形组件的功能需求，包括节点展开收起、复选框选择、父节点自动选中等。接着介绍了递归组件的设计思路，指出树形结构天然适合递归，通过算法题展示了递归的核心逻辑和终止条件。最后，以Element3的Tree组件使用方式和递归算法为例，展示了树形组件的实现细节。通过本文，读者可以了解树形组件的设计思路和递归算法的应用，对前端开发中树形结构的处理有更深入的理解。 文章详细介绍了树形组件的设计和实现过程，包括Tree组件的容器设计、TreeNode组件的渲染、自定义渲染内容等。同时，还提到了对树形节点进行性能优化的思考题，引发读者思考和讨论。整体而言，本文内容涵盖了树形组件的设计、实现和优化，对前端开发人员具有一定的指导意义。
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
全部留言(13)
- 最新
- 精选
一个自闭的人element3源码阅读和分析 -.-|||作者回复: 你好，这一讲主要是演示和剖析element3源码，后面会有ts组件库的加餐的
2021-12-159
KLonILo最近几讲，我得0.75倍速还得停下来自己看几遍还看不懂，听个大概吧作者回复: 可以辅助一下github上的代码看下Element3的代码
2021-12-2323
把西红柿变成番茄_o这几节完了啊，对于新手全听不懂，对于高手估计都会了吧，有点尴尬编辑回复: 可以具体说说你疑惑的问题不～
2022-01-251
亮在引入一个组件后， node_moudules 报错， 比如vue3.0引入element-plus后会报一些 类似这样的错误：Uncaught Error: Cannot find module 'vue' at webpackMissingModule (app.js:formatted:2896) at Module../src/main.js； 网上找了一遍也没找到能的解决方法， 遇到这种情况， 应该从哪些方面入手呢， 直接调试node_modules吗？作者回复: 我没咋用过element-plus，不过碰见node_modules报错的，首先要做的就是去github 提issue，重要bug维护者会优先修复发版，如果不行的话，就把这个框架从github fork一份到本地，通过npm link的方式维护 直接调试node_modules不是特别建议，哪怕现在解决了问题，也需要吧代码维护到git里，并且后续作者修复了还没法合并
2021-12-171
Hurrah! 🔥请问，这个部分代码在哪里？作者回复: 你好，Tree的代码在这里 https://github.com/hug-sun/element3/blob/master/packages/element3/packages/tree/Tree.vue
2022-01-11
ll
关于思考题： 节点渲染的逻辑 v-for=“child in tree.root.childNode”，如果 childNode 的 length, 这里假设 n=10000。这就是渲染问题的产生的原因，因为 n 的数量不 “合理”，什么是合理的 n，显示区域中能容纳 childNode 的数量就是 n 的合理数量。 解决方案： 1. v-for=“child in deQue”， 这里deQue是个“双端队列”，容量 n 共通过 显示高度/treeNode 高度算出。 2. 通过监听显示区域的 “scroll position” 操作进出 deQue 的数据节点。 大概就是这么个思路。2022-01-183- Geek_d9cd5a大圣老师，能不能加个餐，讲一下虚拟列表2022-01-053
海阔天空树形组件在实际项目中懒加载的模式用得比较多。teree-node 内部定制 tree-node-content 组件基本上可以满足我们对树的操作了。2021-12-151
聂旋“这个时候我们节点需要支持内容的自定义，然后我们注册了 el-node-content 组件。” 请问这句话啥意思？能不能写的有逻辑一点！2024-01-15归属地：陕西- 俊俊大魔王太快了，感觉跟不上，不知道是我悟性不够，还是知识太难。2023-12-19归属地：上海1