1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue中使用select下拉框实现三级联动

vue中使用select下拉框实现三级联动

时间:2024-07-25 09:10:24

相关推荐

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 = undefinedthis.queryParam.cType = undefinedthis.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 = undefinedif(this.queryParam.bType!=undefined){var index = this.btypelist.findIndex(value => value.title == e);this.ctypelist = this.btypelist[index].subs}},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。