element表格(树形结构按钮)

element表格树形结构加勾选按钮，点击某行数据的勾选框，如果他有children那么子数据的勾选状态会变成当前勾选的状态，如果当行有父数据那么他全部的父数据都要计算下子数据是否都勾选了

index.vue

 1 <template>
 2   <el-table
 3     border
 4     :data="ColumnData2"
 5     row-key="id"
 6     ref="multipleTable"
 7     @select="checkboxSelect"
 8     @selection-change="handleSelectionChange"
 9     @select-all="selectAll"
10     :tree-props="{ children: 'children', hasChildren: 'haschildren' }"
11   >
12     <el-table-column type="selection" width="75px" fixed="left" align="center" />
13     <el-table-column prop="dpname" label="名称" width="300" :show-overflow-tooltip="true" />
14     <el-table-column prop="subjectName" label="描述" :show-overflow-tooltip="true" />
15     <el-table-column prop="specName" label="所属团队" width="200" :show-overflow-tooltip="true" />
16   </el-table>
17 </template>
18 <script>
19 import { treeData } from './data'
20 import { processingData, getTableAllData } from './utils'
21 export default {
22   data() {
23     return {
24       ColumnData2: [],
25       checkedKeys: false,
26       selectedItem: [] // 得到勾选的数据
27     }
28   },
29   created() {
30     const treeDataCopy = treeData
31     processingData(treeDataCopy)
32     this.ColumnData2 = treeDataCopy
33   },
34   methods: {
35     selectAll() { // 全选/非全选
36       this.checkedKeys = !this.checkedKeys
37       this.splite(this.ColumnData2, this.checkedKeys)
38     },
39     // change children or all
40     splite(data, flag) {
41       data.forEach((row) => {
42         this.$set(row, 'isSelected', flag)
43         this.$refs.multipleTable.toggleRowSelection(row, flag)
44         row.children && this.splite(row.children, flag)
45       })
46     },
47     handleSelectionChange() {
48       this.selectedItem = this.getCheckList()
49     },
50     checkboxSelect(val, row, a) {
51       const thisSelect = !row.isSelected
52       this.$set(row, 'isSelected', thisSelect)
53       this.$refs.multipleTable.toggleRowSelection(row, thisSelect)
54       row.children && this.splite(row.children, thisSelect) // 点击父节点，则子勾选
55       // 如row.idCopy有'-'说明有父数据，则父数据可能不止一个，所以要转为数组，从后到前循环判断子数据是否都已经全部勾选
56       if (row.idCopy.includes('-')) {
57         const idArr = row.idCopy.split('-')
58         const allTableData = this.getAllOfTable()
59         for (let i = idArr.length - 2; i >= 0; i--) {
60           const item = allTableData.find(item => item.id == idArr[i])
61           item && this.$refs.multipleTable.toggleRowSelection(item, item.children.every(i => i.isSelected))
62           item && this.$set(item, 'isSelected', item.children.every(i => i.isSelected))
63         }
64       }
65     },
66     getCheckList() {
67       return getTableAllData(this.ColumnData2).filter(item => item.isSelected)
68     },
69     getAllOfTable() {
70       return getTableAllData(this.ColumnData2)
71     }
72   },
73   watch: {
74     'selectedItem': {
75       handler(val) {
76         console.log('this.selectedItem', this.selectedItem, 'getCheckList', this.getCheckList(), '对比是否一样', val.length === this.getCheckList().length)
77       }
78     }
79   }
80 }
81 </script>

