1. 程式人生 > >使用者角色- 許可權選擇 樹形表格+選擇框 三級選單

使用者角色- 許可權選擇 樹形表格+選擇框 三級選單

之前弄了個使用者角色許可權的表格,但是後面 又增加了一個需要三級的新需求,*******,所以對元件進行了新的修改

介面完整如下

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