vue实现分类查询

柔光的暖阳◎ 2022-11-15 14:13 142阅读 0赞

> vue实现分类查询  
> 效果一

![在这里插入图片描述][20210401193840784.gif]

> 效果二  
> ![在这里插入图片描述][20210401194035589.gif]

# 效果一的实现 #

这里使用了element ui

页面代码

<el-button style="float: right;margin-right: 20px;" :type="showType[0]" @click="changeShow(0)" round>类型0</el-button>
    <el-button style="float: right;margin-right: 20px;" :type="showType[1]" @click="changeShow(1)" round>类型1</el-button>
    <el-button style="float: right;margin-right: 20px;" :type="showType[2]" @click="changeShow(2)" round>类型2</el-button>
    <el-button style="float: right;margin-right: 20px;" :type="showType[3]" @click="changeShow(3)" round>类型3</el-button>
    <el-button style="float: right;margin-right: 20px;" :type="showType[4]" @click="changeShow(4)" round>类型4</el-button>
    <el-button style="float: right;margin-right: 20px;" :type="showType[5]" @click="changeShow(5)" round>默认类型:类型5</el-button>

data为  
showType:\["","","","","",“primary”\], //按钮类型数组  
types:5 //查询类型编号

data() { 
    	return { 
    		showType:["","","","","","primary"],
    		types:5
    	}
    },

methods为

changeShow(val){ 
    	this.showType = ["","","","","",""];
    	this.showType[val] = "primary";
    	this.types = val;
    	this.datas() //获取数据
    },

# 效果二的实现 #

data(){ 
    	return{ 
    		radio1: '', //当前一级
    		radio2: '', //当前二级
    		radio3: '', //当前三级
    		menus: [], //当前一级
    		menuItems: [], //当前一级下属二级数组
    		menuItemsThree: [] //当前二级下属三级数组
    	}
    }
    watch:{ 
    radio1(val) { 
    		if (!this.newGo) { 
    			this.radio2 = ""
    			this.menuItems = []
    		}
    		this.menus.forEach((item) => { 
    			if (item.type == val) { 
    				this.menuItems = item.menu_two
    			}
    		})
    	},
    	radio2(val) { 
    		if (!this.newGo) { 
    			this.radio3 = ""
    			this.menuItemsThree = []
    		}
    		this.menuItems.forEach((item) => { 
    			if (item.type == val) { 
    				this.menuItemsThree = item.items
    				console.log(item)
    			}
    		})
    	},
    	radio3(val) { 
    		this.classify = val;
    		this.name = '';
    		this.newGo = false;
    		let vals = { } //当前查询对象
    		vals.type_one = this.radio1
    		vals.type_two = this.radio2
    		vals.name = this.radio3
    		this.getDatas();
    
    }

[20210401193840784.gif]: /images/20221022/d2f5fcb0034a4d34bbcc85e240548ad4.png
[20210401194035589.gif]: /images/20221022/afe9f3b7a5e54ae0811cedcb8b26cb73.png