data.js（测试数据）

  1 export const treeData = [
  2   {
  3     'id': 26,
  4     'dpid': '30B94CFE089FE56A482569D40037891C',
  5     'dpname': '零售业务管理总部',
  6     'subjectName': null,
  7     'subjectId': null,
  8     'specName': null,
  9     'conf': null,
 10     'budgetUsername': null,
 11     'desc': null,
 12     'count': 12,
 13     'applyAmount': 1440000,
 14     'applyUAmount': 1440000,
 15     'approvalAmount': 0,
 16     'approvalUAmount': 0,
 17     'changeAmount': null,
 18     'status': '0',
 19     'remark': null,
 20     'edit': false,
 21     'activityId': '04',
 22     'children': [{
 23       'id': 261,
 24       'dpid': '515AF64E1B7C810648257B9D000E4C5C',
 25       'dpname': '电子商务部',
 26       'subjectName': null,
 27       'subjectId': null,
 28       'specName': null,
 29       'conf': null,
 30       'budgetUsername': null,
 31       'desc': null,
 32       'count': 4,
 33       'applyAmount': 720000,
 34       'applyUAmount': 720000,
 35       'approvalAmount': 0,
 36       'approvalUAmount': 0,
 37       'changeAmount': null,
 38       'status': '0',
 39       'remark': null,
 40       'edit': true,
 41       'activityId': '04',
 42       'children': [{
 43         'id': 2611,
 44         'dpid': '79B5243D3A1D981848257E0E003244F4',
 45         'dpname': '广州林和西路营业部',
 46         'subjectName': null,
 47         'subjectId': null,
 48         'specName': null,
 49         'conf': null,
 50         'budgetUsername': null,
 51         'desc': null,
 52         'count': 2,
 53         'applyAmount': 360000,
 54         'applyUAmount': 360000,
 55         'approvalAmount': 0,
 56         'approvalUAmount': 0,
 57         'changeAmount': null,
 58         'status': null,
 59         'remark': null,
 60         'edit': false,
 61         'activityId': null,
 62         'children': [{
 63           'id': 26111,
 64           'dpid': '79B5243D3A1D981848257E0E003244F4',
 65           'dpname': '广州林和西路营业部',
 66           'subjectName': '固定资产采购-电脑设备-服务器',
 67           'subjectId': null,
 68           'specName': '海光服务器-规格6',
 69           'conf': 'CPU：2* 海光7280； 内存：64GB  3200MHz 硬盘：2 * 960G SSD， RAID卡：支持RIAD  0/1/10/5/6，支持直通，2G Cache，含掉电保护； 网口：2*10GE光口(含光模块），2*1G电口； 冗余电源；5年7x24*4',
 70           'budgetUsername': null,
 71           'desc': null,
 72           'count': 2,
 73           'applyAmount': 360000,
 74           'applyUAmount': 360000,
 75           'approvalAmount': 360000,
 76           'approvalUAmount': 360000,
 77           'changeAmount': null,
 78           'status': '0',
 79           'remark': null,
 80           'edit': false,
 81           'activityId': null,
 82           'children': null,
 83           'childrenDetails': null,
 84           'groupDpid': '515AF64E1B7C810648257B9D000E4C5C',
 85           'flowType': '2',
 86           'splitSubjectFlag': false
 87         }],
 88         'childrenDetails': null,
 89         'groupDpid': null,
 90         'flowType': null,
 91         'splitSubjectFlag': false
 92       },
 93       {
 94         'id': 2612,
 95         'dpid': '7DBDCC0A6D8F1F134825824A00160727',
 96         'dpname': '广州花城大道美林基业大厦营业部',
 97         'subjectName': null,
 98         'subjectId': null,
 99         'specName': null,
100         'conf': null,
101         'budgetUsername': null,
102         'desc': null,
103         'count': 2,
104         'applyAmount': 360000,
105         'applyUAmount': 360000,
106         'approvalAmount': 0,
107         'approvalUAmount': 0,
108         'changeAmount': null,
109         'status': null,
110         'remark': null,
111         'edit': false,
112         'activityId': null,
113         'children': [{
114           'id': 26121,
115           'dpid': '7DBDCC0A6D8F1F134825824A00160727',
116           'dpname': '广州花城大道美林基业大厦营业部',
117           'subjectName': '固定资产采购-电脑设备-服务器',
118           'subjectId': null,
119           'specName': 'ARM服务器-规格15',
120           'conf': 'CPU：2*鲲鹏920 5250，48Core\n内存：256GB\n硬盘：2*480GB SSD，2*1.92TB SSD，12*8TB SAS\nRAID卡：支持RIAD 0/1/10/5/6，2G Cache，含掉电保护\n网口：4*10GE光口(含光模块），4*1G电口；\n冗余电源；5年7x24*4',
121           'budgetUsername': null,
122           'desc': null,
123           'count': 2,
124           'applyAmount': 360000,
125           'applyUAmount': 360000,
126           'approvalAmount': 360000,
127           'approvalUAmount': 360000,
128           'changeAmount': null,
129           'status': '0',
130           'remark': null,
131           'edit': false,
132           'activityId': null,
133           'children': null,
134           'childrenDetails': null,
135           'groupDpid': '515AF64E1B7C810648257B9D000E4C5C',
136           'flowType': '2',
137           'splitSubjectFlag': false
138         }],
139         'childrenDetails': null,
140         'groupDpid': null,
141         'flowType': null,
142         'splitSubjectFlag': false
143       }
144       ],
145       'childrenDetails': null,
146       'groupDpid': '30B94CFE089FE56A482569D40037891C',
147       'flowType': null,
148       'splitSubjectFlag': true
149     },
150     {
151       'id': 262,
152       'dpid': 'C3B6C8EDA11A87B648257F4C0024949B',
153       'dpname': '机构与同业部',
154       'subjectName': null,
155       'subjectId': null,
156       'specName': null,
157       'conf': null,
158       'budgetUsername': null,
159       'desc': null,
160       'count': 8,
161       'applyAmount': 720000,
162       'applyUAmount': 720000,
163       'approvalAmount': 0,
164       'approvalUAmount': 0,
165       'changeAmount': null,
166       'status': '0',
167       'remark': null,
168       'edit': true,
169       'activityId': '04',
170       'children': [{
171         'id': 2621,
172         'dpid': 'C3B6C8EDA11A87B648257F4C0024949B',
173         'dpname': '机构与同业部',
174         'subjectName': '固定资产采购-电脑设备-服务器',
175         'subjectId': null,
176         'specName': '海光服务器-规格6',
177         'conf': 'CPU：2* 海光7280； 内存：64GB  3200MHz 硬盘：2 * 960G SSD， RAID卡：支持RIAD  0/1/10/5/6，支持直通，2G Cache，含掉电保护； 网口：2*10GE光口(含光模块），2*1G电口； 冗余电源；5年7x24*4',
178         'budgetUsername': null,
179         'desc': null,
180         'count': 2,
181         'applyAmount': 180000,
182         'applyUAmount': 180000,
183         'approvalAmount': 180000,
184         'approvalUAmount': 180000,
185         'changeAmount': '',
186         'status': '0',
187         'remark': null,
188         'edit': false,
189         'activityId': null,
190         'children': null,
191         'childrenDetails': null,
192         'groupDpid': 'C3B6C8EDA11A87B648257F4C0024949B',
193         'flowType': '3',
194         'splitSubjectFlag': false
195       },
196       {
197         'id': 2622,
198         'dpid': 'C3B6C8EDA11A87B648257F4C0024949B',
199         'dpname': '机构与同业部',
200         'subjectName': '固定资产采购-电脑设备-服务器',
201         'subjectId': null,
202         'specName': 'ARM服务器-规格15',
203         'conf': 'CPU：2*鲲鹏920 5250，48Core\n内存：256GB\n硬盘：2*480GB SSD，2*1.92TB SSD，12*8TB SAS\nRAID卡：支持RIAD 0/1/10/5/6，2G Cache，含掉电保护\n网口：4*10GE光口(含光模块），4*1G电口；\n冗余电源；5年7x24*4',
204         'budgetUsername': null,
205         'desc': null,
206         'count': 2,
207         'applyAmount': 180000,
208         'applyUAmount': 180000,
209         'approvalAmount': 180000,
210         'approvalUAmount': 180000,
211         'changeAmount': '',
212         'status': '0',
213         'remark': null,
214         'edit': false,
215         'activityId': null,
216         'children': null,
217         'childrenDetails': null,
218         'groupDpid': 'C3B6C8EDA11A87B648257F4C0024949B',
219         'flowType': '3',
220         'splitSubjectFlag': false
221       },
222       {
223         'id': 2623,
224         'dpid': 'C3B6C8EDA11A87B648257F4C0024949B',
225         'dpname': '机构与同业部',
226         'subjectName': '固定资产采购-电脑设备-服务器',
227         'subjectId': null,
228         'specName': '海光服务器-规格6',
229         'conf': 'CPU：2* 海光7280； 内存：64GB  3200MHz 硬盘：2 * 960G SSD， RAID卡：支持RIAD  0/1/10/5/6，支持直通，2G Cache，含掉电保护； 网口：2*10GE光口(含光模块），2*1G电口； 冗余电源；5年7x24*4',
230         'budgetUsername': null,
231         'desc': null,
232         'count': 4,
233         'applyAmount': 360000,
234         'applyUAmount': 360000,
235         'approvalAmount': 360000,
236         'approvalUAmount': 360000,
237         'changeAmount': '',
238         'status': '0',
239         'remark': null,
240         'edit': false,
241         'activityId': null,
242         'children': null,
243         'childrenDetails': null,
244         'groupDpid': 'C3B6C8EDA11A87B648257F4C0024949B',
245         'flowType': '3',
246         'splitSubjectFlag': false
247       }
248       ],
249       'childrenDetails': null,
250       'groupDpid': '30B94CFE089FE56A482569D40037891C',
251       'flowType': null,
252       'splitSubjectFlag': true
253     }
254     ],
255     'childrenDetails': [],
256     'groupDpid': '',
257     'flowType': null,
258     'splitSubjectFlag': false
259   },
260   {
261     'id': 27,
262     'dpid': 'B3F8A7FD8EE9077C482569D400378941',
263     'dpname': '信息技术部',
264     'subjectName': null,
265     'subjectId': null,
266     'specName': null,
267     'conf': null,
268     'budgetUsername': null,
269     'desc': null,
270     'count': 8,
271     'applyAmount': 720000,
272     'applyUAmount': 720000,
273     'approvalAmount': 0,
274     'approvalUAmount': 0,
275     'changeAmount': null,
276     'status': '0',
277     'remark': null,
278     'edit': true,
279     'activityId': '04',
280     'children': [{
281       'id': 271,
282       'dpid': 'B3F8A7FD8EE9077C482569D400378941',
283       'dpname': '信息技术部',
284       'subjectName': '固定资产采购-电脑设备-服务器',
285       'subjectId': null,
286       'specName': '海光服务器-规格6',
287       'conf': 'CPU：2* 海光7280； 内存：64GB  3200MHz 硬盘：2 * 960G SSD， RAID卡：支持RIAD  0/1/10/5/6，支持直通，2G Cache，含掉电保护； 网口：2*10GE光口(含光模块），2*1G电口； 冗余电源；5年7x24*4',
288       'budgetUsername': null,
289       'desc': null,
290       'count': 2,
291       'applyAmount': 180000,
292       'applyUAmount': 180000,
293       'approvalAmount': 0,
294       'approvalUAmount': 0,
295       'changeAmount': '',
296       'status': '0',
297       'remark': null,
298       'edit': false,
299       'activityId': null,
300       'children': null,
301       'childrenDetails': null,
302       'groupDpid': 'B3F8A7FD8EE9077C482569D400378941',
303       'flowType': '4',
304       'splitSubjectFlag': false
305     },
306     {
307       'id': 272,
308       'dpid': 'B3F8A7FD8EE9077C482569D400378941',
309       'dpname': '信息技术部',
310       'subjectName': '固定资产采购-电脑设备-服务器',
311       'subjectId': null,
312       'specName': 'ARM服务器-规格15',
313       'conf': 'CPU：2*鲲鹏920 5250，48Core\n内存：256GB\n硬盘：2*480GB SSD，2*1.92TB SSD，12*8TB SAS\nRAID卡：支持RIAD 0/1/10/5/6，2G Cache，含掉电保护\n网口：4*10GE光口(含光模块），4*1G电口；\n冗余电源；5年7x24*4',
314       'budgetUsername': null,
315       'desc': null,
316       'count': 2,
317       'applyAmount': 180000,
318       'applyUAmount': 180000,
319       'approvalAmount': 0,
320       'approvalUAmount': 0,
321       'changeAmount': '',
322       'status': '0',
323       'remark': null,
324       'edit': false,
325       'activityId': null,
326       'children': null,
327       'childrenDetails': null,
328       'groupDpid': 'B3F8A7FD8EE9077C482569D400378941',
329       'flowType': '4',
330       'splitSubjectFlag': false
331     },
332     {
333       'id': 273,
334       'dpid': 'B3F8A7FD8EE9077C482569D400378941',
335       'dpname': '信息技术部',
336       'subjectName': '固定资产采购-电脑设备-服务器',
337       'subjectId': null,
338       'specName': '海光服务器-规格6',
339       'conf': 'CPU：2* 海光7280； 内存：64GB  3200MHz 硬盘：2 * 960G SSD， RAID卡：支持RIAD  0/1/10/5/6，支持直通，2G Cache，含掉电保护； 网口：2*10GE光口(含光模块），2*1G电口； 冗余电源；5年7x24*4',
340       'budgetUsername': null,
341       'desc': null,
342       'count': 4,
343       'applyAmount': 360000,
344       'applyUAmount': 360000,
345       'approvalAmount': 0,
346       'approvalUAmount': 0,
347       'changeAmount': '',
348       'status': '0',
349       'remark': null,
350       'edit': false,
351       'activityId': null,
352       'children': null,
353       'childrenDetails': null,
354       'groupDpid': 'B3F8A7FD8EE9077C482569D400378941',
355       'flowType': '4',
356       'splitSubjectFlag': false
357     }
358     ],
359     'childrenDetails': null,
360     'groupDpid': '',
361     'flowType': null,
362     'splitSubjectFlag': true
363   },
364   {
365     'id': 28,
366     'dpid': '515AF64E1B7C810648257B9D000E4C5C',
367     'dpname': '电子商务部',
368     'subjectName': null,
369     'subjectId': null,
370     'specName': null,
371     'conf': null,
372     'budgetUsername': null,
373     'desc': null,
374     'count': 4,
375     'applyAmount': 720000,
376     'applyUAmount': 720000,
377     'approvalAmount': 0,
378     'approvalUAmount': 0,
379     'changeAmount': null,
380     'status': '0',
381     'remark': null,
382     'edit': true,
383     'activityId': '04',
384     'children': [{
385       'id': 281,
386       'dpid': '79B5243D3A1D981848257E0E003244F4',
387       'dpname': '广州林和西路营业部',
388       'subjectName': null,
389       'subjectId': null,
390       'specName': null,
391       'conf': null,
392       'budgetUsername': null,
393       'desc': null,
394       'count': 2,
395       'applyAmount': 360000,
396       'applyUAmount': 360000,
397       'approvalAmount': 0,
398       'approvalUAmount': 0,
399       'changeAmount': null,
400       'status': null,
401       'remark': null,
402       'edit': false,
403       'activityId': null,
404       'children': [{
405         'id': 2811,
406         'dpid': '79B5243D3A1D981848257E0E003244F4',
407         'dpname': '广州林和西路营业部',
408         'subjectName': '固定资产采购-电脑设备-服务器',
409         'subjectId': null,
410         'specName': '海光服务器-规格6',
411         'conf': 'CPU：2* 海光7280； 内存：64GB  3200MHz 硬盘：2 * 960G SSD， RAID卡：支持RIAD  0/1/10/5/6，支持直通，2G Cache，含掉电保护； 网口：2*10GE光口(含光模块），2*1G电口； 冗余电源；5年7x24*4',
412         'budgetUsername': null,
413         'desc': null,
414         'count': 2,
415         'applyAmount': 360000,
416         'applyUAmount': 360000,
417         'approvalAmount': 360000,
418         'approvalUAmount': 360000,
419         'changeAmount': null,
420         'status': '0',
421         'remark': null,
422         'edit': false,
423         'activityId': null,
424         'children': null,
425         'childrenDetails': null,
426         'groupDpid': '515AF64E1B7C810648257B9D000E4C5C',
427         'flowType': '2',
428         'splitSubjectFlag': false
429       }],
430       'childrenDetails': null,
431       'groupDpid': null,
432       'flowType': null,
433       'splitSubjectFlag': false
434     },
435     {
436       'id': 282,
437       'dpid': '7DBDCC0A6D8F1F134825824A00160727',
438       'dpname': '广州花城大道美林基业大厦营业部',
439       'subjectName': null,
440       'subjectId': null,
441       'specName': null,
442       'conf': null,
443       'budgetUsername': null,
444       'desc': null,
445       'count': 2,
446       'applyAmount': 360000,
447       'applyUAmount': 360000,
448       'approvalAmount': 0,
449       'approvalUAmount': 0,
450       'changeAmount': null,
451       'status': null,
452       'remark': null,
453       'edit': false,
454       'activityId': null,
455       'children': [{
456         'id': 2821,
457         'dpid': '7DBDCC0A6D8F1F134825824A00160727',
458         'dpname': '广州花城大道美林基业大厦营业部',
459         'subjectName': '固定资产采购-电脑设备-服务器',
460         'subjectId': null,
461         'specName': 'ARM服务器-规格15',
462         'conf': 'CPU：2*鲲鹏920 5250，48Core\n内存：256GB\n硬盘：2*480GB SSD，2*1.92TB SSD，12*8TB SAS\nRAID卡：支持RIAD 0/1/10/5/6，2G Cache，含掉电保护\n网口：4*10GE光口(含光模块），4*1G电口；\n冗余电源；5年7x24*4',
463         'budgetUsername': null,
464         'desc': null,
465         'count': 2,
466         'applyAmount': 360000,
467         'applyUAmount': 360000,
468         'approvalAmount': 360000,
469         'approvalUAmount': 360000,
470         'changeAmount': null,
471         'status': '0',
472         'remark': null,
473         'edit': false,
474         'activityId': null,
475         'children': null,
476         'childrenDetails': null,
477         'groupDpid': '515AF64E1B7C810648257B9D000E4C5C',
478         'flowType': '2',
479         'splitSubjectFlag': false
480       }],
481       'childrenDetails': null,
482       'groupDpid': null,
483       'flowType': null,
484       'splitSubjectFlag': false
485     }
486     ],
487     'childrenDetails': null,
488     'groupDpid': '30B94CFE089FE56A482569D40037891C',
489     'flowType': null,
490     'splitSubjectFlag': true
491   },
492   {
493     'id': 29,
494     'dpid': 'C3B6C8EDA11A87B648257F4C0024949B',
495     'dpname': '机构与同业部',
496     'subjectName': null,
497     'subjectId': null,
498     'specName': null,
499     'conf': null,
500     'budgetUsername': null,
501     'desc': null,
502     'count': 8,
503     'applyAmount': 720000,
504     'applyUAmount': 720000,
505     'approvalAmount': 0,
506     'approvalUAmount': 0,
507     'changeAmount': null,
508     'status': '0',
509     'remark': null,
510     'edit': true,
511     'activityId': '04',
512     'children': [{
513       'id': 291,
514       'dpid': 'C3B6C8EDA11A87B648257F4C0024949B',
515       'dpname': '机构与同业部',
516       'subjectName': '固定资产采购-电脑设备-服务器',
517       'subjectId': null,
518       'specName': '海光服务器-规格6',
519       'conf': 'CPU：2* 海光7280； 内存：64GB  3200MHz 硬盘：2 * 960G SSD， RAID卡：支持RIAD  0/1/10/5/6，支持直通，2G Cache，含掉电保护； 网口：2*10GE光口(含光模块），2*1G电口； 冗余电源；5年7x24*4',
520       'budgetUsername': null,
521       'desc': null,
522       'count': 2,
523       'applyAmount': 180000,
524       'applyUAmount': 180000,
525       'approvalAmount': 180000,
526       'approvalUAmount': 180000,
527       'changeAmount': '',
528       'status': '0',
529       'remark': null,
530       'edit': false,
531       'activityId': null,
532       'children': null,
533       'childrenDetails': null,
534       'groupDpid': 'C3B6C8EDA11A87B648257F4C0024949B',
535       'flowType': '3',
536       'splitSubjectFlag': false
537     },
538     {
539       'id': 292,
540       'dpid': 'C3B6C8EDA11A87B648257F4C0024949B',
541       'dpname': '机构与同业部',
542       'subjectName': '固定资产采购-电脑设备-服务器',
543       'subjectId': null,
544       'specName': 'ARM服务器-规格15',
545       'conf': 'CPU：2*鲲鹏920 5250，48Core\n内存：256GB\n硬盘：2*480GB SSD，2*1.92TB SSD，12*8TB SAS\nRAID卡：支持RIAD 0/1/10/5/6，2G Cache，含掉电保护\n网口：4*10GE光口(含光模块），4*1G电口；\n冗余电源；5年7x24*4',
546       'budgetUsername': null,
547       'desc': null,
548       'count': 2,
549       'applyAmount': 180000,
550       'applyUAmount': 180000,
551       'approvalAmount': 180000,
552       'approvalUAmount': 180000,
553       'changeAmount': '',
554       'status': '0',
555       'remark': null,
556       'edit': false,
557       'activityId': null,
558       'children': null,
559       'childrenDetails': null,
560       'groupDpid': 'C3B6C8EDA11A87B648257F4C0024949B',
561       'flowType': '3',
562       'splitSubjectFlag': false
563     },
564     {
565       'id': 293,
566       'dpid': 'C3B6C8EDA11A87B648257F4C0024949B',
567       'dpname': '机构与同业部',
568       'subjectName': '固定资产采购-电脑设备-服务器',
569       'subjectId': null,
570       'specName': '海光服务器-规格6',
571       'conf': 'CPU：2* 海光7280； 内存：64GB  3200MHz 硬盘：2 * 960G SSD， RAID卡：支持RIAD  0/1/10/5/6，支持直通，2G Cache，含掉电保护； 网口：2*10GE光口(含光模块），2*1G电口； 冗余电源；5年7x24*4',
572       'budgetUsername': null,
573       'desc': null,
574       'count': 4,
575       'applyAmount': 360000,
576       'applyUAmount': 360000,
577       'approvalAmount': 360000,
578       'approvalUAmount': 360000,
579       'changeAmount': '',
580       'status': '0',
581       'remark': null,
582       'edit': false,
583       'activityId': null,
584       'children': null,
585       'childrenDetails': null,
586       'groupDpid': 'C3B6C8EDA11A87B648257F4C0024949B',
587       'flowType': '3',
588       'splitSubjectFlag': false
589     }
590     ],
591     'childrenDetails': null,
592     'groupDpid': '30B94CFE089FE56A482569D40037891C',
593     'flowType': null,
594     'splitSubjectFlag': true
595   }
596 ]

