Vue.js分組列表問(wèn)題

不喜歡用插件

想實(shí)現(xiàn)一個(gè)多層伸縮折疊的列表

目前圖片就是我便里出來(lái)的效果，展開(kāi)合并大家有什么好的邏輯嗎

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

回答

編輯回答

蟲(chóng)児飛

也可以遞歸的時(shí)候加入布爾，可以根據(jù)parent 是否為undefined，根節(jié)點(diǎn)肯定是undefined，然后再根據(jù)其他節(jié)點(diǎn)布爾搭配進(jìn)行顯示隱藏

        title: '一級(jí)節(jié)點(diǎn)',
        expanded: false,
        children: [{
            title: '二級(jí)節(jié)點(diǎn)',
            expanded: false,
            children: [{
                title: '三級(jí)節(jié)點(diǎn)'
            }, {
                title: '三級(jí)節(jié)點(diǎn)'
            }, {
                title: '三級(jí)節(jié)點(diǎn)'
            }]
        }, {
            title: '二級(jí)節(jié)點(diǎn)',
            expanded: false,
            children: [{
                title: "<span style='color: red'>三級(jí)節(jié)點(diǎn)2-1</span>"
            }, {
                title: "<span style='color: red'>三級(jí)節(jié)點(diǎn)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 頁(yè)面 parent === undefined || parent.expanded === undefined || parent.expanded === true

2017年4月27日 21:20

編輯回答

焚音

可以看看官網(wǎng)上vue的遞歸組件

2017年9月15日 16:38

編輯回答

瞄小懶

方法很多，純 HTML 就行，關(guān)鍵詞：<details>

details
  summary 一級(jí)標(biāo)題
  ul
    li 子標(biāo)題1
    li 子標(biāo)題2
    li
      details
        summary 二級(jí)標(biāo)題
        ul
          li 子子標(biāo)題1
          li 子子標(biāo)題2

2017年12月11日 19:56

編輯回答