vue实现分类查询

vue实现分类查询 效果一

效果二

效果一的实现

这里使用了element ui

页面代码

代码语言：javascript复制

<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 //查询类型编号

代码语言：javascript复制

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

methods为

代码语言：javascript复制

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

效果二的实现

代码语言：javascript复制

<div style="height: 200px;width: 100%;padding-top: 40px;">
	<span style="margin-left: 10px;">一级</span>
	<el-radio-group v-model="radio1">
		<el-radio-button style="margin-left: 20px;" v-for="(item,index) in menus" :key="index" :label="item.type">
		</el-radio-button>
	</el-radio-group>
	<div style="margin-top: 40px;"></div>
	<span style="margin-left: 10px;">二级</span>
	<el-radio-group v-model="radio2">
		<el-radio-button style="margin-left: 20px;" v-for="(item,index) in menuItems" :key="index" :label="item.type">
		</el-radio-button>
	</el-radio-group>
	<div style="margin-top: 40px;"></div>
	<span style="margin-left: 10px;">三级</span>
	<el-radio-group v-model="radio3">
		<el-radio-button style="margin-left: 20px;" v-for="(item,index) in menuItemsThree" :key="index"
			:label="item.name"></el-radio-button>
	</el-radio-group>
</div>

代码语言：javascript复制

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();

}

data element methods types ui

0 人点赞