解决element-ui动态加载级联选择器默认选中问题(Cascader)(elementuiicon)

编辑：rootadmin

解决element-ui动态加载级联选择器默认选中问题(Cascader) 前言

推荐整理分享解决element-ui动态加载级联选择器默认选中问题(Cascader)(elementuiicon)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:element ui bug,elemental ui,element-ui dialog,elementplus ui,elemental ui,elemental ui,element_ui,elemental ui,内容如对您有帮助，希望把文章链接给更多的朋友！

最近在开发任务中碰到需要在新增和修改时使用动态加载级联选择器，但是当在修改时设置默认选中项，出现了后端数据返回较慢，导致无法选中和级联框选中了但input框不显示的问题，网上找到的方法也不是很有效，还得使用ref查看组件实例和element-ui cascader源码来寻找解决方法。

完整的实现代码在最后

1. 解决方法

我们知道使用动态加载的级联选择器需要使用lazyLoad函数，那就先开始寻找lazyLoad函数，使用ref查看组件实例，可以看到是在panel下。

解决element-ui动态加载级联选择器默认选中问题(Cascader)(elementuiicon)

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

知道了传参和调用，但是传参的参数从哪来？如下图可以看到是从this.$refs.xxx.panel.menus[0]循环比对获取。

如果后端数据返回快的话可以达到要实现的选中效果，如果后端数据返回的较慢就会出现没选中的情况（可以自己在lazyLoad加个一秒延迟测试），这时就需要使用handleExpand（handleExpand也在panel下），并且要在请求结束后执行handleExpand，如何在请求结束时执行handleExpand，我们对代码进行如下修改：

先

本文链接地址:https://www.jiuchutong.com/zhishi/283239.html 转载请保留说明！

上一篇：大叶绣球花上的一对日本树蛙，日本滋贺 (© Mitsuhiko Imamori/Minden)(绣球花的叶子出现了斑点,这是怎么了?)

下一篇：ireike.exe - ireike是什么进程有什么作用