el-collapse三层折叠
时间: 2023-08-17 18:15:36 浏览: 116
el-collapse是一个Vue组件,用于实现折叠面板的功能。它可以用于展示多级菜单,并且支持多级菜单的选择。根据需求,如果最后一级为二级节点,则只能单选,如果为三级节点,则允许当前父节点内的所有子节点可以多选。
在el-collapse中,可以使用el-collapse-item来定义每个折叠项。每个折叠项可以包含el-collapse-item作为子项,从而实现多级菜单的展开。
为了实现多级菜单的选择功能,可以使用el-checkbox或el-radio作为每个菜单项的选择器。当最后一级为二级节点时,使用el-radio实现单选功能;当最后一级为三级节点时,使用el-checkbox实现多选功能。
在el-collapse中,可以通过v-model来绑定选中的菜单项。当选中的菜单项改变时,可以通过监听change事件来获取选中的菜单项的值。返回的值可以是由该节点所在的各级菜单的值所组成的数组。
综上所述,可以使用el-collapse和el-collapse-item来实现三层折叠菜单,并根据最后一级节点的类型选择使用el-radio或el-checkbox来实现单选或多选功能。通过监听change事件来获取选中的菜单项的值,并返回由该节点所在的各级菜单的值所组成的数组。
#### 引用[.reference_title]
- *1* [el-cascader实现第三级菜单多选,一二级菜单单选,并且父节点禁用](https://blog.csdn.net/qq_40501188/article/details/125541725)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)