VUE遞迴樹形實現多級列表

2021-10-24 11:35:27 字數 1661 閱讀 3255

簡單來說就是在元件中內使用元件本身。

如果出現很多下拉列表,同級,分級資料,層級混雜,可以使用v-for的巢狀迴圈不就完事了。對,沒毛病這樣的話也可以做,但是如果資料又多加了【很多】級分類呢;使用v-for也能實現,但是**可能會比較雜或混亂!也不適合後期的維護,這個時候呢,我們就可以使用我們所說道的【遞迴元件 】了,使用遞迴元件,無論你的資料怎麼增加我們都不用改動我們的**。

先看效果:

1、建立兩個檔案

父元件tree.vue 子元件tree-detail

父元件**:

"tree"

>

:title=

"list.name"

//把值傳給子元件

:list=

"list.children"

//把值傳給子元件

:num=

'0'>

<

/treedetail>

<

/div>

<

/template>

/** * 模擬乙個樹形結構圖

*/const list =,,

]},,

,,,]

},,,

]}]}

,]},

,,]}

,,,]

}]}]

};import treedetail from '../tree/treedetail'

export default},

components:

//註冊子元件

}<

/script>子元件**:

"treedetail"

>

="treedetail" @click=

"btn()"

:style=

"indent"

>

//btn是用來切換顯示隱藏

}<

/span>

}<

/span>

//接收到的標題

<

/div>

"flag"

>

//這裡加顯示隱藏也是必要的

v-for=

"(item,index) in list"

:key=

"index"

:title=

"item.name"

:list=

'item.children'

//渲染列表下的列表資料

:num=

'num + 1'

//這裡的作用應該是分清層級。

>

<

/treedetail>

<

/div>

<

/div>

<

/template>

export default

, list:

, num:},

data()

},methods:},

computed:

px)`;}}

}<

/script>

vue遞迴元件實現多級列表

這次我們主要是實現乙個資訊的分類展示列表存在二級 的分類,如下如所示 看到這個很多人會想到這個實現起來很簡單啊,來個巢狀迴圈不就完事了。對,你說的沒錯,事實就是這樣簡單。那麼就先來看看這麼簡單的列表怎麼實現的,然後這個方案的劣勢在 首先看看我們的資料格式 list 基於上面的資料格式,我們的實現方式...

Vue遞迴元件實現多級列表分類

資訊的分類展示 看到這種格式,我想好多人肯定會說,我可以使用v for的巢狀迴圈不就完事了。對,沒毛病這樣的話也可以做,但是如果資料又多加了 很多 級分類呢 使用v for也能實現,但是 量是不是太大了呢!也不適合後期的維護,這個時候呢,我們就可以使用我們所說道的 遞迴元件 了,使用遞迴元件,無論你...

利用Treeview實現樹形列表

以前,在web頁面中如果想使用樹形控制項的話,往往會有些麻煩,有時甚至要自己寫 來達到用樹形列表顯示資料的目的。在asp.net中,我們可以很方便地使用由微軟提供的internet exploer web controls控制項來 實現樹形列表。在微軟提供的這套internet exploere w...