utils.js

 1 // 处理数据：让每个有children子级的添加openLeaves: false，标识为是否打开了子级
 2 // 发请求，后端返回数据直接处理完再赋值到this.data.xxx中
 3 export const processingData = (tableData, ids = '') => {
 4   tableData && tableData.forEach((item, idx) => {
 5     item.id == null && (item.id = `sjd${idx}`) // 如id为null,那么自定义id
 6     item.isSelected = false // 是否勾选
 7     item.idCopy = ids + item.id
 8     item.approvalOpinion = '0' // 只是暂时添加后面有接口就注释
 9     item.val = item.jjj - item.eee // 暂时添加这个属性用来做用于变动金额的显示
10     if (item.children) {
11       item.openLeaves = false // 是否打开了子节点
12       processingData(item.children, `${item.idCopy}-`)
13     }
14   })
15 }
16 
17 // 得到表格data中的全部数据，包括children里的
18 // 此方法也要作用于每个环节的审批的金额是否已经填写
19 export const getTableAllData = (tableData, arr = []) => {
20   tableData && tableData.forEach(item => {
21     arr.push(item)
22     getTableAllData(item.children, arr)
23   })
24   return arr
25 }

这样就更好得到勾选的每个数据了

posted @ 2022-09-11 16:36 强者之途阅读(609) 评论(0) 编辑收藏举报

刷新页面返回顶部

努力的man

element表格(树形结构按钮)

公告