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

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

项目使用的饿了么的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权限树组件实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。