el-cascader 异步加载子节点数据+模糊搜索

需求点

1. el-cascader一共两级，第一级数据由接口返回；点击第一级的展开icon，拿第一级的id去请求接口获取第二级的数据；
2. el-cascader需带有模糊搜索功能。

 <el-form-item label="业务状态" prop="businessStatus">
  <el-cascader
        ref="casader"
        clearable
        key="casader`"
        :options="businessProList"
        :props="optionProps"
        filterable
        :before-filter="beforeFilter"
        @input.native="inputEnter"
        @change="handleSelectBusiness"
        placeholder="业务状态"
        size="small"
      ></el-cascader>
 </el-form-item>

<script>
export default {
data() {
  return {
	productList: [],
	businessProList: [],
	optionProps: {
        lazy: true,
        lazyLoad: this.lazyLoad
    },
  },
  mounted() {
  	this.getAllProList();
  },
  methods: {
    //获取第一级的数据
    getAllProList() {
      api.getAllPro({}, this.isSaas ? "saasOrder" : "").then((res) => {
        this.productList = res.data;
        res.data.forEach((item) => {
          this.businessProList.push({
            value: item.proId,
            label: item.proName,
            children: []
          });
        });
        this.originBusinessList = this.businessProList.slice(0);
      });
    },
    
    beforeFilter() {
      return false;
    },

	//模糊搜索
    inputEnter() {
      let ref = this.$refs["casader"];
      setTimeout(() => {
        this.businessProList = [];
        this.originBusinessList.forEach((item) => {
          if (item.label.indexOf(ref.inputValue) !== -1) {
            this.businessProList.push(item);
          }
        });
      });
    },

    handleSelectBusiness(val) {
      this.filters.businessStatus = val[1];
    },
  }
}
</script>

效果图：