Element中级联选择器懒加载的使用

Element中级联选择器懒加载的使用

之前看element的文档，一直看个一知半解，不知道怎么用级联选择器的懒加载，这里花了点时间终于搞懂了，给大家上一个自己的例子，并附带上几个容易踩上的坑。
上代码！！！

<template>
	<el-cascader 
	v-model="statusVal" 
	:show-all-levels="false" 
	placeholder="按区域选择" 
	:props="staProps">
	</el-cascader>
</template>

<script>
export default {
    name: 'Apply',
    data() {
        const _self = this;
        return {
            staProps: {
                label: 'areaname',
                value: 'adcode',
                lazy: true,//设置lazyLoad，必须配合lazy：true
                checkStrictly: true,
                async lazyLoad(node, resolve) { // 区域树懒加载的方法
                    const { data } = node;
                    if ((data && data.haschild === false) || (data && data.leaf === true)) {
                        return resolve([]);
                    }
                    let id;
                    if (data) {
                        id = data.pspareaid;
                    }
                    const temp = await _self.getSta(id);
                    for (const item of temp) {
                        item.leaf = (item.level === 'city');
                    }
                    resolve(temp);
                }
            },
            statusVal:[]
          }
       }
     },
    methods: {
    	async getSta() {
            const params = {};
            const data = await this.$axios.get('/接口地址', { params: params }).then((data) => {
                return data.datas;
            });
            return data;
        },
    }
</script>

实现效果：
加载到的第一级：

加载中：（因为外层还有一个加载动画，所以看起来蒙蒙的）

加载完成：

最后说一下我自己觉得容易出问题的地方，第一个是作用域的问题，在lazyLoad中调用方法时，会有作用域的问题。我的解决方法是

第二个就是，ajax请求是异步的，当我们上一句执行了一个请求，下一句写resolve(返回数据)时，此时的返回数据这个变量其实可能是undefind，级联面板中并没与出现新的数据。所以应该想办法让请求结束之后，再执行resolve()。我在这里使用的是await。
/*******************************************************************************************************************/
更新一波，await写多了既不好看也不优雅，更新一个更好的写法：直接上代码：

staProps: {
                label: 'areaname',
                value: 'adcode',
                lazy: true,//设置lazyLoad，必须配合lazy：true
                checkStrictly: true,
                lazyLoad: this.getSta
            },

getSta(node, resolve) {
            const { data } = node;
            if (data && ((data.haschild === false) || (data.leaf === true))) {
            //判断是否有子节点，若没有则进入该判断（判断条件因个人需求不同而不同）
                return resolve([]);
            }
            this.$axios.get('/media/sta.do', {//ajax请求
                params: {
                //接口参数
                }}).then((req) => {
                //接收到的子节点对象在req里，这里可以对数据进行处理之后，再渲染。
                resolve(req.datas);
            });
        },

将懒加载方法全部封装到getSta方法中。而resolve（）方法则在ajax的回调中调用。这样便避免了作用域问题和异步请求的问题。
关于懒加载选择器如何回填的问题，我写在了另一篇文章中，需要的话可以参考一下：如何回填回填在这里
最后如果有更好的实现方法也欢迎指正。