element-plus级联选择器使用懒加载获取数据无法回显的问题解决方案

在升级elementplus后，级联选择器使用懒加载后在不清楚当前层是否是叶节点的时候，无法设置leaf属性导致数据无法回显的问题，具体的复现链接如下

Element Plus Playground

选上了但无法回显到输入框

 

触发的原因就是没有设置leaf，所以element认为当前都还不是叶节点，当返回没有子节点的时候才认为是叶节点，但选中时还是选中了个空节点，这是内部代码逻辑的bug，具体我也没细看，就想了下有什么替补方案可以解决的，因为有时候后台就是不配合你返回这个字段给你，需要你往下请求，请求到没数据了为止，所以就只能自己看看怎么搞了

后面想来想去就把代码改成了动态拼接options数据

<template>
  <el-cascader
    v-model="value"
    :options="options"
    ref="contentRef"
    @expand-change="change"
  />
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [],
    }
  },
  created() {
    this.change([])
  },
  methods: {
    change(val) {
      console.log(val); 
      setTimeout(() => {
        if (!val.length) {
          this.options = [{
            value: '1',
            label: 'Guide',
            leaf: false,
            children: []
          }, {
            value: '2',
            label: 'Component',
            leaf: false,
            children: []
          }, {
            value: '3',
            label: 'Resource',
            leaf: false,
            children: []
          }]
        } else {
          let nowLevelData = {}
          nowLevelData.children = this.options
          val.forEach(value => {
            for (const node of nowLevelData.children) {
              if (node.value === value) {
                nowLevelData = node
                break
              }
            }
          })
          if (val.length < 3) {
            nowLevelData.loading = true
            nowLevelData.children = [{
              value: nowLevelData.value + '1',
              label: 'Guide',
              leaf: false,
              children: []
            }, {
              value: nowLevelData.value + '2',
              label: 'Component',
              leaf: false,
              children: []
            }, {
              value: nowLevelData.value + '3',
              label: 'Resource',
              leaf: false,
              children: []
            }]
          } else {
            nowLevelData.leaf = true
          }
        }
      }, 500)
    }
  }
}
</script>

贴一下实现代码，自己写的一个小demo，逻辑就是每一层我都认为自己还不是叶，然后通过已选中的一层一层往下找，当找到第三层想要看看有没有第四层的时候，告诉组件我现在已经是叶节点了，大家可以根据自己的业务逻辑改成请求，请求到没有下一层数据的时候，告诉当前层你已经是叶啦，这样来做到回显。

当然这样的写法有个不好的点，当你还没获取到下一层数据时，都认为还有下一层，也就导致了当前真是叶节点的时候，展开时会多出一层然后请求完再消失，用户体验不好

贴个图，会有短暂的这种效果，具体看你接口的请求速度，但再快也会闪一下，进一步的想法是能不能获取当前这个节点的demo然后加上load的效果，去阻塞那个空数据的渲染，等到真的有数据再加上去，这样就不会有一闪而过的效果了，但目前还没想到这一步要怎么写，后续如果有想法了会继续更新，大家有好的思路也欢迎指点，感谢！