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的递归组件