Vue.js分组列表问题

Question

不喜欢用插件

想实现一个多层伸缩折叠的列表

目前图片就是我便里出来的效果，展开合并大家有什么好的逻辑吗

html:

.list(v-for="(i, n) in treeData" :key="n" :title="i.name")

  i.iconfont.icon-webicon215.arrowIcon(v-show="i.child")

  span {{i.name}}

  .list(v-for="(s, n) in i.child" :key="n" :title="s.name" :style="{textIndent: s.child ? '.8em': '1.6em'}" @click="show(n, s.name)")

    i.iconfont.icon-webicon215.arrowIcon(:style="{color: s.child ? '#c0c4cc': 'transparent'}")

    span {{s.name}}

    .list(v-if="s.child" v-for="(q, n) in s.child" :key="n" :title="q.name" :style="{textIndent: q.child ? '1.6em': '2.4em'}" @click="show(n, q.name)")

      i.iconfont.icon-webicon215.arrowIcon(:style="{color: q.child ? '#c0c4cc': 'transparent'}")

      span {{q.name}}

Answer 1

用{title,children}的形式来描述每个节点，children不为空就接着遍历children，然后用前面定义的形式描述，如此循环，直至children为空

Answer 2

方法很多，纯 HTML 就行，关键词：<details>details&nbsp; summary 一级标题&nbsp; ul&nbsp; &nbsp; li 子标题1&nbsp; &nbsp; li 子标题2&nbsp; &nbsp; li&nbsp; &nbsp; &nbsp; details&nbsp; &nbsp; &nbsp; &nbsp; summary 二级标题&nbsp; &nbsp; &nbsp; &nbsp; ul&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li 子子标题1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li 子子标题2

Answer 3

也可以递归的时候加入布尔，可以根据parent 是否为undefined，根节点肯定是undefined，然后再根据其他节点布尔搭配进行显示隐藏&nbsp; &nbsp; &nbsp; &nbsp; title: '一级节点',&nbsp; &nbsp; &nbsp; &nbsp; expanded: false,&nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '二级节点',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; expanded: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '三级节点'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '三级节点'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '三级节点'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '二级节点',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; expanded: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: "<span style='color: red'>三级节点2-1</span>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: "<span style='color: red'>三级节点2-2</span>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }]&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; recursion: function (val,arr1,$treeId,parent) {&nbsp; &nbsp; &nbsp; &nbsp; // 递归&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i < val.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arr1.push({ node: val[i], $treeId: $treeId, parent: parent })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (val[i].children && val[i].children.length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.recursion(val[i].children, arr1, $treeId + 1, val[i])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return arr1&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; vue 页面 parent === undefined || parent.expanded === undefined || parent.expanded === true

Answer 4

可以看看官网上vue的递归组件