前言：最近在做一个权限管理的页面，需要配置权限。业务给的要求在表格里，展示权限以及编辑权限。然后根据权限数组，动态展示模块。
页面需求：可以设定每个公司或者部门的单独权限，可以编辑保存权限
主要实现：
1.全选，反选（递归循环，every,some实现）
2.子级选中其父级选中，父级取消子级也取消
3.可以拿到全选和半选的id（放在wholeCheckedKeys全选 和 halfCheckedKeys半选 数组中）
主要代码：
changeFlag方法（实现了全选，反选，子级选中其父级选中，父级取消子级也取消，唯一标识就是id ,如果你的不是自行修改）。可以把整个代码复制到项目中，根据自己的需求改变代码。
<!-- 表格 -->
<a-table
bordered
size="middle"
row-key="id"
:columns="columns"
:data-source="permissionTableData"
:pagination="false"
:scroll="{ y: 500 }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'power'">
<a-checkbox
v-model:checked="record.has_view"
:indeterminate="record.has_viewindeterminate ? true : false"
@change="(e) => viewOnChange(e, record.id, 'has_view')"
/>
</template>
</template>
</a-table>
接口获取到数据格式如下面：通过 addParentKeyWrapper 方法将每个设置上parent_id
1 [
2 {
3 "id": "1568169033428340736",
4 "label": "首页",
5 "name": "首页",
6 "type": "0",
7 "sort": 0,
8 "perms": "",
9 "children": [
10 {
11 "id": "1719956407916339200",
12 "label": "工作台1",
13 "name": "工作台1",
14 "type": "1",
15 "sort": 0,
16 "perms": "dashboard:workplace"
17 }
18 ]
19 },
20 {
21 "id": "2",
22 "label": "系统租户",
23 "name": "系统租户",
24 "type": "0",
25 "sort": 1,
26 "perms": "",
27 "children": [
28 {
29 "id": "20000",
30 "label": "租户管理",
31 "name": "租户管理",
32 "type": "1",
33 "sort": 1,
34 "perms": "",
35 "children": [
36 {
37 "id": "20010",
38 "label": "租户列表",
39 "name": "租户列表",
40 "type": "1",
41 "sort": 1,
42 "perms": "tenant:tenant:list",
43 "children": [
44 {
45 "id": "20011",
46 "label": "租户查询",
47 "name": "租户查询",
48 "type": "1",
49 "sort": 1,
50 "perms": "tenant:tenant:query"
51 },
52 {
53 "id": "20012",
54 "label": "租户新增",
55 "name": "租户新增",
56 "type": "1",
57 "sort": 2,
58 "perms": "tenant:tenant:add"
59 },
60 {
61 "id": "20013",
62 "label": "租户修改",
63 "name": "租户修改",
64 "type": "1",
65 "sort": 3,
66 "perms": "tenant:tenant:edit"
67 },
68 {
69 "id": "20014",
70 "label": "菜单配置",
71 "name": "菜单配置",
72 "type": "1",
73 "sort": 4,
74 "perms": "tenant:tenant:role"
75 },
76 {
77 "id": "20015",
78 "label": "租户删除",
79 "name": "租户删除",
80 "type": "1",
81 "sort": 5,
82 "perms": "tenant:tenant:remove"
83 }
84 ]
85 },
86 {
87 "id": "20020",
88 "label": "数据源管理",
89 "name": "数据源管理",
90 "type": "1",
91 "sort": 1,
92 "perms": "tenant:source:list",
93 "children": [
94 {
95 "id": "20021",
96 "label": "数据源查询",
97 "name": "数据源查询",
98 "type": "1",
99 "sort": 1,
100 "perms": "tenant:source:query"
101 },
102 {
103 "id": "20022",
104 "label": "数据源新增",
105 "name": "数据源新增",
106 "type": "1",
107 "sort": 2,
108 "perms": "tenant:source:add"
109 },
110 {
111 "id": "20023",
112 "label": "数据源修改",
113 "name": "数据源修改",
114 "type": "1",
115 "sort": 3,
116 "perms": "tenant:source:edit"
117 },
118 {
119 "id": "20024",
120 "label": "数据源配置",
121 "name": "数据源配置",
122 "type": "1",
123 "sort": 4,
124 "perms": "tenant:separation:edit"
125 },
126 {
127 "id": "20025",
128 "label": "数据源删除",
129 "name": "数据源删除",
130 "type": "1",
131 "sort": 5,
132 "perms": "tenant:source:remove"
133 }
134 ]
135 }
136 ]
137 },
138 {
139 "id": "20100",
140 "label": "配置",
141 "name": "配置",
142 "type": "1",
143 "sort": 3,
144 "perms": "",
145 "children": [
146 {
147 "id": "20110",
148 "label": "字典管理",
149 "name": "字典管理",
150 "type": "1",
151 "sort": 1,
152 "perms": "system:dict:list",
153 "children": [
154 {
155 "id": "20111",
156 "label": "字典查询",
157 "name": "字典查询",
158 "type": "1",
159 "sort": 1,
160 "perms": "system:dict:query"
161 },
162 {
163 "id": "20112",
164 "label": "字典新增",
165 "name": "字典新增",
166 "type": "1",
167 "sort": 2,
168 "perms": "system:dict:add"
169 },
170 {
171 "id": "20113",
172 "label": "字典修改",
173 "name": "字典修改",
174 "type": "1",
175 "sort": 3,
176 "perms": "system:dict:edit"
177 },
178 {
179 "id": "20114",
180 "label": "字典删除",
181 "name": "字典删除",
182 "type": "1",
183 "sort": 4,
184 "perms": "system:dict:remove"
185 },
186 {
187 "id": "20115",
188 "label": "字典导出",
189 "name": "字典导出",
190 "type": "1",
191 "sort": 5,
192 "perms": "system:dict:export"
193 }
194 ]
195 },
196 {
197 "id": "10520",
198 "label": "定时任务",
199 "name": "定时任务",
200 "type": "1",
201 "sort": 2,
202 "perms": "monitor:job:list",
203 "children": [
204 {
205 "id": "10521",
206 "label": "任务查询",
207 "name": "任务查询",
208 "type": "1",
209 "sort": 1,
210 "perms": "monitor:job:query"
211 },
212 {
213 "id": "10522",
214 "label": "任务新增",
215 "name": "任务新增",
216 "type": "1",
217 "sort": 2,
218 "perms": "monitor:job:add"
219 },
220 {
221 "id": "10523",
222 "label": "任务修改",
223 "name": "任务修改",
224 "type": "1",
225 "sort": 3,
226 "perms": "monitor:job:edit"
227 },
228 {
229 "id": "10524",
230 "label": "任务删除",
231 "name": "任务删除",
232 "type": "1",
233 "sort": 4,
234 "perms": "monitor:job:remove"
235 },
236 {
237 "id": "10525",
238 "label": "状态修改",
239 "name": "状态修改",
240 "type": "1",
241 "sort": 5,
242 "perms": "monitor:job:changeStatus"
243 },
244 {
245 "id": "10526",
246 "label": "任务导出",
247 "name": "任务导出",
248 "type": "1",
249 "sort": 6,
250 "perms": "monitor:job:export"
251 }
252 ]
253 },
254 {
255 "id": "20120",
256 "label": "参数配置",
257 "name": "参数配置",
258 "type": "1",
259 "sort": 2,
260 "perms": "system:config:list",
261 "children": [
262 {
263 "id": "20121",
264 "label": "参数查询",
265 "name": "参数查询",
266 "type": "1",
267 "sort": 1,
268 "perms": "system:config:query"
269 },
270 {
271 "id": "20122",
272 "label": "参数新增",
273 "name": "参数新增",
274 "type": "1",
275 "sort": 2,
276 "perms": "system:config:add"
277 },
278 {
279 "id": "20123",
280 "label": "参数修改",
281 "name": "参数修改",
282 "type": "1",
283 "sort": 3,
284 "perms": "system:config:edit"
285 },
286 {
287 "id": "20124",
288 "label": "参数删除",
289 "name": "参数删除",
290 "type": "1",
291 "sort": 4,
292 "perms": "system:config:remove"
293 },
294 {
295 "id": "20125",
296 "label": "参数导出",
297 "name": "参数导出",
298 "type": "1",
299 "sort": 5,
300 "perms": "system:config:export"
301 }
302 ]
303 }
304 ]
305 },
306 {
307 "id": "20200",
308 "label": "系统监控",
309 "name": "系统监控",
310 "type": "1",
311 "sort": 4,
312 "perms": "",
313 "children": [
314 {
315 "id": "20210",
316 "label": "Sentinel控制台",
317 "name": "Sentinel控制台",
318 "type": "1",
319 "sort": 1,
320 "perms": "monitor:sentinel:list"
321 },
322 {
323 "id": "20220",
324 "label": "Nacos控制台",
325 "name": "Nacos控制台",
326 "type": "1",
327 "sort": 2,
328 "perms": "monitor:nacos:list"
329 },
330 {
331 "id": "20230",
332 "label": "Admin控制台",
333 "name": "Admin控制台",
334 "type": "1",
335 "sort": 3,
336 "perms": "monitor:server:list"
337 },
338 {
339 "id": "20240",
340 "label": "rabbit控制台",
341 "name": "rabbit控制台",
342 "type": "1",
343 "sort": 4,
344 "perms": "monitor:rabbitmq:list"
345 }
346 ]
347 },
348 {
349 "id": "20300",
350 "label": "系统工具",
351 "name": "系统工具",
352 "type": "1",
353 "sort": 5,
354 "perms": "",
355 "children": [
356 {
357 "id": "20310",
358 "label": "表单构建",
359 "name": "表单构建",
360 "type": "1",
361 "sort": 1,
362 "perms": "tool:build:list"
363 },
364 {
365 "id": "20320",
366 "label": "代码生成",
367 "name": "代码生成",
368 "type": "1",
369 "sort": 2,
370 "perms": "tool:gen:list",
371 "children": [
372 {
373 "id": "20321",
374 "label": "生成查询",
375 "name": "生成查询",
376 "type": "1",
377 "sort": 1,
378 "perms": "tool:gen:query"
379 },
380 {
381 "id": "20322",
382 "label": "生成修改",
383 "name": "生成修改",
384 "type": "1",
385 "sort": 2,
386 "perms": "tool:gen:edit"
387 },
388 {
389 "id": "20323",
390 "label": "生成删除",
391 "name": "生成删除",
392 "type": "1",
393 "sort": 3,
394 "perms": "tool:gen:remove"
395 },
396 {
397 "id": "20324",
398 "label": "导入代码",
399 "name": "导入代码",
400 "type": "1",
401 "sort": 4,
402 "perms": "tool:gen:import"
403 },
404 {
405 "id": "20325",
406 "label": "预览代码",
407 "name": "预览代码",
408 "type": "1",
409 "sort": 5,
410 "perms": "tool:gen:preview"
411 },
412 {
413 "id": "20326",
414 "label": "生成代码",
415 "name": "生成代码",
416 "type": "1",
417 "sort": 6,
418 "perms": "tool:gen:code"
419 }
420 ]
421 },
422 {
423 "id": "20330",
424 "label": "系统接口",
425 "name": "系统接口",
426 "type": "1",
427 "sort": 3,
428 "perms": "tool:swagger:list"
429 }
430 ]
431 }
432 ]
433 }
434 ]
1 const datalist = ref<ResultType[]>([]);
2 // 处理过得table数据
3 const permissionTableData = ref<any>([]);
4 const wholeCheckedKeys = ref<any[]>([]);
5 const halfCheckedKeys = ref<any[]>([]);
6
7 const columns: TableColumnType<ResultType>[] = [
8 {
9 title: '权限名称',
10 dataIndex: 'name'
11 },
12 {
13 title: '权限',
14 dataIndex: 'power'
15 },
16 {
17 title: '权限编码',
18 dataIndex: 'perms'
19 }
20 ];
21
22 // 获取数据
23 const datasource: any = async (where?: ReceivableParam) => {
24 const _list = await http.get<any>(`/system/authority/enterpriseScope`);
25 console.log(_list, 'list');
26 datalist.value = _list;
27 //深度克隆
28 const newData = JSON.parse(JSON.stringify(datalist.value));
29 //一开始为null,根节点没有父级
30 permissionTableData.value = addParentKeyWrapper(newData, null);
31 console.log('处理过得数据', permissionTableData.value);
32
33 // 获取数据
34 const data = await http.get<any[]>(
35 '/system/authority/lessorRange/' + props.deptId
36 );
37 console.log('选中的数据1111', data);
38 };
39
40 //查看checkbox onchange事件 e--chekcbox值 id当前唯一标识
41 const viewOnChange = (e, code, type) => {
42 console.log('选中的checkBox', e);
43 console.log('选中的code', code);
44 console.log('选中的type', type);
45 let flag = e.target.checked;
46 changeFlag(permissionTableData.value, flag, code, type);
47 };
48
49 //checkbox循环事件 flag是否选中 code唯一标识 type查看或者编辑
50 const changeFlag = (data, flag, code, type) => {
51 //递归循环
52 data.map((item) => {
53 if (item.id == code) {
54 item[type] = flag;
55 item[type + 'indeterminate'] = false;
56 wholeCheckedKeysAddRemove(flag, item.id);
57
58 console.log('选中的这条的', item);
59 if (item.parent_id) {
60 //子级选中父级也选中
61 let childAndParent_Select = (code, type) => {
62 let parent = getItem(permissionTableData.value, code);
63 console.log('这个父级嘛', parent);
64
65 if (parent.children && parent.children.length > 0) {
66 // 子级中如果有半选的
67 let all = parent.children.every((item1) => {
68 return (
69 item1[type] == true && item1[type + 'indeterminate'] == false
70 );
71 });
72 let some = parent.children.some((item1) => {
73 return item1[type] == true;
74 });
75
76 console.log('all', all);
77 if (all) {
78 parent[type + 'indeterminate'] = false;
79 parent[type] = true;
80 wholeCheckedKeysAddRemove(flag, parent['id']);
81 } else if (some) {
82 parent[type + 'indeterminate'] = true;
83 parent[type] = true;
84 halfCheckedKeysAddRemove(flag, parent['id']);
85 } else {
86 parent[type + 'indeterminate'] = false;
87 parent[type] = false;
88 wholeCheckedKeysAddRemove(flag, parent['id']);
89 halfCheckedKeysAddRemove(flag, parent['id']);
90 }
91 }
92 if (parent.parent_id) {
93 childAndParent_Select(parent.parent_id, type);
94 }
95 };
96 childAndParent_Select(item.parent_id, type);
97 }
98 if (item.children && item.children.length > 0) {
99 //父亲选中，子级全选中，实现全选反选
100 let parentAndChild_Select = (data, flag, type) => {
101 data.map((item1) => {
102 console.log('这个是神马', item1);
103 item1[type] = flag;
104 item1[type + 'indeterminate'] = false;
105 wholeCheckedKeysAddRemove(flag, item1.id);
106 if (item1.children && item1.children.length > 0) {
107 parentAndChild_Select(item1.children, flag, type);
108 }
109 });
110 };
111 parentAndChild_Select(item.children, flag, type);
112 }
113
114 console.log('全选中的', wholeCheckedKeys.value);
115 console.log('半选中的', halfCheckedKeys.value);
116 }
117
118 if (item.children && item.children.length > 0) {
119 changeFlag(item.children, flag, code, type);
120 }
121 });
122 };
123
124 // 给子级添加父级Key
125 const addParentKeyWrapper = (data, parentKey) => {
126 data.forEach((ele) => {
127 const children = ele.children;
128 ele.parent_id = parentKey;
129 ele.has_view = false;
130 //如果唯一标识不是code可以自行改变
131 if (children) {
132 addParentKeyWrapper(children, ele.id);
133 }
134 });
135 return data;
136 };
137
138 //根据code(唯一标识)找到其值
139 const getItem = (data, code) => {
140 let value;
141 data.map((item) => {
142 if (item.id == code) {
143 value = item;
144 }
145 if (item.children && item.children.length > 0) {
146 getItem(item.children, code);
147 }
148 });
149 return value;
150 };
151
152 // 获取半选的id
153 const halfCheckedKeysAddRemove = (flag, id) => {
154 if (flag) {
155 if (!halfCheckedKeys.value.includes(id)) {
156 halfCheckedKeys.value.push(id);
157 }
158 } else {
159 halfCheckedKeys.value = halfCheckedKeys.value.filter(
160 (item) => item !== id
161 );
162 console.log('半选的id', halfCheckedKeys.value);
163 }
164 };
165
166 // 获取全选的id
167 const wholeCheckedKeysAddRemove = (flag, id) => {
168 if (flag) {
169 if (!wholeCheckedKeys.value.includes(id)) {
170 wholeCheckedKeys.value.push(id);
171 }
172 } else {
173 wholeCheckedKeys.value = wholeCheckedKeys.value.filter(
174 (item) => item !== id
175 );
176 console.log('全选的id', wholeCheckedKeys.value);
177 }
178 };
参考这位博主https://blog.csdn.net/weixin_44058725/article/details/114272790， 他的写法是用react 我是用vue
标签：sort,vue,name,perms,复选框,ant,label,type,id From： https://www.cnblogs.com/liangqilin/p/18372200