vue element el-cascader懒加载和回显问题解决

<template>
    <el-cascader :props="option" :placeholder="placeholder"
                 :options="nodes.defaultNodes"
                 v-model="nodes.selected"
                :separator="separator"
                 :disabled="disabled"
                 ref="cascader"
                 style="margin-bottom:5px;"
                 @change="addressChange"></el-cascader>
</template>

<script>
export default {
  name: "HxAddress",
  props: {
    placeholder: String,
    disabled: {
      type: Boolean,
      default: false
    },
    separator: {
      type: String,
      default: ','
    },
    value: {
      type: Object | String
    }
  },
  data() {
    return {
      nodes: {
        selected: [],
        defaultNodes:[{value: '41',label: '河南省',children: []}],
      },
      option: {
        lazy: true,
        lazyLoad: this.lazyLoadAddress
      },
      edit:true
    }
  },
  watch: {
  //监测绑定值变化
    value () {
      this.nodes.selected = this.filterData(this.value)
      this.selectArea(this.nodes.selected)
    }
  },
  created() {
    this.nodes.selected = this.filterData(this.value)
    this.selectArea(this.nodes.selected)
  },
  methods:{
  //动态改变绑定值的方法
    addressChange(v){
      if (v && v.length > 0) {
        let value = v[v.length-1]
        this.$emit('input',  value);
        this.$emit('change',  value);
      }
    },
    //截取并改变行政区划代码 回显重要
    filterData(v){
      if (!v || typeof v != 'string') return
      
      let s = v.substr(0,2)
      if(s==v){
        return [v]
      }
      let sh = v.substr(0,4)
      if(sh==v){
        return [s,sh]
      }
      let x = v.substr(0,6)
      if(x==v){
        return [s,sh,x]
      }
      let jd = v.substr(0,9)
      if(jd==v){
        return [s,sh,x,jd]
      }
      return [s,sh,x,jd,v]
    },
    getArea (id) {
      return this.$api.common.regionLazyList(id).then(res => {
        return this.fomatData(res.data)
      })
    },
    //懒加载 点击子项调取数据方法   回显主要看这里
    selectArea (d) {
      if (!d) return
      this.$api.common.regionTreeList(d.toString()).then(res=>{
        let data = res.data
        this.fomatTreeData(data)
        this.nodes.defaultNodes[0].children = data
      })
    },
    //格式化接口返还的数据
    fomatTreeData(d){
      d.forEach(a=>{
        this.$set(a,'label',a.title)
        this.$set(a,'leaf', !a.hasChildren)
        if(a['children'] && a['children'].length>0){
          this.fomatTreeData(a['children'])
        }else{
          delete a.children
        }
        this.$delete(a,'title')
      })
    },
    // 懒加载数据
    lazyLoadAddress(node, resolve) {
      const { level,value } = node;
      if(level==0&&this.edit){
        resolve(this.nodes.defaultNodes);
      }else{
        this.getArea(value).then(s => {
          resolve(s);
        })
      }
    },
    fomatData(d){
      let areaArr = []
      d.forEach(item => {
        if (item.name != '市辖区') {
          let obj = {
            value: item.code.toString(),
            label: item.name,
            leaf: !item.hasChildren
          }
          areaArr.push(obj)
        }
      })
      return areaArr
    },
    getCheckedNodes () {
      return this.$refs.cascader.getCheckedNodes()
    }
  }
}
</script>

<style scoped>

</style>

调用代码。使用时候得自己引组件，这些相信对于开发人员不难。