element-ui级联选择器动态加载数据

最近在做的项目中有级联选择器动态加载数据的需求，而看了相关的官方文档实例代码，讲的还是比较模糊，所以找了相关资料，最终的实现代码如下
首先要准备两个后台接口（因为我的是二级联动，所以只需要两个接口，以此类推），如果没有后台接口的话可以使用mock模拟假数据

<template>
<el-cascader v-model="el_value" :props="props" @change="handleChange" placeholder="请选择"
          :clearable="true" :show-all-levels="false"></el-cascader>
</template>
<script>
data(){
	return {
		"el_value":'',
		props: {
          expandTrigger: 'hover',
          emitPath: false,
          lazy:true,
          lazyLoad:this.lazyLoad
        },
	}
},
methods:{
	lazyLoad(node,resolve){
        this.getData(node,resolve)
      },
      getData(node,resolve){
        const level = node.level
        var url
        if (level === 0) {
          url = '接口地址'
        }
        if (level === 1) {
          url = '接口地址'
        }
        axios.get(url)
        .then(res => {
          var result
          if (level === 0) {
            result = res.data.result
            result.forEach(item => {
              item.value = item.bayId;
              item.label = item.bayName
            })
          }
          if (level === 1) {
            result = res.data.result[0].children
            result.forEach(item => {
              item.value = item.unitId;
              item.label = item.unitName
              //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
              item.leaf = level >= 1
            })
          }
          resolve(result)
        })
      }
    }
}
</script>