element ui中的级联组件懒加载+数据回显

最近需要用到element ui中的级联组件，根据国家做地区的四级联动，但是碰了一些问题：

• 点击确认后的值 

1.template

<el-cascader
      size="mini"
      :props="props"
      @change="handleChange"
      v-model="pathList"
      :options="options"
      style="width: 300px"
      ref="cascaderAddr"
    ></el-cascader>

2.methods:

  lazyLoad(node, resolve) {
            const { level } = node;
            let params = {
                pageNum: 1,
                pageSize: 9999,
                order: {},
                like: {},
                eq: {
                    parentId: 0,
                    levelCode: level + 1,
                    countryId: this.address.countryId,//国家的id
                },
            };
            if (!level) {
                params.eq.parentId = 0;//查第一级
            } else {
                params.eq.parentId = node.value;
            }
            if (level <= 4) {
                countryAddressFindPage(params)
                    .then((res) => {
                        const { data, code } = res.data;
                        let nodes = [];
                        if (code === 0 && data.items.length) {
                            nodes = data.items.map((item) => ({
                                ...item,
                                label: item.name,
                                value: item.gid,
                                leaf: !item.childrenSize, // 后端返回的数据，判断有无子节点
                            }));
                        }
                        resolve(nodes);
                    })
                    .catch((err) => {});
            }
        },
复制代码

3. data()

  data() {
    return {
      pathList: [],    // 级联的数据
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad()
    };
  }

4.如果国家地区级联需要数据回显

props: { 
  addressRuleForm: { type: Object, }
 },
watch: { 
  addressRuleForm: { 
    handler: function(val, oldVal) { 
      if (val.province) { 
        const { provinceId, provinceName, regionId, regionName, areaId, areaName, streetId, streetName } = this.addressRuleForm
        // 只展示文本的时候
        if(this.showTitle){
          this.$refs["cascaderAddr"].inputValue=[provinceName,regionName,areaName,streetName].filter(i=>!!i).join('/')
        }
        this.pathList=[provinceId, regionId, areaId, streetId]
        // 需要重新加载级联的数据时可以this.options=[]
      } 
    }, 
    deep: true 
  } 
},

5.结尾：

整体思路是这样的，希望对大家有所帮助：

1. 根据官方文档，加载动态数据的方法，仅在 lazy 为 true 时有效;

2. 配置接口请求，我这是五级联动（默认为国内）地区数据（省市区街道四级联动）;

3. 需要注意的是 props需要在data()里赋值，  所以数据请求也要放进去;

4. 获取到数据后，需要按照它的规范赋值 => value：值，label：文字，leaf：层级;

5. leaf我是根据后端返回的数据进行判断展示为几级（有的区域没有4级）;

6. 希望级联重新加载数据可以通过this.options=[];

7. 选择click触发事件,hover事件体验稍微差些。