1.效果图如上 下面是demo1，点击aaaa 所有rule里面的链接 放到一个数组里面
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477<style scoped> </style> <template> <el-form label-width="200px"> <el-button @click="aa">点击我打印结果</el-button> <el-form-item v-for="item in cities" :key="item.rule" style="border-top: 1px solid red;"> <el-checkbox @change="val => handleCheckAllChange(val, item)" :indeterminate="itemIndeterminate(item)" v-model="item.checkAll" >{{item.label}}</el-checkbox> <el-checkbox-group v-model="checkedCities"> <el-checkbox v-for="city in item.items" :key="city.rule" :label="city.rule">{{city.label}}</el-checkbox> </el-checkbox-group> </el-form-item> </el-form> </template> <script> export default { data() { return { cities: [], checkedCities: [] } }, methods: { getList() { // 假设是后台获取的数据 const data = [{ "label": "客户管理", "rule": "/customer/customer/*", "items": [{ "label": "修改工艺标准", "rule": "/customer/customer/update-process-standard" }, { "label": "客户保存", "rule": "/customer/customer/save" }, { "label": "客户查询", "rule": "/customer/customer/index" }, { "label": "更新客户状态", "rule": "/customer/customer/update-state" }, { "label": "更新计价模型", "rule": "/customer/customer/update-offer" }, { "label": "查看客户", "rule": "/customer/customer/detail" }, { "label": "查看工艺标准", "rule": "/customer/customer/process-standard" }, { "label": "查看计价模型", "rule": "/customer/customer/get-offer" } ] }, { "label": "工厂建模", "rule": "/factory/factory/*", "items": [{ "label": "产线列表", "rule": "/factory/factory/line-list" }, { "label": "产线启用/停用", "rule": "/factory/factory/enable-line" }, { "label": "修改工厂信息", "rule": "/factory/factory/update" }, { "label": "关联工位", "rule": "/factory/factory/relate-pos" }, { "label": "创建产线", "rule": "/factory/factory/create-line" }, { "label": "创建工位", "rule": "/factory/factory/create-pos" }, { "label": "创建工厂", "rule": "/factory/factory/create-factory" }, { "label": "工位启用/停用", "rule": "/factory/factory/enable-pos" }, { "label": "工位列表", "rule": "/factory/factory/pos-list" }, { "label": "工厂信息", "rule": "/factory/factory/factory-info" }, { "label": "工厂列表", "rule": "/factory/factory/list" }, { "label": "工厂启用/停用", "rule": "/factory/factory/enable" }, { "label": "工厂树状图", "rule": "/factory/factory/tree" }, { "label": "所属工位列表", "rule": "/factory/factory/belong-station" }, { "label": "查看产线", "rule": "/factory/factory/line-info" }, { "label": "查看工位", "rule": "/factory/factory/pos-info" }, { "label": "查看设备", "rule": "/factory/factory/device-info" }, { "label": "添加设备", "rule": "/factory/factory/create-device" }, { "label": "设备列表", "rule": "/factory/factory/device-list" } ] }, { "label": "销售订单", "rule": "/order/order/*", "items": [{ "label": "下单", "rule": "/order/order/create" }, { "label": "付款记录", "rule": "/order/order/pay-record" }, { "label": "取消订单", "rule": "/order/order/cancel" }, { "label": "添加来料单号", "rule": "/order/order/add-express" }, { "label": "获取物流公司", "rule": "/order/order/express" }, { "label": "订单备注", "rule": "/order/order/remark" }, { "label": "订单收款", "rule": "/order/order/cash" }, { "label": "订单月结", "rule": "/order/order/monthly" }, { "label": "设置订单料齐", "rule": "/order/order/all-materials" }, { "label": "销售单检索", "rule": "/order/order/list" } ] }, { "label": "生产建模", "rule": "/process/process/*", "items": [{ "label": "保存工序", "rule": "/process/process/save" }, { "label": "保存工艺路线", "rule": "/process/process-route/save" }, { "label": "修改工序状态", "rule": "/process/process/update-state" }, { "label": "修改工艺路线状态", "rule": "/process/process-route/update-state" }, { "label": "工序检索", "rule": "/process/process/index" }, { "label": "工序详情", "rule": "/process/process/detail" }, { "label": "工艺路线检索", "rule": "/process/process-route/index" }, { "label": "工艺路线详情", "rule": "/process/process-route/detail" }, { "label": "获取有效的工序", "rule": "/process/process/get-active-process" }, { "label": "获取有效的工序(带工位)", "rule": "/process/process/get-active-process-with-station" } ] }, { "label": "系统设置", "rule": "/rbac/user-role/*", "items": [{ "label": "创建用户", "rule": "/rbac/user-role/create-user" }, { "label": "创建用户组", "rule": "/rbac/user-role/create-group" }, { "label": " 查看权限组列表", "rule": "/rbac/user-role/read-group" }, { "label": "用户停用/启用", "rule": "/rbac/user-role/enable-user" }, { "label": "用户列表", "rule": "/rbac/user-role/list" }, { "label": " 重置密码", "rule": "/rbac/user-role/reset" }, { "label": "权限列表", "rule": "/rbac/user-role/auth-list" } ] }, { "label": "排产建模", "rule": "/scheduling/*", "items": [{ "label": "保存APS排产规范", "rule": "/scheduling/aps/save" }, { "label": "保存排期设置", "rule": "/scheduling/schedule-setting/save" }, { "label": "保存生产日历", "rule": "/scheduling/working-calendar-group/save" }, { "label": "修改生产日历状态", "rule": "/scheduling/working-calendar-group/update-state" }, { "label": "查看APS排产规范", "rule": "/scheduling/aps/detail" }, { "label": "查看排期设置", "rule": "/scheduling/schedule-setting/detail" }, { "label": "生产日历", "rule": "/scheduling/working-calendar-group/index" }, { "label": "生产日历详情", "rule": "/scheduling/working-calendar-group/detail" } ] }, { "label": "款式定义", "rule": "/style/detailed/*", "items": [{ "label": "加工项款式材料", "rule": "/style/detailed/style-material-form" }, { "label": "加工项款式类型", "rule": "/style/detailed/base-form" }, { "label": "加工项款式默认表单", "rule": "/style/style/processing" }, { "label": "工厂我的款式表单", "rule": "/style/factory/my-style" }, { "label": "工厂款式设置", "rule": "/style/factory/set-style-base" }, { "label": "工厂添加款式", "rule": "/style/factory/edit-style" }, { "label": "工厂添加编辑款式保存", "rule": "/style/factory/save-style" }, { "label": "工厂订单产品匹配工艺路线", "rule": "/style/factory/get-process-line" }, { "label": "查询窗帘款式", "rule": "/style/style/index" } ] }, { "label": "工单管理", "rule": "/task/task/*", "items": [{ "label": "加工开始时间", "rule": "/task/task/start" }, { "label": "加工结束时间", "rule": "/task/task/end" }, { "label": "工单列表", "rule": "/task/task/order-list" }, { "label": "工单状态修改", "rule": "/task/task/update-state" }, { "label": "工单详情", "rule": "/task/task/order-info" }, { "label": "工艺路线", "rule": "/task/task/process-list" }, { "label": "待排产列表", "rule": "/task/task/wait-sort" }, { "label": "手动排序", "rule": "/task/task/manual-sort" }, { "label": "手动料齐", "rule": "/task/task/complete" }, { "label": "生产任务", "rule": "/task/task/production" }, { "label": "生成加工单", "rule": "/task/task/create-order" }, { "label": "自动排序", "rule": "/task/task/auto-sort" }, { "label": "获取某工序的空闲时间", "rule": "/task/task/get-process-free-time" } ] }, { "label": "用户登录", "rule": "/ucenter/*", "items": [{ "label": "发送短信", "rule": "/ucenter/sms" }, { "label": "扫码登录获取登录状态", "rule": "/ucenter/auth/auth-state" }, { "label": "扫码登录获取链接", "rule": "/ucenter/auth/get-wx-auth" }, { "label": "扫码绑定用户", "rule": "/ucenter/auth/wx-bind" }, { "label": "获取活跃用户", "rule": "/ucenter/user/active-list" }, { "label": "获取行政区域", "rule": "/ucenter/regions" }, { "label": "账号密码登录", "rule": "/ucenter/user/login" }, { "label": "选择工厂", "rule": "/ucenter/user/select-factory" }, { "label": "验证码登录", "rule": "/ucenter/user/login-by-code" }, { "label": "添加用户", "rule": "/traveller/traveller/form" } ] } ] this.cities = data.map(v => ({ ...v, checkAll: false, allRule: v.items.map(i => i.rule) })) }, //判断是否是不确定 条件1：当前item.items里至少有一个选上 条件2：当前item.items里至少有一个没有被选上 itemIndeterminate(item){ return item.allRule.some(v => this.checkedCities.indexOf(v) > -1) && !item.allRule.every(v => this.checkedCities.indexOf(v) > -1) }, handleCheckAllChange(val, item){ const filterArr = this.checkedCities.filter(v => item.allRule.indexOf(v) === -1); this.checkedCities = val ? filterArr.concat(item.allRule) : filterArr }, aa(){ console.log(this.checkedCities) } }, created() { this.getList() } } </script>
2.点击aaaa 所有单独数组链接 {"label": "客户查询","rule": "/customer/customer/index" },放到一个数组里面
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476<style scoped> </style> <template> <el-form label-width="200px"> <el-button @click="aa">点击我打印结果</el-button> <el-form-item v-for="item in cities" :key="item.rule" style="border-top: 1px solid red;"> <el-checkbox @change="val => handleCheckAllChange(val, item)" :indeterminate="itemIndeterminate(item)" v-model="item.checkAll" >{{item.label}}</el-checkbox> <el-checkbox-group v-model="checkedCities"> <el-checkbox v-for="city in item.items" :key="city.rule" :label="city">{{city.label}}</el-checkbox> </el-checkbox-group> </el-form-item> </el-form> </template> <script> export default { data() { return { cities: [], checkedCities: [] } }, methods: { getList() { // 假设是后台获取的数据 const data = [{ "label": "客户管理", "rule": "/customer/customer/*", "items": [{ "label": "修改工艺标准", "rule": "/customer/customer/update-process-standard" }, { "label": "客户保存", "rule": "/customer/customer/save" }, { "label": "客户查询", "rule": "/customer/customer/index" }, { "label": "更新客户状态", "rule": "/customer/customer/update-state" }, { "label": "更新计价模型", "rule": "/customer/customer/update-offer" }, { "label": "查看客户", "rule": "/customer/customer/detail" }, { "label": "查看工艺标准", "rule": "/customer/customer/process-standard" }, { "label": "查看计价模型", "rule": "/customer/customer/get-offer" } ] }, { "label": "工厂建模", "rule": "/factory/factory/*", "items": [{ "label": "产线列表", "rule": "/factory/factory/line-list" }, { "label": "产线启用/停用", "rule": "/factory/factory/enable-line" }, { "label": "修改工厂信息", "rule": "/factory/factory/update" }, { "label": "关联工位", "rule": "/factory/factory/relate-pos" }, { "label": "创建产线", "rule": "/factory/factory/create-line" }, { "label": "创建工位", "rule": "/factory/factory/create-pos" }, { "label": "创建工厂", "rule": "/factory/factory/create-factory" }, { "label": "工位启用/停用", "rule": "/factory/factory/enable-pos" }, { "label": "工位列表", "rule": "/factory/factory/pos-list" }, { "label": "工厂信息", "rule": "/factory/factory/factory-info" }, { "label": "工厂列表", "rule": "/factory/factory/list" }, { "label": "工厂启用/停用", "rule": "/factory/factory/enable" }, { "label": "工厂树状图", "rule": "/factory/factory/tree" }, { "label": "所属工位列表", "rule": "/factory/factory/belong-station" }, { "label": "查看产线", "rule": "/factory/factory/line-info" }, { "label": "查看工位", "rule": "/factory/factory/pos-info" }, { "label": "查看设备", "rule": "/factory/factory/device-info" }, { "label": "添加设备", "rule": "/factory/factory/create-device" }, { "label": "设备列表", "rule": "/factory/factory/device-list" } ] }, { "label": "销售订单", "rule": "/order/order/*", "items": [{ "label": "下单", "rule": "/order/order/create" }, { "label": "付款记录", "rule": "/order/order/pay-record" }, { "label": "取消订单", "rule": "/order/order/cancel" }, { "label": "添加来料单号", "rule": "/order/order/add-express" }, { "label": "获取物流公司", "rule": "/order/order/express" }, { "label": "订单备注", "rule": "/order/order/remark" }, { "label": "订单收款", "rule": "/order/order/cash" }, { "label": "订单月结", "rule": "/order/order/monthly" }, { "label": "设置订单料齐", "rule": "/order/order/all-materials" }, { "label": "销售单检索", "rule": "/order/order/list" } ] }, { "label": "生产建模", "rule": "/process/process/*", "items": [{ "label": "保存工序", "rule": "/process/process/save" }, { "label": "保存工艺路线", "rule": "/process/process-route/save" }, { "label": "修改工序状态", "rule": "/process/process/update-state" }, { "label": "修改工艺路线状态", "rule": "/process/process-route/update-state" }, { "label": "工序检索", "rule": "/process/process/index" }, { "label": "工序详情", "rule": "/process/process/detail" }, { "label": "工艺路线检索", "rule": "/process/process-route/index" }, { "label": "工艺路线详情", "rule": "/process/process-route/detail" }, { "label": "获取有效的工序", "rule": "/process/process/get-active-process" }, { "label": "获取有效的工序(带工位)", "rule": "/process/process/get-active-process-with-station" } ] }, { "label": "系统设置", "rule": "/rbac/user-role/*", "items": [{ "label": "创建用户", "rule": "/rbac/user-role/create-user" }, { "label": "创建用户组", "rule": "/rbac/user-role/create-group" }, { "label": " 查看权限组列表", "rule": "/rbac/user-role/read-group" }, { "label": "用户停用/启用", "rule": "/rbac/user-role/enable-user" }, { "label": "用户列表", "rule": "/rbac/user-role/list" }, { "label": " 重置密码", "rule": "/rbac/user-role/reset" }, { "label": "权限列表", "rule": "/rbac/user-role/auth-list" } ] }, { "label": "排产建模", "rule": "/scheduling/*", "items": [{ "label": "保存APS排产规范", "rule": "/scheduling/aps/save" }, { "label": "保存排期设置", "rule": "/scheduling/schedule-setting/save" }, { "label": "保存生产日历", "rule": "/scheduling/working-calendar-group/save" }, { "label": "修改生产日历状态", "rule": "/scheduling/working-calendar-group/update-state" }, { "label": "查看APS排产规范", "rule": "/scheduling/aps/detail" }, { "label": "查看排期设置", "rule": "/scheduling/schedule-setting/detail" }, { "label": "生产日历", "rule": "/scheduling/working-calendar-group/index" }, { "label": "生产日历详情", "rule": "/scheduling/working-calendar-group/detail" } ] }, { "label": "款式定义", "rule": "/style/detailed/*", "items": [{ "label": "加工项款式材料", "rule": "/style/detailed/style-material-form" }, { "label": "加工项款式类型", "rule": "/style/detailed/base-form" }, { "label": "加工项款式默认表单", "rule": "/style/style/processing" }, { "label": "工厂我的款式表单", "rule": "/style/factory/my-style" }, { "label": "工厂款式设置", "rule": "/style/factory/set-style-base" }, { "label": "工厂添加款式", "rule": "/style/factory/edit-style" }, { "label": "工厂添加编辑款式保存", "rule": "/style/factory/save-style" }, { "label": "工厂订单产品匹配工艺路线", "rule": "/style/factory/get-process-line" }, { "label": "查询窗帘款式", "rule": "/style/style/index" } ] }, { "label": "工单管理", "rule": "/task/task/*", "items": [{ "label": "加工开始时间", "rule": "/task/task/start" }, { "label": "加工结束时间", "rule": "/task/task/end" }, { "label": "工单列表", "rule": "/task/task/order-list" }, { "label": "工单状态修改", "rule": "/task/task/update-state" }, { "label": "工单详情", "rule": "/task/task/order-info" }, { "label": "工艺路线", "rule": "/task/task/process-list" }, { "label": "待排产列表", "rule": "/task/task/wait-sort" }, { "label": "手动排序", "rule": "/task/task/manual-sort" }, { "label": "手动料齐", "rule": "/task/task/complete" }, { "label": "生产任务", "rule": "/task/task/production" }, { "label": "生成加工单", "rule": "/task/task/create-order" }, { "label": "自动排序", "rule": "/task/task/auto-sort" }, { "label": "获取某工序的空闲时间", "rule": "/task/task/get-process-free-time" } ] }, { "label": "用户登录", "rule": "/ucenter/*", "items": [{ "label": "发送短信", "rule": "/ucenter/sms" }, { "label": "扫码登录获取登录状态", "rule": "/ucenter/auth/auth-state" }, { "label": "扫码登录获取链接", "rule": "/ucenter/auth/get-wx-auth" }, { "label": "扫码绑定用户", "rule": "/ucenter/auth/wx-bind" }, { "label": "获取活跃用户", "rule": "/ucenter/user/active-list" }, { "label": "获取行政区域", "rule": "/ucenter/regions" }, { "label": "账号密码登录", "rule": "/ucenter/user/login" }, { "label": "选择工厂", "rule": "/ucenter/user/select-factory" }, { "label": "验证码登录", "rule": "/ucenter/user/login-by-code" }, { "label": "添加用户", "rule": "/traveller/traveller/form" } ] } ] this.cities = data.map(v => ({ ...v, checkAll: false, })) }, //判断是否是不确定 条件1：当前item.items里至少有一个选上 条件2：当前item.items里至少有一个没有被选上 itemIndeterminate(item){ return item.items.some(v => this.checkedCities.indexOf(v) > -1) && !item.items.every(v => this.checkedCities.indexOf(v) > -1) }, handleCheckAllChange(val, item){ const filterArr = this.checkedCities.filter(v => item.items.indexOf(v) === -1); this.checkedCities = val ? filterArr.concat(item.items) : filterArr }, aa(){ console.log(this.checkedCities) } }, created() { this.getList() } } </script>
3，数据格式变成跟data的数据格式一样的数据，数组套数组
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481<style scoped> </style> <template> <el-form label-width="200px"> <el-button @click="aa">点击我打印结果</el-button> <el-form-item v-for="item in cities" :key="item.rule" style="border-top: 1px solid red;"> <el-checkbox @change="val => handleCheckAllChange(val, item)" :indeterminate="itemIndeterminate(item)" v-model="item.checkAll" >{{item.label}}</el-checkbox> <el-checkbox-group v-model="checkedCities"> <el-checkbox v-for="city in item.items" :key="city.rule" :label="city">{{city.label}}</el-checkbox> </el-checkbox-group> </el-form-item> </el-form> </template> <script> export default { data() { return { cities: [], checkedCities: [] } }, methods: { getList() { // 假设是后台获取的数据 const data = [{ "label": "客户管理", "rule": "/customer/customer/*", "items": [{ "label": "修改工艺标准", "rule": "/customer/customer/update-process-standard" }, { "label": "客户保存", "rule": "/customer/customer/save" }, { "label": "客户查询", "rule": "/customer/customer/index" }, { "label": "更新客户状态", "rule": "/customer/customer/update-state" }, { "label": "更新计价模型", "rule": "/customer/customer/update-offer" }, { "label": "查看客户", "rule": "/customer/customer/detail" }, { "label": "查看工艺标准", "rule": "/customer/customer/process-standard" }, { "label": "查看计价模型", "rule": "/customer/customer/get-offer" } ] }, { "label": "工厂建模", "rule": "/factory/factory/*", "items": [{ "label": "产线列表", "rule": "/factory/factory/line-list" }, { "label": "产线启用/停用", "rule": "/factory/factory/enable-line" }, { "label": "修改工厂信息", "rule": "/factory/factory/update" }, { "label": "关联工位", "rule": "/factory/factory/relate-pos" }, { "label": "创建产线", "rule": "/factory/factory/create-line" }, { "label": "创建工位", "rule": "/factory/factory/create-pos" }, { "label": "创建工厂", "rule": "/factory/factory/create-factory" }, { "label": "工位启用/停用", "rule": "/factory/factory/enable-pos" }, { "label": "工位列表", "rule": "/factory/factory/pos-list" }, { "label": "工厂信息", "rule": "/factory/factory/factory-info" }, { "label": "工厂列表", "rule": "/factory/factory/list" }, { "label": "工厂启用/停用", "rule": "/factory/factory/enable" }, { "label": "工厂树状图", "rule": "/factory/factory/tree" }, { "label": "所属工位列表", "rule": "/factory/factory/belong-station" }, { "label": "查看产线", "rule": "/factory/factory/line-info" }, { "label": "查看工位", "rule": "/factory/factory/pos-info" }, { "label": "查看设备", "rule": "/factory/factory/device-info" }, { "label": "添加设备", "rule": "/factory/factory/create-device" }, { "label": "设备列表", "rule": "/factory/factory/device-list" } ] }, { "label": "销售订单", "rule": "/order/order/*", "items": [{ "label": "下单", "rule": "/order/order/create" }, { "label": "付款记录", "rule": "/order/order/pay-record" }, { "label": "取消订单", "rule": "/order/order/cancel" }, { "label": "添加来料单号", "rule": "/order/order/add-express" }, { "label": "获取物流公司", "rule": "/order/order/express" }, { "label": "订单备注", "rule": "/order/order/remark" }, { "label": "订单收款", "rule": "/order/order/cash" }, { "label": "订单月结", "rule": "/order/order/monthly" }, { "label": "设置订单料齐", "rule": "/order/order/all-materials" }, { "label": "销售单检索", "rule": "/order/order/list" } ] }, { "label": "生产建模", "rule": "/process/process/*", "items": [{ "label": "保存工序", "rule": "/process/process/save" }, { "label": "保存工艺路线", "rule": "/process/process-route/save" }, { "label": "修改工序状态", "rule": "/process/process/update-state" }, { "label": "修改工艺路线状态", "rule": "/process/process-route/update-state" }, { "label": "工序检索", "rule": "/process/process/index" }, { "label": "工序详情", "rule": "/process/process/detail" }, { "label": "工艺路线检索", "rule": "/process/process-route/index" }, { "label": "工艺路线详情", "rule": "/process/process-route/detail" }, { "label": "获取有效的工序", "rule": "/process/process/get-active-process" }, { "label": "获取有效的工序(带工位)", "rule": "/process/process/get-active-process-with-station" } ] }, { "label": "系统设置", "rule": "/rbac/user-role/*", "items": [{ "label": "创建用户", "rule": "/rbac/user-role/create-user" }, { "label": "创建用户组", "rule": "/rbac/user-role/create-group" }, { "label": " 查看权限组列表", "rule": "/rbac/user-role/read-group" }, { "label": "用户停用/启用", "rule": "/rbac/user-role/enable-user" }, { "label": "用户列表", "rule": "/rbac/user-role/list" }, { "label": " 重置密码", "rule": "/rbac/user-role/reset" }, { "label": "权限列表", "rule": "/rbac/user-role/auth-list" } ] }, { "label": "排产建模", "rule": "/scheduling/*", "items": [{ "label": "保存APS排产规范", "rule": "/scheduling/aps/save" }, { "label": "保存排期设置", "rule": "/scheduling/schedule-setting/save" }, { "label": "保存生产日历", "rule": "/scheduling/working-calendar-group/save" }, { "label": "修改生产日历状态", "rule": "/scheduling/working-calendar-group/update-state" }, { "label": "查看APS排产规范", "rule": "/scheduling/aps/detail" }, { "label": "查看排期设置", "rule": "/scheduling/schedule-setting/detail" }, { "label": "生产日历", "rule": "/scheduling/working-calendar-group/index" }, { "label": "生产日历详情", "rule": "/scheduling/working-calendar-group/detail" } ] }, { "label": "款式定义", "rule": "/style/detailed/*", "items": [{ "label": "加工项款式材料", "rule": "/style/detailed/style-material-form" }, { "label": "加工项款式类型", "rule": "/style/detailed/base-form" }, { "label": "加工项款式默认表单", "rule": "/style/style/processing" }, { "label": "工厂我的款式表单", "rule": "/style/factory/my-style" }, { "label": "工厂款式设置", "rule": "/style/factory/set-style-base" }, { "label": "工厂添加款式", "rule": "/style/factory/edit-style" }, { "label": "工厂添加编辑款式保存", "rule": "/style/factory/save-style" }, { "label": "工厂订单产品匹配工艺路线", "rule": "/style/factory/get-process-line" }, { "label": "查询窗帘款式", "rule": "/style/style/index" } ] }, { "label": "工单管理", "rule": "/task/task/*", "items": [{ "label": "加工开始时间", "rule": "/task/task/start" }, { "label": "加工结束时间", "rule": "/task/task/end" }, { "label": "工单列表", "rule": "/task/task/order-list" }, { "label": "工单状态修改", "rule": "/task/task/update-state" }, { "label": "工单详情", "rule": "/task/task/order-info" }, { "label": "工艺路线", "rule": "/task/task/process-list" }, { "label": "待排产列表", "rule": "/task/task/wait-sort" }, { "label": "手动排序", "rule": "/task/task/manual-sort" }, { "label": "手动料齐", "rule": "/task/task/complete" }, { "label": "生产任务", "rule": "/task/task/production" }, { "label": "生成加工单", "rule": "/task/task/create-order" }, { "label": "自动排序", "rule": "/task/task/auto-sort" }, { "label": "获取某工序的空闲时间", "rule": "/task/task/get-process-free-time" } ] }, { "label": "用户登录", "rule": "/ucenter/*", "items": [{ "label": "发送短信", "rule": "/ucenter/sms" }, { "label": "扫码登录获取登录状态", "rule": "/ucenter/auth/auth-state" }, { "label": "扫码登录获取链接", "rule": "/ucenter/auth/get-wx-auth" }, { "label": "扫码绑定用户", "rule": "/ucenter/auth/wx-bind" }, { "label": "获取活跃用户", "rule": "/ucenter/user/active-list" }, { "label": "获取行政区域", "rule": "/ucenter/regions" }, { "label": "账号密码登录", "rule": "/ucenter/user/login" }, { "label": "选择工厂", "rule": "/ucenter/user/select-factory" }, { "label": "验证码登录", "rule": "/ucenter/user/login-by-code" }, { "label": "添加用户", "rule": "/traveller/traveller/form" } ] } ] this.cities = data.map(v => ({ ...v, checkAll: false, })) }, //判断是否是不确定 条件1：当前item.items里至少有一个选上 条件2：当前item.items里至少有一个没有被选上 itemIndeterminate(item){ return item.items.some(v => this.checkedCities.indexOf(v) > -1) && !item.items.every(v => this.checkedCities.indexOf(v) > -1) }, handleCheckAllChange(val, item){ const filterArr = this.checkedCities.filter(v => item.items.indexOf(v) === -1); this.checkedCities = val ? filterArr.concat(item.items) : filterArr }, aa(){ let result = this.cities.map(v => ({ label: v.label, rule: v.rule, items: v.items.filter(v => this.checkedCities.indexOf(v) > -1) })).filter(v => v.items.length) console.log(result) } }, created() { this.getList() } } </script>
4 操作回显 数据格式为所有选中放在一个数组中
复制代码
1
2
3
4let all = []; this.cities.forEach(v => all.push(...v.items)); const values = row.limit; this.checkedCities = all.filter(v => values.find(item => item.rule == v.rule))
最后
以上就是糊涂大地最近收集整理的关于element 实现多个循环出来的复选框，以及回显的全部内容，更多相关element内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复