vue+element ui下拉框可搜索(接口返回的数据)
在el-select中加入filterable属性,就开启了搜索功能,具体代码在下面:<template><el-select v-model="valuelesson" placeholder="请输入课程的关键词" class="interval" @change="selectlesson" filterable remote :filter-method="dataFil
·
在el-select中加入filterable属性,就开启了搜索功能,
具体代码在下面:
<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>
</template>
<script>
export default {
data() {
return {
date: "",
valuelesson:"",
lessonlist:[],
search:[],
};
},
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
});
},
}
};
</script>
更多推荐
已为社区贡献6条内容
所有评论(0)