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

資訊的分類展示

};

看到這種格式，我想好多人肯定會說，我可以使用v-for的巢狀迴圈不就完事了。對，沒毛病這樣的話也可以做，但是如果資料又多加了【很多】級分類呢；使用v-for也能實現，但是**量是不是太大了呢！也不適合後期的維護，這個時候呢，我們就可以使用我們所說道的【遞迴元件 】了，使用遞迴元件，無論你的資料怎麼增加我們都不用改動我們的**。哈哈！！是不是很(๑•̀ㅂ•́)و✧。

那什麼是遞迴呢？

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

下面我們就來看看如何在專案中使用遞迴元件去解決我們上面問題。

基於上面的樣式我們可以建立兩個元件進行演示

先建立tree.vue 元件

="header"

:style=
"indent" @click=
"toogle"
>
}<
/span>
}<
/span>
<
/div>
"isshow"
>
v-for=
"(item, index) in list"
:key=
"index"
:title=
"item.name"
:list=
"item.children"
:depth=
"depth + 1"
>
<
/tree-com>
<
/main>
<
/div>
<
/template>
export
default
, list:
, depth:},
data()
;}, computed:
px)`;}
},methods:}}
;<
/script>

vue遞迴元件實現多級列表

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

VUE遞迴樹形實現多級列表

簡單來說就是在元件中內使用元件本身。如果出現很多下拉列表，同級，分級資料，層級混雜，可以使用v for的巢狀迴圈不就完事了。對，沒毛病這樣的話也可以做，但是如果資料又多加了 很多 級分類呢 使用v for也能實現，但是 可能會比較雜或混亂！也不適合後期的維護，這個時候呢，我們就可以使用我們所說道的 ...

vue遞迴元件實現

需求 需要顯示不確定層級不確定值型別 可能是陣列裡有物件，物件裡有資料 的資料 資料結構如下 registered address registered address in full 241 rue jarry e montr al qu bec h2p1t6 canada industry co...