项目使用的饿了么的Element-Ui，权限树使用其树形控件：
刚开始没有特殊需求，三级分支，效果看着还可以。但是接下来的新需求：增加页面操作按钮权限，即达到四级分支，同时要求四级权限布局方式为横向，而且操作按钮权限非固定四级树，但是样式要求一致。这样子就很难操作了，如果单单是四级树为横向，还可以调调样式完成。本来想修改element的tree控件源码来实现，网上查了一些资料，还没有很好的办法生成其编译文件。最终决定自己写组件完成上述需求。
先上效果图：
基本可以满足需求，样式稍微比element差点，后期再优化。
组件代码如下：
{{ model.menuName }} 权限树的数据结构有一定要求，比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权限树组件实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 