基于Vue递归组件的嵌套列表组件设计

最新推荐文章于 2025-06-17 14:15:00 发布

Kate0204

最新推荐文章于 2025-06-17 14:15:00 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：打工人的笔记文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/katherine5980/article/details/106943970

本文详细介绍了如何使用Vue的递归组件来设计一个可以成组、嵌套成组并支持展开收起的元素列表。通过创建一个名为element-item的组件，递归渲染数据树中的每个元素及其子元素。在实现过程中，重点关注了Vue的响应式数据原理，确保在添加或修改数据时能触发自动更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求背景：

元素列表可以成组、可以嵌套成组，组可以展开收起。

技术选择：

Vue的递归组件机制。其实也就是一个引用了自己的组件。

实现方法：

列表的data为一个数组类型的树elementsTree，每个item除了自己的id、name等属性外，一个数组类型的elements属性，表示子元素列表。

使用Vue.component注册组件element-item，每个element-item除了渲染自己的名称等样式外，还根据elements属性循环渲染自己的子元素列表。

Vue.component("element-item", {
  template: `<div class="elements-item_container"  :id="element.uuid" v-show="shouldShow">
                          <div
                              :data-type="element.type"
                              :draggable="true"
                              :style="{'paddingLeft': 16 + level * 12 + 'px'}"        
                              ...
                           >

                            <!--省略不相干的部分-->
                            <u