Cascader 是element ui 的一类级联选择器组件,当一个数据集合有清晰的层级结构时,就可以使用它展示层级结构。尤其,当数据比较多时,全部获取数据速度太慢,体验不太好,可改为懒加载,一级一级地选择,就能很好避免速度慢的问题。但是,动态懒加载数据时,回显容易出现问题。
以下就是项目中遇到的el-cascader组件动态懒加载数据,引发的一个回显问题的实例,如下图:(新增弹窗 和 修改弹窗)
注释:有新增和修改的需求。新增时没有问题,修改时回显偶尔为空。
问题分析:引发回显不出来的原因有两个:
第一,修改回填组件value时,回填的数据类型与列表中对应项的属性数据类型不一致;
第二,手动赋值二级列表数据时,列表数据没有及时更新到视图层;导致即使组件的value值没问题也回显不出来;
具体地,如下图展示:
(1)组件和懒加载方法配置
(2)修改时,回填 el-cascader组件value值
注意:下图红色标注的地方
注意:一些多层数据的更新,比如动态表格中的表单数据的回显问题,运用此法也可以从根本上修复问题;
其实,看过一些其他人写的博客,他们推荐对 el-cascader组件进行隐藏-显示进行切换,或者 修改组件绑定的key值,来达到对组件数据的一个即时更新。
或许,这样子能解决一些人的问题吧,但个人感觉有点勉强!
好了,就这样子了。
标签:el,回显,问题,组件,cascader,加载 From: https://www.cnblogs.com/bky419/p/16985162.html