vue+element ui下拉框可搜索（接口返回的数据）

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