el-cascader可以选任意一级
时间: 2024-06-19 08:03:24 浏览: 14
el-cascader是一个基于Vue.js的级联选择器组件,可以实现多级选项之间的联动选择。在el-cascader中,你可以通过设置cascader-expand-trigger属性为'click'来实现选择任意一级选项的功能。默认情况下,cascader-expand-trigger属性为'hover',即只有鼠标悬浮在某一级选项上时才会展开下一级选项。但是,将cascader-expand-trigger属性设置为'click'后,则可以通过点击某一级选项来展开或收起其子选项,从而实现选择任意一级选项的功能。
相关问题
el-cascader可选中任意一级
el-cascader组件可以通过设置props中的checkStrictly为true来实现选择任意一级的功能。具体代码如下:
```html
<el-cascader :props="{ checkStrictly: true }"></el-cascader>
```
设置checkStrictly为true后,父子节点将不再互相关联,可以选择任意一级选项。
#### 引用[.reference_title]
- *1* *2* [Element-ui: el-cascader 级联选择器 可以单独选择任意一级选项,去掉单选按钮](https://blog.csdn.net/qq_40184218/article/details/119536046)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [级联选择器el-cascader ——实现树形数据下的,选择任意一级和只展示选中的数据](https://blog.csdn.net/fdadfas/article/details/123003420)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
el-cascader 懒加载选到最后一级
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 方法中触发标签的点击事件来解决。具体实现可以参考引用和引用中的代码。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)