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

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

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

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

解决了一半

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

当我点击的是原点

img

img

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

img

img


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

遇到的现象和发生背景,请写出第一个错误信息
用代码块功能插入代码,请勿粘贴截图。 不用代码块回答率下降 50%
 "cascader$$"
          v-model="deptIdArr"
          :size="'mini'"
          :props="stationOpts"
          :showAllLevels="false"
          :popperClass="'cascader-org'"
          @change="handleQuery($event, scope)"
        >
        

  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%
我想要达到的结果,如果你需要快速回答,请尝试 “付费悬赏”

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

你是点击展开的时候调用后端接口吗?确保你点击的时候真实调用的后端接口,然后确保属性对应的上

el-cascader 是一种级联选择器组件,支持懒加载模式。在懒加载模式下,当用户选择某个单选框时,才会加载该单选框对应的下层数据。

如果你在使用 el-cascader 懒加载模式时遇到了选中单选框加载下层无数据问题,可能是因为你的数据源中没有为该单选框对应的下层数据。

解决方案有:

确保你的数据源中为该单选框对应的下层数据。
如果数据源动态加载,请确保加载数据的逻辑正确,并且数据已经加载完成。
如果数据源是远程接口,请确保请求数据的参数正确,并且接口可用。
如果以上方法都不能解决问题,你可以在 el-cascader 的配置中使用 show-all-levels 属性来展示所有层级的单选框,这样用户就能看到没有数据的单选框了。

https://blog.csdn.net/liuwenjie_/article/details/126279731?spm=1001.2014.3001.5502