element-ui级联选择器动态加载后如何确保默认选中项正确显示？

本文共计1030个文字，预计阅读时间需要5分钟。

目录+前言

1.解决方案

2. 不同级别的默认选择中解決方案前言+最近在开发任务中遇到需要在新增和修改时使用动态加载级联选择器，但在修改时设置默认选中项时，后端数据出现了异常。

目录

• 前言
• 1.解决方法
• 2.不同层级间的默认选中解决方法

前言

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

完整的实现代码在最后

1.解决方法

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

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

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