element ui中el-select动态获取选项与多级联动,且可输入关键字
具体代码如下:
<template>
<el-select v-model="valuelesson" placeholder="请输入关键词" class="interval" @change="selectlesson" filterable remote :filter-method="dataFilter">
<el-option
v-for="item in lessonlist"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="valuechapter" placeholder="请选择" class="interval">
<el-option
v-for="item in chapterlist"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
date: "",
valuelesson:"",
lessonlist:[],
search:[],
valuechapter:"",
chapterlist:[],
};
},
mounted() {
this.getalllesson();
},
methods: {
//第一个下拉框可以搜索
dataFilter(val) {
//console.log(val);
//console.log(this.lessonlist);
//val监听输入的内容,this.lessonlist为接口获取的数据
this.lessonlist = val;
if (val) { //val存在
this.lessonlist= this.search.filter((item) => {
if (!!~item.name.indexOf(val) || !!~item.name.toUpperCase().indexOf(val.toUpperCase())) {
return true
}
})
} else { //val为空时,还原数组
this.lessonlist = this.search;
}
},
//第一个下选框获取数据接口调用
getalllesson(){
this.$http
.get(`第一个下拉框选项接口地址 `, {
})
.then(res => {
//console.log(res.data)
this.lessonlist=res.data;
this.search=res.data;
this.valuelesson=res.data.name
});
},
//第二个下选框获取数据接口调用
getallchapter(id){
//id为第一个下拉框选中获取的id,作为参数传给第二个接口
//这个所传的参数必须是获取的第一个下拉框选中的
this.$http
.get(`第二个下拉框选项接口地址`+id, {
})
.then(res => {
//console.log(res.data)
this.chapterlist=res.data;
this.valuechapter=res.data.name
});
},
//选择第一个下拉框显示相应的,例如选择课程显示相应课程下的章节
selectlesson(){
//console.log(this.valuelesson);
//this.valuelesson为第一个下拉框选择的id
this.getallchapter(this.valuelesson)
},
}
};
</script>
以上即下拉框二级联动,如果多级的思路还是第一个下拉框所需的接口正常调用,第二个下拉框接口中应该传第一个下拉框选中所获取的id之类的,第三个下拉框接口中应该传第二个下拉框选择所获取的id之类的。