在el-select中加入filterable属性,就开启了搜索功能,
具体代码在下面:
<template><el-select v-model="valuelesson" placeholder="请输入课程的关键词" class="interval" @change="selectlesson" filterable remote :filter-method="dataFilter"><el-optionv-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>