element ui中select动态获取选项与多级联动，且可输入关键字

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之类的。