el-cascader lazy checkStrictly
时间: 2023-11-07 19:15:15 浏览: 125
C知道:el-cascader是CSDN开发的一个基于Vue的级联选择器组件,它可以实现多级联动选择。其中lazy属性用于控制级联选择器是否懒加载数据,checkStrictly属性用于控制级联选择器是否严格遵循勾选父节点时关联子节点的规则。你可以根据需要设置这两个属性来满足你的业务需求。如果你有更具体的问题或者需要更详细的使用说明,请告诉我。
相关问题
el-cascader lazyload
根据你提供的代码片段,el-cascader是一个基于Element UI的级联选择器组件,它使用lazyLoad属性来实现懒加载功能,达到根据节点id查询下一级菜单的效果。lazyLoad属性接收一个函数,该函数会在需要加载子节点数据时被调用。在你提供的代码中,lazyLoad函数使用了setTimeout模拟异步加载,通过调用resolve函数将子节点数据返回,通知组件数据加载完成。具体的实现逻辑如下:
1. 在data方法中定义了value和props两个属性,其中value用于存储选中的节点路径,props用于配置懒加载相关的属性。
2. props.lazy被设置为true,表示启用懒加载功能。
3. 定义了lazyLoad函数,该函数接收两个参数:node表示当前节点,resolve是一个函数,用于返回子节点数据。
4. 在lazyLoad函数内部,使用setTimeout模拟异步加载数据的过程。通过node.level属性获取当前节点的层级信息。
5. 创建了一个nodes数组,根据当前节点的层级信息生成相应数量的子节点数据。每个子节点包含value、label和leaf属性,leaf属性表示是否是叶子节点。
6. 最后,通过调用resolve函数将子节点数据返回,通知组件数据加载完成。
这样,el-cascader组件在使用lazyLoad属性时,会根据节点id查询下一级菜单数据,并在加载完成后更新界面显示。<span class="em">1</span>
#### 引用[.reference_title]
- *1* [el-cascader懒加载 超简单的回显](https://blog.csdn.net/qq_41883423/article/details/127320095)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
el-cascader的lazyLoad
el-cascader的lazyLoad属性是用来实现懒加载和动态获取数据的。通过设置lazyLoad属性,可以指定一个方法来加载数据源。方法中有两个参数,第一个参数是当前点击的节点,第二个参数是数据加载完成后的回调函数。在方法中可以根据不同的级别来决定加载哪个接口的数据。如果是最后一级,则可以结束加载并返回数据。在使用lazyLoad属性时,还需要注意绑定正确的this上下文,确保能够访问到相关的api方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [el-cascader级联选择器单选/多选根据接口懒加载动态获取数据](https://blog.csdn.net/weixin_45489658/article/details/115919447)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [使用el-cascader时设置lazyLoad需要注意方法中this的作用域](https://blog.csdn.net/YISHENGYOUNI95/article/details/109080764)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文