平武建站

Vue2.0权限树组件实现代码

项目使用的饿了么的Element-Ui，权限树使用其树形控件：

成都创新互联公司专注于安顺网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供安顺营销型网站建设，安顺网站制作、安顺网页设计、安顺网站官网定制、微信小程序服务，打造安顺网络公司原创品牌,更为您提供安顺网站排名全网营销落地服务。

Vue2.0权限树组件实现代码

刚开始没有特殊需求，三级分支，效果看着还可以。但是接下来的新需求：增加页面操作按钮权限，即达到四级分支，同时要求四级权限布局方式为横向，而且操作按钮权限非固定四级树，但是样式要求一致。这样子就很难操作了，如果单单是四级树为横向，还可以调调样式完成。本来想修改element的tree控件源码来实现，网上查了一些资料，还没有很好的办法生成其编译文件。最终决定自己写组件完成上述需求。

先上效果图：

Vue2.0权限树组件实现代码

基本可以满足需求，样式稍微比element差点，后期再优化。

组件代码如下：

 
 
 
 
 

权限树的数据结构有一定要求，比element的tree控件数据结构属性稍多一些，否则实现也不会这么简单了，优化后的权限树数据结构在选中菜单返回上简化了很多，也没有用到vuex。

权限树数据结构为：

{ 
  'childNode': [ 
   { 
    'childNode': [ 
     { 
      'icon': '', 
      'id': 242, 
      'menuLevel': 3, 
      'menuName': '旅游订单', 
      'menuTop': 1, 
      'menuUrl': '/', 
      'buttonControl': '0', 
      'supMenuID': 241 
     }, 
     { 
      'icon': '', 
      'id': 243, 
      'menuLevel': 3, 
      'menuName': '签证订单', 
      'menuTop': 2, 
      'menuUrl': '/', 
      'buttonControl': '0', 
      'supMenuID': 241 
     }, 
     { 
      'icon': '', 
      'id': 244, 
      'menuLevel': 3, 
      'menuName': '出团通知书', 
      'menuTop': 3, 
      'menuUrl': '/', 
      'buttonControl': '0', 
      'supMenuID': 241 
     } 
    ], 
    'icon': '', 
    'id': 241, 
    'menuLevel': 2, 
    'menuName': '订单管理', 
    'menuTop': 1, 
    'menuUrl': '/', 
    'buttonControl': '0', 
    'supMenuID': 240 
   }, 
   { 
    'childNode': [ 
     { 
      'icon': '', 
      'id': 246, 
      'menuLevel': 3, 
      'menuName': '旅游产品', 
      'menuTop': 1, 
      'menuUrl': '/tourProduct', 
      'buttonControl': '0', 
      'supMenuID': 245 
     }, 
     { 
      'icon': '', 
      'id': 247, 
      'menuLevel': 3, 
      'menuName': '图库', 
      'menuTop': 2, 
      'menuUrl': '/basePicStore', 
      'buttonControl': '0', 
      'supMenuID': 245 
     }, 
     { 
      'icon': '', 
      'id': 248, 
      'menuLevel': 3, 
      'menuName': '签证产品', 
      'menuTop': 3, 
      'menuUrl': '/', 
      'buttonControl': '0', 
      'supMenuID': 245 
     } 
    ], 
    'icon': '', 
    'id': 245, 
    'menuLevel': 2, 
    'menuName': '产品管理', 
    'menuTop': 2, 
    'menuUrl': '/', 
    'buttonControl': '0', 
    'supMenuID': 240 
   }, 
   { 
    'childNode': [ 
     { 
      'icon': '', 
      'id': 250, 
      'menuLevel': 3, 
      'menuName': '旅游广告', 
      'menuTop': 1, 
      'menuUrl': '/', 
      'buttonControl': '0', 
      'supMenuID': 249 
     } 
    ], 
    'icon': '', 
    'id': 249, 
    'menuLevel': 2, 
    'menuName': '广告管理', 
    'menuTop': 3, 
    'menuUrl': '/', 
    'buttonControl': '0', 
    'supMenuID': 240 
   } 
  ], 
  'icon': '', 
  'id': 240, 
  'menuLevel': 1, 
  'menuName': '业务中心', 
  'menuTop': 1, 
  'menuUrl': '/', 
  'buttonControl': '0', 
  'supMenuID': 0 
 }

实际数据为上述对象的数组。

这里主要增加了buttonControl和supMenuId，方便实现按钮权限的样式判断和选中、取消操作的checkbox级联操作。

引用组件代码：

theModel即为权限树数组，selectKeys为选中的权限数组集合，即id集合。

mounted()实现初始化操作：禁止checkbox的冒泡时间，selectKeys的赋值操作。

其实权限树或者说菜单树的要点就在递归算法上，按钮的选中或取消，都需要执行递归操作。这里使用jQuery来协助操作，简化了许多事情，应该还是数据绑定的精神没有掌握好吧。getAllKeys()获取checkbox为true的权限id返回。
实际获取选中的权限菜单的数据如下图：

Vue2.0权限树组件实现代码

总结

以上所述是小编给大家介绍的Vue2.0权限树组件实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！


网站名称：Vue2.0权限树组件实现代码
文章路径：http://pwwzsj.com/article/jiiecc.html

其他资讯