element tree ui 全选_element-ui checkbox 组件的树形联动

最新推荐文章于 2022-07-24 22:38:42 发布

韦先波

最新推荐文章于 2022-07-24 22:38:42 发布

阅读量380

点赞数

文章标签： element tree ui 全选

本文链接：https://blog.csdn.net/weixin_42160645/article/details/112284449

版权

本文介绍了如何使用 Element UI 实现多级联动的树形全选功能，适用于角色管理等业务。通过处理数据模型、逻辑处理，包括handleCheckAllChange和handleCheckChange方法，实现了菜单列和选项列的改变事件。同时提供了findChildren和findParent的递归方法，以处理父子级菜单的选中状态。完整示例代码可在GitHub查看。

摘要由CSDN通过智能技术生成

前言

示例版本为 Element-ui 2.13.0 + Vue 2.6.11

最近想弄 Element-ui checkbox 的多级联动，网上相关的例子大多数为二级联动，自己研究了一下，弄了一个树形菜单的多级联动，常用于角色管理等业务。（仅供参考，未考虑性能问题）

数据模型

[
    {
      "menu": { 
        "id":14, 
        "menuName":"测试管理',
         "parentId":0
      } ，
      "menuOptionsList":[
            {
                "id":46,
                "optionsName":"列表",
                "checked":false
            },
            {
                "id":47,
                "optionsName":"新增",
                "checked":false
            }
        ],        
        "children":[],
        "checked":false
    }
]

这里展示的最顶级的数据结构，下级数据只需要在 children 中添加即可。需要注意的是 checked 属性