关于el-cascader省市区动态加载的使用以及获取label值和编辑时的回显问题

背景：

为什么使用级联选择器动态加载节点，因为一次性加载全部节点耗费性能。但是使用el-cascader组件会有很多坑，分享一下给大家避避坑。

使用

<el-cascader ref="cas" v-model="areaArr" @change="change" :props="props" :key="modalKey"></el-cascader>

因为使用动态加载节点，所以不需要options属性

 data() {
   return {
    areaArr:[],
    modalKey: 0,
    props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { value = 0 } = node;
          setTimeout(async () => {
            const nodes = await getArea(value);  //getArea方法是请求节点数据接口的方法
            const childNodes = nodes.data.body.map((item) => ({
              value: item["areaCode"],
              label: item["areaName"],
              leaf: item["level"] >= 3,
            }));
            resolve(childNodes);
          });
        },
      },
    },
 }

首先设置lazy为true，然后使用lazyLoad方法获取节点，lazyLoad方法有两个参数，第一个参数node是当前选中的节点，第二个参数resolve是回调函数，通过传入value值获取子节点列表并通过resolve回调抛出。
这里面为什么在解构node时要给value设默认值为0，因为不设置默认值的话getArea方法第一次请求相当于传了空值，会导致下拉框没有选项。
leaf是叶子节点的标志位，用来控制是否还展示叶子节点。

获取label值

 methods: {
 //change方法在节点值发生变化时触发，nodes参数为选中的节点值
    change(nodes) {
        let areaName = this.$refs.cas.getCheckedNodes()[0].pathLabels
        console.log(areaName)
    },

关于编辑时的回显问题

如果获取详情后直接给v-model绑定的areaArr赋值的话，会发现选择器没有显示数据，有时得点击选择器才能显示数据(不知道为什么)，此时需要我们给选择器绑定一个:key，默认值设为0，然后在获取到数据后this.modalKey++

this.areaArr = ['10','1010','101010']
this.modalKey ++;

此时在获取到数据后通过增加key值使选择器重新渲染，数据就能回显出来啦，但是会有一点小小的延迟，不过问题不大。
在其他的帖子里看到数据没有回显是因为没有options值，我没有试过，因为太繁琐。
还有设置定时器让获取数据后渲染组件，跟设置:key是一个意思。