用戶角色- 權限選擇 樹形表格+選擇框 三級菜單

之前弄了個用戶角色權限的表格，但是後面 又增加了一個需要三級的新需求，*******，所以對組件進行了新的修改

界面完整如下

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