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

需求背景：

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

 

技术选择：

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'}&