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