vue 权限分组

最新推荐文章于 2024-11-12 16:34:34 发布
最新推荐文章于 2024-11-12 16:34:34 发布
阅读量536 收藏 1
点赞数 9
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37309987/article/details/142826071
版权

实现的效果为：

1、勾选查询，新增、修改、删除不选中。

2、勾选新增、修改、或删除，查询选中。

3、查询取消勾选，则新增、修改、删除都取消勾选

4、新增、修改、删除任何一个取消勾选，查询不取消勾选

5、同一个菜单下，查询接口和当前接口下的操作按钮需要分组

数据结构如下：

 [
        {
          id: 'shchapi',
          code: 'shchapi',
          bizSysCode: 'shchapi',
          name: '主应用',
          menuSeqId: 1,
          parent: null,
          children: [
            {
              id: 'departmentManagement',
              code: 'departmentManagement',
              name: '部门管理',
              menuSeqId: 1,
              parent: 'shchapi',
              menuUrl: 'departmentManagement/department',
              children: [
                {
                  id: 'department:query',
                  code: 'department:query',
                  name: '查询',
                  parent: 'departmentManagement',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/query',
                  btnGroup: [
                    {
                      commonPrefix: 'department',
                      isQuery: '1'
                    }
                  ]
                },
                {
                  id: 'department:add',
                  code: 'department:add',
                  name: '新增',
                  parent: 'departmentManagement',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/add',
                  btnGroup: [
                    {
                      commonPrefix: 'department',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'department:edit',
                  code: 'department:edit',
                  name: '修改',
                  parent: 'departmentManagement',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/edit',
                  btnGroup: [
                    {
                      commonPrefix: 'department',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'department:delete',
                  code: 'department:delete',
                  name: '删除',
                  parent: 'departmentManagement',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/delete',
                  btnGroup: [
                    {
                      commonPrefix: 'department',
                      isQuery: '0'
                    }
                  ]
                }
              ]
            },
            {
              id: 'departmentApplication',
              code: 'departmentApplication',
              name: '部门申请',
              parent: 'departmentManagement',
              menuSeqId: 1,
              menuUrl: 'departmentManagement/departmentApplication',
              children: [
                {
                  id: 'departmentApplication:query',
                  code: 'departmentApplication:query',
                  name: '待复核（查询）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/query',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:review',
                      isQuery: '1'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:review:review',
                  code: 'departmentApplication:review:review',
                  name: '待复核（复核）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/review',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:review',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:review:revoke',
                  code: 'departmentApplication:review:revoke',
                  name: '待复核（撤销）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/edit',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:review',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:review:export',
                  code: 'departmentApplication:review:export',
                  name: '待复核（下载）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/delete',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:review',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:reviewed:query',
                  code: 'departmentApplication:reviewed:query',
                  name: '已复核（查询）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/edit',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:reviewed',
                      isQuery: '1'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:reviewed:export',
                  code: 'departmentApplication:reviewed:export',
                  name: '已复核（下载）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/edit',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:reviewed',
                      isQuery: '0'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]

具体代码实现如下：

<template>
  <el-tree
    ref="treeRef"
    class="permission-tree"
    node-key="id"
    show-checkbox
    :data="treeData1"
    :expand-on-click-node="false"
    :check-on-click-node="true"
    :props="{
      children: 'children',
      label: 'name',
      value: 'code'
    }"
    v-bind="$attrs"
    @check="handleCheck"
  >
  </el-tree>
</template>

<script>
/**
 * 根据公共前缀进行分组
 * btnGroup 数组中 commonPrefix 值一致为一组
 * **/
const groupByCommonPrefix = (actions) => {
  const groupedActions = {};
  actions.forEach((action) => {
    const commonPrefix = action.btnGroup[0].commonPrefix;
    if (!groupedActions[commonPrefix]) {
      groupedActions[commonPrefix] = [];
    }
    groupedActions[commonPrefix].push(action);
  });

  return groupedActions;
};

/**
 * groupedActions: 通过公共前缀分组后的数据
 * commonPrefix: 公共前缀
 * isQuery: 1:是查询接口; 0:普通操作按钮
 * 返回 isQuery 为 1 的数据
 * **/
const findByIsQuery = (groupedActions, commonPrefix, isQuery) => {
  if (!(commonPrefix in groupedActions)) {
    return [];
  }
  return groupedActions[commonPrefix].filter(
    (action) => action.btnGroup[0].isQuery == isQuery
  );
};

export default {
  name: 'permissionTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => ({
        children: 'children',
        label: 'name',
        value: 'code'
      })
    }
  },
  data() {
    return {
      treeData1: [
        {
          id: 'shchapi',
          code: 'shchapi',
          bizSysCode: 'shchapi',
          name: '主应用',
          menuSeqId: 1,
          parent: null,
          children: [
            {
              id: 'departmentManagement',
              code: 'departmentManagement',
              name: '部门管理',
              menuSeqId: 1,
              parent: 'shchapi',
              menuUrl: 'departmentManagement/department',
              children: [
                {
                  id: 'department:query',
                  code: 'department:query',
                  name: '查询',
                  parent: 'departmentManagement',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/query',
                  btnGroup: [
                    {
                      commonPrefix: 'department',
                      isQuery: '1'
                    }
                  ]
                },
                {
                  id: 'department:add',
                  code: 'department:add',
                  name: '新增',
                  parent: 'departmentManagement',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/add',
                  btnGroup: [
                    {
                      commonPrefix: 'department',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'department:edit',
                  code: 'department:edit',
                  name: '修改',
                  parent: 'departmentManagement',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/edit',
                  btnGroup: [
                    {
                      commonPrefix: 'department',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'department:delete',
                  code: 'department:delete',
                  name: '删除',
                  parent: 'departmentManagement',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/delete',
                  btnGroup: [
                    {
                      commonPrefix: 'department',
                      isQuery: '0'
                    }
                  ]
                }
              ]
            },
            {
              id: 'departmentApplication',
              code: 'departmentApplication',
              name: '部门申请',
              parent: 'departmentManagement',
              menuSeqId: 1,
              menuUrl: 'departmentManagement/departmentApplication',
              children: [
                {
                  id: 'departmentApplication:query',
                  code: 'departmentApplication:query',
                  name: '待复核（查询）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/query',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:review',
                      isQuery: '1'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:review:review',
                  code: 'departmentApplication:review:review',
                  name: '待复核（复核）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/review',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:review',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:review:revoke',
                  code: 'departmentApplication:review:revoke',
                  name: '待复核（撤销）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/edit',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:review',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:review:export',
                  code: 'departmentApplication:review:export',
                  name: '待复核（下载）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/delete',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:review',
                      isQuery: '0'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:reviewed:query',
                  code: 'departmentApplication:reviewed:query',
                  name: '已复核（查询）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/edit',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:reviewed',
                      isQuery: '1'
                    }
                  ]
                },
                {
                  id: 'departmentApplication:reviewed:export',
                  code: 'departmentApplication:reviewed:export',
                  name: '已复核（下载）',
                  parent: 'departmentApplication',
                  requestMethod: 'POST',
                  btnUrl: '/base/admin/edit',
                  btnGroup: [
                    {
                      commonPrefix: 'departmentApplication:reviewed',
                      isQuery: '0'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    /**
     * 复选框选中事件
     * 实现的效果：
     * 1、同组内查询节点选中时，其兄弟节点不变
     * 2、同组内兄弟节点取消选中时，其相邻兄弟节点取消选中
     * 3、同组内其相邻兄弟节点任何一个选中时，查询节点必选中
     * 注：
     *  同组: commonPrefix 值一致的为同组
     *  查询节点 btnGroup: [{commonPrefix:'departmentApplication:review',isQuery:'1'}]
     * **/
    handleCheck(data, checked) {
      if (!data.children) {
        // 只处理叶子节点
        const parentNode = this.$refs.treeRef.getNode(data).parent;
        if (parentNode) {
          // 获取当前叶子节点和兄弟节点
          const siblings = parentNode.data.children;
          const groupByCommonPrefixObj = groupByCommonPrefix(siblings);
          const findQueryBySelectedArr = findByIsQuery(
            groupByCommonPrefixObj,
            data.btnGroup[0].commonPrefix,
            '1'
          );

          if (data.btnGroup[0].isQuery == '1') {
            // 如果是查询节点，这取消选中所有非查询兄弟节点
            const { commonPrefix } = findQueryBySelectedArr[0].btnGroup[0];
            groupByCommonPrefixObj[commonPrefix].forEach((item) => {
              if (item.btnGroup[0].isQuery == '0') {
                this.$refs.treeRef.setChecked(item, false, false);
              }
            });
          } else if (checked) {
            // 如果是费查询节点被选中，这确保查询节点也被选中
            this.$refs.treeRef.setChecked(
              findQueryBySelectedArr[0],
              true,
              false
            );
          }
        }
      }
    },

    // 返回选中节点组成的数组
    getCheckedNodes(leafOnly, includeHalfChecked) {
      return this.$refs.treeRef.getCheckedNodes(leafOnly, includeHalfChecked);
    },

    // 设置目前勾选的节点
    setCheckedNodes(nodes) {
      this.$refs.treeRef.setCheckedNodes(nodes);
    },

    // 返回目前被选中的节点的 key 所组成的数组
    getCheckedKeys(leafOnly) {
      return this.$refs.treeRef.getCheckedKeys(leafOnly);
    },

    // 通过 keys 设置目前勾选的节点
    setCheckedKeys(keys, leafOnly) {
      this.$refs.treeRef.setCheckedKeys(keys, leafOnly);
    },

    // 设置某个节点的勾选状态
    setChecked(data, checked, deep) {
      this.$refs.treeRef.setChecked(data, checked, deep);
    },

    // 重置选中的节点
    resetChecked() {
      this.$refs.treeRef.setCheckedKeys([]);
    }
  }
};
</script>

jqh_0484
关注
Vue后台项目中权限管理
weixin_63473024的博客
04-04 1456
传统的权限设计是对每个人进行单独的权限设置，但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限 RBAC的权限模型 基于角色的权限分配来解决,有中间层的角色 ,可以让权限管理进行多元化的处理 RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可 一个用户可以有多个角色 创建角色的窗体 <template&gt
Vue3 实现 RBAC 权限管理
weixin_46463984的博客
03-13 4085
Vue3 实现 RBAC 权限管理 RBAC的基本概念 RBAC本质上就是一个授权的过程通过 用户 —> 角色---->资源 为啥要用RBAC 一个系统中用户是非常多的，对于不同的用户，展示的内容也是不同的，如果为每一个用户都单独的设置权限那需要创造出多少提条数据，例如：一个系统有30个菜单，100个用户，一对一授权就是30 * 100 ，每一个菜单项基本有增删改查，那就是30 * 100 * 4用户越多产生的数据越多，后期增删改查统统要遍历所有的数据，设计是非常糟糕的，效率极低。 若果采
vue权限配置
waillyer的博客
09-18 813
对权限进行分组配置 后端会返回数组项，通过id可获取用户拥有权限 string.indexOf(searchvalue,start)Number 查找指定字符串第一次出现的位置，如果没找到匹配的字符串则返回 -1。 获取数据，对多选框分组 <el-checkbox-group v-model="checkedMenuOptions" @change="handleCheckedChange"> <el-checkbox v-for="item in menuOptions"
vue和element实现权限树的各种功能
qq_44969202的博客
01-17 1447
vue和element实现权限树的各种功能 在工作开发的过程中，项目中需要用到权限管理的相关功能，因此去完成了权限树的开发。在开发中，主要运用vue和elementui进行开发，权限树先进行渲染，然后再完成各种功能。权限树选中父节点不一定选中子节点，选中子节点不一定选中父节点，包含选择和全选的功能，点击父节点一定会展开子节点的功能。
vue3+element-plus角色权限管理分配
weixin_68658847的博客
05-01 1786
vue+element-plus角色权限管理分配
vue后台管理系统权限分配的解决方案-RBAC模型
qq_21013249的博客
11-02 1346
前言 在后台,人力资源管理系统中,我们经常会遇到分配权限的技术,关于怎么分配权限就是一个难点,在这里,RBAC模型可以很好的解决这个问题 RBAC是什么? RBAC模型概述 RBAC模型（Role-Based Access Control：基于角色的访问控制）模型是20世纪90年代研究出来的一种新模型，但其实在20世纪70年代的多用户计算时期，这种思想就已经被提出来，直到20世纪90年代中后期，RBAC才在研究团体中得到一些重视，并先后提出了许多类型的RBAC模型。其中以美国George Mason
vue
qq_35911118的博客
04-24 1273
第一章 三大框架： vue.js： 优点：更轻量，单页面，简单易学 缺点：不支持IE8 开发团队：中国国内团队开发，作者：尤雨溪 Angular： 优点：完善的框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能 缺点：比较笨重，学习成本高，不兼容IE6/7 开发团队：google谷歌 react： 优点：速度快、跨浏览器兼容、单向数据流、兼容性好 缺点：并不是一个完整的框...
vue2 组件封装
JackZhouMine
06-06 1534
本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点：使用第三方计数库 countup.js 创建一个 组件对以上知识进行总结。在组件文件夹 下创建一个与组件名相同的文件，文件夹内必须有 , 并将组件导入到该文件中，这样方便我们引用组件。 文件夹内： 使用组件时，只需这样引入： Vue 组件的三大核心 属性（props、data 和样式） props 定义了组件 的数据，确定的组件的核心功能。封装组件时，props 推荐写成对象形式，方便对数据进行验证，提高了代码健壮性也
vue结合django restframework登录和权限菜单加载
laoli815的博客
02-25 2074
vue结合restframework登录验证以及权限加载
go-admin框架vue权限字符-全网最透彻讲解
05-18
### go-admin框架vue权限字符-全网最透彻讲解 #### 一、权限字符的作用与原理 在现代Web开发中，权限控制是非常重要的一个环节，它确保了不同用户能够访问到他们应该访问的信息，同时也避免了非法操作。在go-admin...
vue左侧菜单,树形图递归实现代码
10-18
在Vue.js中，创建一个可递归的左侧菜单通常涉及到数据结构的理解、组件通信以及条件渲染。本例中，我们看到一个使用Vue实现的多级树形菜单，它主要用于后台管理系统的侧边栏。让我们详细解析一下这个实现过程。 ...
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
在使用Vue.js结合Element UI进行动态表单渲染时，经常会遇到一些响应式数据绑定的问题。特别是当涉及到动态生成的表单元素，比如checkbox（复选框）时，开发者可能会遇到点击复选框无法正确赋值的情况。本文将详细...
Vue中的常用指令
m0_62388400的博客
11-12 926
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
第四十二章 Vue中使用mutations修改Vuex仓库数据
Calvin的博客
11-11 646
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 847
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue实际应用之无限滚动、css之&、混合宏和~
最新发布
swj的博客
11-12 506
今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！先来介绍一个三方库。
速盾：vue的cdn是干嘛的？
zhuguowang01的博客
11-08 390
这时就可以使用CDN来加速这些库或者插件的加载。总结一下，Vue的CDN是一种将Vue.js及其相关的库或者插件缓存在全球各个节点的技术，通过就近访问的原则，加速网页加载，减轻服务器负载，并提高网站的稳定性和可靠性。Vue的CDN可以帮助将Vue.js及其相关的库或者插件存储到全球各个节点的服务器中，使得用户可以从最近的服务器上加载这些资源，从而提高加载速度。提高网站的稳定性和可靠性：CDN通过将资源存储在多个服务器上，即使某个节点故障或者不可用，用户仍然可以从其他的节点上获取资源，保证网站的可用性。
vue3组件应用 + 以及组件相关知识应用
m0_51244077的博客
11-08 1025
vue3组件应用 + 以及组件相关知识应用
vue3项目中内嵌vuepress工程两种实现方式
xiaopiaoliang777的博客
11-11 469
vue3项目启动vuepress
RuoYi-Vue二次开发实现分组任务系统搭建
资源摘要信息:"本节内容将详细介绍如何基于RuoYi-Vue-master框架进行搭建以及如何在此基础上进行分组任务系统的二次开发。RuoYi-Vue-master是一个基于Vue.js前端框架的快速开发平台，结合了Spring Boot作为后端，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值