鍍金池/ 問答/HTML/ Vue.js分組列表問題

Vue.js分組列表問題

不喜歡用插件

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

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

clipboard.png

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}}
回答
編輯回答
蟲児飛

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

        title: '一級節(jié)點(diǎn)',
        expanded: false,
        children: [{
            title: '二級節(jié)點(diǎn)',
            expanded: false,
            children: [{
                title: '三級節(jié)點(diǎn)'
            }, {
                title: '三級節(jié)點(diǎn)'
            }, {
                title: '三級節(jié)點(diǎn)'
            }]
        }, {
            title: '二級節(jié)點(diǎn)',
            expanded: false,
            children: [{
                title: "<span style='color: red'>三級節(jié)點(diǎn)2-1</span>"
            }, {
                title: "<span style='color: red'>三級節(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 頁面 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 一級標(biāo)題
  ul
    li 子標(biāo)題1
    li 子標(biāo)題2
    li
      details
        summary 二級標(biāo)題
        ul
          li 子子標(biāo)題1
          li 子子標(biāo)題2
2017年12月11日 19:56
編輯回答
孤酒

用{title,children}的形式來描述每個節(jié)點(diǎn)，children不為空就接著遍歷children，然后用前面定義的形式描述，如此循環(huán)，直至children為空

2018年6月22日 21:04