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

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

界面完整如下

这是搭建的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上

猜你喜欢

转载自blog.csdn.net/Ace_with_Yu/article/details/85001050
今日推荐