超级会员免费看
我们PC项目用到的前端技术栈是vue+iview,最近有个需求，要做个级联选择器，并且是懒加载动态加载后端返回的数据。效果如下：
如下图所示，在我们封装的公共组件form-box.vue里有我们级联选择器：
代码如下：
<!--级联选择器-->
<template v-else
本文介绍了在Vue+iView项目中实现级联选择器的动态加载数据，重点解决了数据结构问题和懒加载过程中遇到的坑。在封装的公共组件form-box.vue中，使用change-on-select属性允许选择任意层级，同时强调data初始值应为空数组，避免出现错误。在父组件中，于created钩子中赋值数据。级联选择器不支持自定义props，需手动设置label和value。loadData方法中调用API获取下级数据，注意处理数据结构，如将children为null的情况转换为空数组，以及通过hasChild字段判断是否存在子级，避免页面异常。
订阅专栏 解锁全文
扫一扫
4393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
