el-cascader 懒加载选到最后一级
时间: 2023-11-21 13:52:27 浏览: 193
el-cascader 是一个级联选择器组件,支持懒加载。当用户选择某一级别的选项时,可以通过懒加载的方式异步加载下一级别的选项。如果需要在 el-cascader 中懒加载选到最后一级,可以通过以下步骤实现:
1. 在 el-cascader 的 props 中设置 lazy 为 true,表示开启懒加载功能。
2. 在 el-cascader 的 props 中设置 lazyLoad 方法,该方法会在用户点击某一级别的选项时被调用。在该方法中,可以根据当前点击的节点信息,异步加载下一级别的选项,并在加载完成后调用 resolve 方法将数据返回给 el-cascader。
3. 在 el-cascader 的 props 中设置 checkStrictly 为 true,表示取消父节点与子节点的严格关联,可以任意选中任何一级作为结束。
4. 在 el-cascader 的 change 事件中,可以监听用户选中某一级别的选项,并在选中后关闭级联弹层。
如果需要实现 el-cascader 懒加载选到最后一级时的数据回显,可以通过以下步骤实现:
1. 获取级联下拉列表的 options,不需要全部渲染,只需要渲染被选中的部分的那一条链路。
2. 为级联选择器绑定的 value 赋值,将选中的节点信息保存到 value 中。
3. 为最后一级添加 leaf 属性,告诉结构树此节点为末级节点。
如果在懒加载过程中出现了 bug,例如单击单选框不会调接口获取数据,但是会打开右侧页面,可以通过在 handleChange 方法中触发标签的点击事件来解决。具体实现可以参考引用和引用中的代码。
阅读全文