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
  summary 一级标题
  ul
    li 子标题1
    li 子标题2
    li
      details
        summary 二级标题
        ul
          li 子子标题1
          li 子子标题2

Answer 3

也可以递归的时候加入布尔，可以根据parent 是否为undefined，根节点肯定是undefined，然后再根据其他节点布尔搭配进行显示隐藏

        title: '一级节点',
        expanded: false,
        children: [{
            title: '二级节点',
            expanded: false,
            children: [{
                title: '三级节点'
            }, {
                title: '三级节点'
            }, {
                title: '三级节点'
            }]
        }, {
            title: '二级节点',
            expanded: false,
            children: [{
                title: "<span style='color: red'>三级节点2-1</span>"
            }, {
                title: "<span style='color: red'>三级节点2-2</span>"
            }]
        }]
    }]
    
    recursion: function (val,arr1,$treeId,parent) {
        // 递归
            for (let i = 0; i < val.length; i++) {
                arr1.push({ node: val[i], $treeId: $treeId, parent: parent })
                if (val[i].children && val[i].children.length > 0) {
                    this.recursion(val[i].children, arr1, $treeId + 1, val[i])
                }
            }
            return arr1
        }
        vue 页面 parent === undefined || parent.expanded === undefined || parent.expanded === true

Answer 4

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