el-cascader懒加载模式选中单选框加载下层无数据问题

Question

ascader 属性 'props.lazy' 和 'props.checkStrictly' 为真，第一次点击节点的单选按钮时，子菜单会显示 'No data yet'。让人以为真的没有数据。但是，实际上并没有载入子菜单的数据。第二次点击时，显示正常。

遇到bug:https://github.com/ElemeFE/element/pull/20848

参考了这位网友的方法:https://blog.csdn.net/shane_young?type=blog

解决了一半

问题遇到的现象和发生背景

当我点击的是原点

触发了回显动态加载了数据和列表的过滤刷新，但是圆点没有被选中
当我点击的是箭头或者文字

只回显了加载了数据，没有列表的过滤刷新

遇到的现象和发生背景，请写出第一个错误信息

用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%

 <el-cascader
          ref="cascader$$"
          v-model="deptIdArr"
          :size="'mini'"
          :props="stationOpts"
          :showAllLevels="false"
          :popperClass="'cascader-org'"
          @change="handleQuery($event, scope)"
        >
        </el-cascader>

  stationOpts: {
        lazy: true,
        checkStrictly: true,
        // 行政区列表加载
        lazyLoad: async (node, resolve) => {
          const { value, level } = node;
          if (this.leaf === null) await this.getTotalList();

          this.deptIdArr = value || this.deptIdArr;

          areaLists_({
            deptId: this.deptIdArr,
          }).then((res) => {
            // this.lev = node.data?.lev || this.lev + 1;

            const nodes = res.rows.map((item, index) => {
              return {
                value: item.id,
                label: item.deptName,
                leaf: level >= this.leaf,
              };
            });
            resolve(nodes);
          });
        },
      },

 handleQuery(value, scope) {
      this.$nextTick(() => {
        const dom = document.getElementsByClassName("el-radio is-checked")[0];
        const brother = dom.nextElementSibling;
        brother.click();
      });

      this.queryParams.id = value[value.length - 1];
      this.queryParams.pageNum = 1;
      this.getList();
    },

运行结果及详细报错内容

没有报错

我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

我想要达到的结果，如果你需要快速回答，请尝试 “付费悬赏”

Answer 1

一劳永逸简单的方式,和后端同事沟通下,别异步加载了,一次全部返回吧,你这个数据更新也不会很频繁,后端使用下缓存,这下也可以提高响应速度