省级联动处理 回显问题

问题： 省市区 三级联动， 只有俩级联动，页面刷新，数据回显失效

解决方案： 源码，可以发现只需要传入Object数据即可，如：this.$refs.xxx.panel.lazyLoad(val)。

 // 省市区三级联动
      addressProps: {
        label: 'dictName',
        value: 'dictName',
        lazy: true,
        lazyLoad(node, resolve) {
          const {
            level
          } = node
          // 3级节点不再继续加载，直接作为叶子
          if (level == 3) {
            node.leaf = 'leaf'
            resolve()
          }
          // 0级代表初始化
          if (level == 0) {
            self.searchAddress({
              code: '1001'
            }).then((res) => {
              resolve(res)
            })
          } else {
            self.searchAddress({
              pid: node.data.id
            }).then((res) => {
              // 如果1级节点或2级节点查询后无查询后无数据，证明是叶子节点
              if (!res) {
                node.leaf = 'leaf'
                resolve()
                // 如果是2级节点，子节点是叶子节点
              } else if (level == 2) {
                res.forEach((item) => {
                  item.leaf = 'leaf'
                })
              }
              resolve(res)
            }).finally(() => {
              self.$refs.cascader.computePresentText();
              self.$refs.cascader1.computePresentText();
              self.$refs.cascader2.computePresentText();
              const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]'); 
              Array.from($el).map(item => item.removeAttribute("aria-owns"));
            })
          }
        }
      },

或者

<template>
  <div id="app">
    <el-cascader v-model="current":props="props"ref="cascader"></el-cascader>
  </div>
</template>
 
<script>
let id = 0;
let list = [
  {
    value: '0',
  }, {
    value: '1',
  }, {
    value: '2',
  }, {
    value: '3',
  },
]
export default{
  name: 'App',
  data() {
    return{
      current: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const {level} = node;
 
          functionf() {
            list = list.map((item, i) => ({
              label: level ? `${node.value}-${i}` : item.value,
              value: level ? `${node.value}-${i}` : item.value,
              leaf: item.value === '2'&& level === 0 ? true: `${node.value}-${i}` === '3-2'? true: level >= 2
            }))
            resolve(list)
          }
 
          if(level > 0) {
            setTimeout(() => {
              f()
              node.func && node.func(node)
            }, 1000)
            return
          }
          f()
        }
      }
    };
  },
  mounted() {
    this.current = ['1', '1-3', '1-3-0']
    // this.current = ['3', '3-2']
    // this.current = ['2']
    // this.current = ['0', '0-2', '0-2-3']
    for(let item of this.$refs.cascader.panel.menus[0]) {
      if(item.value === this.current[0]) {
        this.loadItem(item)
        return
      }
    }
  },
  methods: {
    handleItem(val) {
      if(val && val instanceofObject) {
        this.loadItem(val)
      }
    },
 
    loadItem(val) {
      val.func = this.waitItemExecution
      this.$refs.cascader.panel.lazyLoad(val)
    },
 
    waitItemExecution(val) {
      for(let item of val.children) {
        if(this.current[val.level] === item.value) {
          this.handleItem(item)
          break
        }
      }
      this.$refs.cascader.panel.handleExpand(val)
      this.$refs.cascader.computePresentText()
    },
  }
}
</script>