<a-form-item label="一类">
	<a-select v-model:value="queryParam.aType" :allow-clear="true"
		style="width: 220px;margin-right: 20px" placeholder="请选择" @change="typeChange">
		<a-select-option  v-for="item in atypelist" :key="item.id" 
		:value="item.title">
			{{item.title}}
		</a-select-option>
	</a-select>
</a-form-item>
<a-form-item label="二类">
	<a-select v-model:value="queryParam.bType" :allow-clear="true"
		style="width: 220px;margin-right: 20px" placeholder="请选择" @change="typeChange1">
		<a-select-option v-for="item in btypelist" :key="item.id" 
		:value="item.title">
			{{item.title}}
		</a-select-option>
	</a-select>
</a-form-item>
<a-form-item label="三类">
	<a-select ref="select" v-model:value="queryParam.cType" :allow-clear="true"
		style="width: 220px;margin-right: 20px" placeholder="请选择">
		<a-select-option v-for="item in ctypelist" :key="item.id" :value="item.title">
			{{item.title}}
		</a-select-option>
	</a-select>
</a-form-item>
注:atypelist类型为数组,是接口请求回来的所有数据
//一级类型
typeChange(e) {
	console.log(e)
	this.queryParam.bType = undefined
	this.queryParam.cType = undefined
	this.ctypelist = []
	if(this.queryParam.aType!=undefined){
		var index = this.atypelist.findIndex(value => value.title == e);
		this.btypelist = this.atypelist[index].subs
	}
},
//二类类型
typeChange1(e) {
	this.queryParam.cType = undefined
	if(this.queryParam.bType!=undefined){
		var index = this.btypelist.findIndex(value => value.title == e);
		this.ctypelist = this.btypelist[index].subs
	}
},
Logo

前往低代码交流专区

更多推荐