簡單來說就是在元件中內使用元件本身。
如果出現很多下拉列表,同級,分級資料,層級混雜,可以使用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...