在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>