ascader 属性 'props.lazy' 和 'props.checkStrictly' 为真,第一次点击节点的单选按钮时,子菜单会显示 'No data yet'。让人以为真的没有数据。但是,实际上并没有载入子菜单的数据。第二次点击时,显示正常。
遇到bug:https://github.com/ElemeFE/element/pull/20848
参考了这位网友的方法:https://blog.csdn.net/shane_young?type=blog
解决了一半
当我点击的是原点
触发了回显动态加载了数据和列表的过滤刷新,但是圆点没有被选中
当我点击的是箭头或者文字
"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();
},
没有报错
一劳永逸简单的方式,和后端同事沟通下,别异步加载了,一次全部返回吧,你这个数据更新也不会很频繁,后端使用下缓存,这下也可以提高响应速度
你是点击展开的时候调用后端接口吗?确保你点击的时候真实调用的后端接口,然后确保属性对应的上
el-cascader 是一种级联选择器组件,支持懒加载模式。在懒加载模式下,当用户选择某个单选框时,才会加载该单选框对应的下层数据。
如果你在使用 el-cascader 懒加载模式时遇到了选中单选框加载下层无数据问题,可能是因为你的数据源中没有为该单选框对应的下层数据。
解决方案有:
确保你的数据源中为该单选框对应的下层数据。
如果数据源动态加载,请确保加载数据的逻辑正确,并且数据已经加载完成。
如果数据源是远程接口,请确保请求数据的参数正确,并且接口可用。
如果以上方法都不能解决问题,你可以在 el-cascader 的配置中使用 show-all-levels 属性来展示所有层级的单选框,这样用户就能看到没有数据的单选框了。
https://blog.csdn.net/liuwenjie_/article/details/126279731?spm=1001.2014.3001.5502