Vue環境下實現n級分類兩種算法-迭代法&遞歸法-以3級分類爲例

1.需求分析

有以下數據：

字段說明：
id:唯一標識
pid:父級標識
name:項目名稱
type:級別

id	pid	name	type
1	0	設備	1
2	0	服裝	1
3	1	手機	2
4	1	遊戲機	2
5	3	全面屏手機	3
6	4	小霸王遊戲機	3
7	4	VR遊戲機	3
8	3	老人手機機	3
9	2	女性服裝	2
10	2	男性服裝	2
11	10	男-襯衫	3
12	10	男-長褲	3
13	9	女-連衣裙	3
14	9	女-襯衫	3

假設在Vue開發環境下，如何實現分級顯示，效果如下：

2. 迭代法實現思路分析

• 先將3級分類歸類，1級分類放在1級分類數組，2級分類放在2級分類數組，以此類推。

this.cateList.forEach(item=>{
	if(0===item.pid){
		this.flist.push(item);  //pid=0/type=1是1級分類
	}else if(2===item.type){
		this.slist.push(item); //type=2的是2級分類
	}else{
		this.tlist.push(item); //剩下是3級分類
	}
}) 

• 在MVVM視圖層，用v-for依次對1級、2級、3級迭代顯示，每一級顯示完成之後，再迭代下一級的分類，加v-if判斷當前pid是否爲上一級的id。

<div v-for="item in flist" :key="item.id">
	<h2>{{item.name}}</h2>
	<div v-for="sitem in slist" :key="sitem.id">
		<div v-if="sitem.pid===item.id">
			<h3 >&nbsp;&nbsp;&nbsp;&nbsp;{{sitem.name}}</h3>
			<div v-for="titem in tlist" :key="titem.id">
				<h4 v-if="titem.pid===sitem.id">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{titem.name}}</h4>
			</div>
		</div>			
	</div>
</div>

3. 遞歸法實現自動無限級

這個要靠自己領悟，直接上關鍵代碼

unlimitedForLevel(cate,pid=0){
	let arr = []
	cate.forEach(item=>{
		if(item.pid===pid){
			let a = item
			a.child = this.unlimitedForLevel(cate,item.id)
			arr.push(a)
		}
	})
	return arr
}

<div v-for="item in cateList2" :key="item.id">
	<h2>{{item.name}}</h2>
	<div v-for="sitem in item.child" :key="sitem.id">
			<h3 >&nbsp;&nbsp;&nbsp;&nbsp;{{sitem.name}}</h3>
			<div v-for="titem in sitem.child" :key="titem.id">
				<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{titem.name}}</h4>
			</div>		
	</div>
</div>

3. 整體代碼

Vue環境下基於迭代法實現n級分類算法 - github
Vue環境下基於遞歸法實現無限級分類算法 - github