用户角色- 权限选择 树形表格+选择框 三级菜单

12 篇文章 0 订阅
4 篇文章 0 订阅

之前弄了个用户角色权限的表格,但是后面 又增加了一个需要三级的新需求,*******,所以对组件进行了新的修改

界面完整如下

这是搭建的demo 设备管理下有设备1设备2两个模块设备1拥有增删改的权限,设备2下拥有两个模块设备2-1设备2-2 都拥有相应的模块,

相应的数据格式如下;

  

            treeData:[	
                {      
                     isLeaf: 0,
					checked: false,
					id: 1,
					name: '用户管理',
					indeterminate: false,
					checkAll: false,
					act: '全选',
					children: [
						{
							isLeaf: 1,
							id: 11,
							name: '用户列表',
							parentId: 1,
							checked: false,
							selectchecked: [111],
							checkAll: false,
							indeterminate: false,
							children: [],
							sonData: [
								{
									isLeaf: 0,
									operation: '增加',
									parentId: 11,
									checked: false,
									id: 111
								},
								{
									isLeaf: 0,
									operation: '修改',
									parentId: 11,
									checked: false,
									id: 112
								},
								{
									isLeaf: 0,
									operation: '删除',
									parentId: 11,
									checked: false,
									id: 113
								}
							]
						}
					]
				},
				{
					isLeaf: 3,
					checked: false,
					id: 2,
					name: '设备管理',
					indeterminate: false,
					checkAll: false,
					act: '全选',
					children: [
						{
							isLeaf: 1,
							id: 21,
							name: '设备1',
							parentId: 2,
							checked: false,
							selectchecked: [211],
							checkAll: false,
							indeterminate: false,
							children:[],
							sonData: [
								{
									isLeaf: 0,
									operation: '增加',
									parentId: 21,
									checked: false,
									id: 211
							       	},
								{
									isLeaf: 0,
									operation: '修改',
									parentId: 21,
									checked: false,
									id: 212
								},
								{
									isLeaf: 0,
									operation: '删除',
									parentId: 21,
									checked: false,
									id: 213
								}
							]
						},
						{
							isLeaf: 0,
							id: 22,
							act: '全选',
							name: '设备2',
							parentId: 2,
							checked: false,
							selectchecked: [],
							checkAll: false,
							indeterminate: false,
							children:[
								{
									isLeaf: 1,
									id: 23,
									name: '设备2-1',
									parentId: 22,
									checked: false,
									selectchecked: [222],
									checkAll: false,
									indeterminate: false,
									children:[],
									sonData: [
										{
											isLeaf: 0,
											operation: '增加',
											parentId: 23,
											checked: false,
											id: 221
										},
										{
											isLeaf: 0,
											operation: '修改',
											parentId: 23,
											checked: false,
											id: 222
										},
										{
											isLeaf: 0,
											operation: '删除',
											parentId: 21,
											checked: false,
											id: 213
										}
									]
								},
								{
									isLeaf: 1,
									id: 24,
									name: '设备2-2',
									parentId: 22,
									checked: false,
									selectchecked: [224],
									checkAll: false,
									indeterminate: false,
									children:[],
									sonData: [
										{
											isLeaf: 0,
											operation: '增加',
											parentId: 24,
											checked: false,
											id: 224
										},
										{
											isLeaf: 0,
											operation: '修改',
											parentId: 24,
											checked: false,
											id: 225
										},
										{
											isLeaf: 0,
											operation: '删除',
											parentId: 24,
											checked: false,
											id: 2226
										}
									]
								}
							]
						}
					]
				}
			]

这个数据格式让后台这样子写即可。

然后组件中要在defaultSelcet和cc函数中对三级的对象进行相应的处理,相关代码迟点整理再放到guthuo上

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值