vue中使用select下拉框实现三级联动
在项目中有时需要做三级联动,但采用框架不足以实现项目需求,采用下拉选择框实现三级联动甚至多级联动
·
<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
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)