通过checkBox多选框控件连级应用实现三级联动，以实现后台管理系统动态添加菜单路由

时樾佳
1,124 阅读3分钟

我正在参加 「 更文挑战玩法升级，快乐成长不迷茫｜掘金·日新计划」，今天主要讲的是：关于管理后台动态添加菜单路由配置前端页面功能的实现，后续会出一篇关于前后端联调实现动态路由添加的文章，敬请期待。

业务背景介绍

有一个后台管理项目，想实现动态添加路由，菜单通过后台管理权限给不同用户，不同角色配置不同的菜单页面，以实现不同的人访问不同的页面。

所以这次实战项目是以vue + element UI搭建的后台管理系统，而本篇文章主要讲解的是关于如何动态配置菜单（路由）以及如何实现三级联动的checkBox多选框。

整体效果展示

48.GIF

这个效果是通过checkBox多选框的二次封装来具体实现的。

具体代码实现

页面代码

<el-collapse v-model="activeName" accordion>
    <el-collapse-item v-for="(me,index) in menu" :key="me.id" :title="me.name" :name="me.id">
        <el-checkbox v-model="me.isNo" class="tag" @change="menuAllChange(me)">{{ me.name }}</el-checkbox>
        <div v-for="(er,erIds) in me.children" :key="er.id">
            <el-checkbox v-model="er.isNo" style="margin-left: 30px;" class="ertag" @change="menuSenAllChange(me.children,erIds,index)">{{ er.name }}</el-checkbox>
            <el-checkbox-group v-model="er.childSelected" style="margin-left: 60px;" @change="menuChange(me.children,erIds,index)">
                <el-checkbox v-for="ci in er.children" :key="ci.id" :label="ci.id">{{ ci.name }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <!-- <el-divider /> -->
    </el-collapse-item>
</el-collapse>

代码解析

  • 首先定义一个菜单数组集合：menu，

    字段解析：

    childSelected： 选中的其子菜单菜单ID的集合，是为了前后端交互，把选中的菜单的合集传递给后端；

    isNo：当前菜单是否是选中状态

menu: [
  {
    id: 1,
    isNo: false,
    name: '系统管理',
    childSelected: [],
    children: [
      {
        id: 111,
        isNo: false,
        name: '权限管理',
        childSelected: [],
        children: [
            {
              id: 17,
              isNo: false,
              name: '功能管理'
            }
        ]
      }
    ]
  }
]
  • 一级菜单

一级菜单主要功能实现全选和全部取消

menuAllChange(menu) {
    menu.children.forEach(v => {
        v.isNo = menu.isNo
        if (v.isNo) {
            v.children.forEach(i => {
                v.childSelected.push(i.id)
            })
        } else {
            v.children.forEach(i => {
                v.childSelected = []
            })
        }
    })
}
  • 二级菜单

二级菜单功能实现，除自身功能以外，还要有承上启下的作用，用于链接一级和三级菜单选中状态。menuSenAllChange函数传递三个参数（menu, index, parentIndex），menu：当前二级菜单集合，index：当前菜单序号，parentIndex：其父级菜单的序号，根据isNo判断当前菜单是否选中,进而进行三目运算，把所有三级菜单的ID添加进二级菜单的childSelected字段内，对于judgeIsSelectAll函数在下面有详细讲解

menuSenAllChange(menu, index, parentIndex) {
    menu[index].childSelected = menu[index].isNo ? [...menu[index].children.map(child => child.id)] : [];
    this.judgeIsSelectAll(parentIndex)
}

image.png

  • 三级菜单

三级菜单功能的实现，同样也是需要接收三个参数（menu, index, parentIndex），分别的含义是，当前三级菜单、当前二级菜单的需要，其一级菜单的序号。这三个参数是为了关联三个层级。通过改变isNo的状态和把选中的菜单的ID push进childSelected集合内

menuChange(menu, index, parentIndex) {
    menu[index].childSelected.length > 0 ? menu[index].isNo = true : menu[index].isNo = false
    this.menu[parentIndex].children.forEach(v => {
        v.childSelected.length === v.children.length ? this.menu[parentIndex].isNo = true : this.menu[parentIndex].isNo = false
    })
    this.judgeIsSelectAll(parentIndex)
}
  • 菜单关联函数

judgeIsSelectAll函数 主要实现全选和若二级菜单是全选状态，一级菜单是选中状态，三级菜单全部选中状态时，二级菜单也全部选中，进而一级菜单选中。

judgeIsSelectAll(parentIndex) {
    this.menu[parentIndex].isNo = this.menu[parentIndex].children.every(t => t.isNo === true && t.childSelected.length === t.children.length)
}

image.png

写在最后

以上便是本次分享的全部内容，希望对你有所帮助^_^

到这里业务需求基本完成了,当然可能还会有一些细枝末节需要处理,后面发现的话会进行完善如果你有任何想法和疑问，欢迎留言～ 一起探讨

点赞收藏不迷路 谢谢支持

avatar
文章
阅读
粉丝