element动态表头归并表格

1. <template>
2.   <div>
3.    <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
4.         <el-table-column align="center" label="" prop="bigCategoryName" fixed></el-table-column>
5.         <el-table-column align="center" label="" prop="smallCategoryName" fixed></el-table-column>
6.         <el-table-column v-for="header in tableHeaders" align="center" :key="header.key" :prop="header.key"
7.             :label="header.label">
8.             <el-table-column v-show="header.children" v-for="child in header.children" align="center" :key="child.key"
9.             :prop="child.key" :label="child.label">
10.             <el-table-column v-show="child.children" v-for="child2 in child.newChildren" align="center"
11.                 :label="child2.propName" :key="child2.key" :prop="child2.prop"></el-table-column>
12.             </el-table-column>
13.         </el-table-column>
14.         <el-table-column align="center" label="">
15.             <el-table-column align="center" label="累计">
16.                 <el-table-column align="center" label="本日"  prop="todayTotal" ></el-table-column>
17.                 <el-table-column align="center" label="比率/出率" prop="rateTotal"  ></el-table-column>
18.                 <el-table-column align="center" label="月累计" prop="monthTotalTotal"></el-table-column>
19.                 <el-table-column align="center" label="月比率/出率" prop="monthRateTotal" ></el-table-column>
20.             </el-table-column>
21.             <el-table-column align="center" label="上月比率/出率"  prop="lastMonthRateTotal" width="100px"></el-table-column>
22.         </el-table-column>
23.     </el-table>
24.   </div>
25. </template>
26. <script>
27. export default {
28.   name: 'table_test',
29.   data() {
30.     return {
31.       tableHeaders: [
32.           {
33.               "label": "孔令召",
34.               "children": [
35.                   {
36.                       "label": "白班",
37.                       "newChildren": [
38.                           {
39.                               "prop": "todayShift",
40.                               "propName": "本日",
41.                               "propDescribtion": null,
42.                               "hasSort": false
43.                           },
44.                           {
45.                               "prop": "rateShift",
46.                               "propName": "比率/出率",
47.                               "propDescribtion": null,
48.                               "hasSort": false
49.                           },
50.                           {
51.                               "prop": "monthTotalShift",
52.                               "propName": "月累计",
53.                               "propDescribtion": null,
54.                               "hasSort": false
55.                           },
56.                           {
57.                               "prop": "monthRateShift",
58.                               "propName": "月比率/月出率",
59.                               "propDescribtion": null,
60.                               "hasSort": false
61.                           }
62.                       ]
63.                   }
64.               ]
65.           },
66.           {
67.               "label": "杨晓超",
68.               "children": [
69.                   {
70.                       "label": "中班",
71.                       "newChildren": [
72.                           {
73.                               "prop": "todayMiddle",
74.                               "propName": "本日",
75.                               "propDescribtion": null,
76.                               "hasSort": false
77.                           },
78.                           {
79.                               "prop": "rateMiddle",
80.                               "propName": "比率/出率",
81.                               "propDescribtion": null,
82.                               "hasSort": false
83.                           },
84.                           {
85.                               "prop": "monthTotalMiddle",
86.                               "propName": "月累计",
87.                               "propDescribtion": null,
88.                               "hasSort": false
89.                           },
90.                           {
91.                               "prop": "monthRateMiddle",
92.                               "propName": "月比率/月出率",
93.                               "propDescribtion": null,
94.                               "hasSort": false
95.                           }
96.                       ]
97.                   }
98.               ]
99.           },
100.           {
101.               "label": "王文强",
102.               "children": [
103.                   {
104.                       "label": "夜班",
105.                       "newChildren": [
106.                           {
107.                               "prop": "todayNight",
108.                               "propName": "本日",
109.                               "propDescribtion": null,
110.                               "hasSort": false
111.                           },
112.                           {
113.                               "prop": "rateNight",
114.                               "propName": "比率/出率",
115.                               "propDescribtion": null,
116.                               "hasSort": false
117.                           },
118.                           {
119.                               "prop": "monthTotalNight",
120.                               "propName": "月累计",
121.                               "propDescribtion": null,
122.                               "hasSort": false
123.                           },
124.                           {
125.                               "prop": "monthRateNight",
126.                               "propName": "月比率/月出率",
127.                               "propDescribtion": null,
128.                               "hasSort": false
129.                           }
130.                       ]
131.                   }
132.               ]
133.           }
134.       ],
135.       tableData: [
136.                  {
137.                 "bigCategoryName": "原料",
138.                 "smallCategoryName": "投料量",
139.                 "todayShift": 30340,
140.                 "rateShift": 2150.0,
141.                 "monthTotalShift": 45270.0,
142.                 "monthRateShift": 2160.0,
143.                 "todayMiddle": 32670,
144.                 "rateMiddle": 2170.0,
145.                 "monthTotalMiddle": 67550.0,
146.                 "monthRateMiddle": 2170.0,
147.                 "todayNight": 31700,
148.                 "rateNight": 2190.0,
149.                 "monthTotalNight": 67880.0,
150.                 "monthRateNight": 2180.0,
151.                 "todayTotal": 94710,
152.                 "rateTotal": 2170.75,
153.                 "monthTotalTotal": 180700,
154.                 "monthRateTotal": 2170.05,
155.                 "lastMonthRateTotal": 107.35
156.             },
157.             {
158.                 "bigCategoryName": "辅料投入",
159.                 "smallCategoryName": "辅料1",
160.                 "todayShift": 70,
161.                 "rateShift": 0.0,
162.                 "monthTotalShift": 140.0,
163.                 "monthRateShift": 0.01,
164.                 "todayMiddle": 70,
165.                 "rateMiddle": 0.0,
166.                 "monthTotalMiddle": 140.0,
167.                 "monthRateMiddle": 0.0,
168.                 "todayNight": 70,
169.                 "rateNight": 0.0,
170.                 "monthTotalNight": 140.0,
171.                 "monthRateNight": 0.0,
172.                 "todayTotal": 210,
173.                 "rateTotal": 4.81,
174.                 "monthTotalTotal": 420,
175.                 "monthRateTotal": 5.04,
176.                 "lastMonthRateTotal": 144.27
177.             },
178.             {
179.                 "bigCategoryName": "辅料投入",
180.                 "smallCategoryName": "辅料2",
181.                 "todayShift": 30,
182.                 "rateShift": 0.0,
183.                 "monthTotalShift": 60.0,
184.                 "monthRateShift": 0.0,
185.                 "todayMiddle": 30,
186.                 "rateMiddle": 0.0,
187.                 "monthTotalMiddle": 60.0,
188.                 "monthRateMiddle": 0.0,
189.                 "todayNight": 30,
190.                 "rateNight": 0.0,
191.                 "monthTotalNight": 60.0,
192.                 "monthRateNight": 0.0,
193.                 "todayTotal": 90,
194.                 "rateTotal": 2.06,
195.                 "monthTotalTotal": 180,
196.                 "monthRateTotal": 2.16,
197.                 "lastMonthRateTotal": 92.56
198.             },
199.             {
200.                 "bigCategoryName": "辅料投入",
201.                 "smallCategoryName": "辅料3",
202.                 "todayShift": 2182.4,
203.                 "rateShift": 160.0,
204.                 "monthTotalShift": 3242.6,
205.                 "monthRateShift": 0.16,
206.                 "todayMiddle": 2335.85,
207.                 "rateMiddle": 160.0,
208.                 "monthTotalMiddle": 4817.4,
209.                 "monthRateMiddle": 0.15,
210.                 "todayNight": 2244.4,
211.                 "rateNight": 160.0,
212.                 "monthTotalNight": 4832.9,
213.                 "monthRateNight": 0.16,
214.                 "todayTotal": 6762.65,
215.                 "rateTotal": 155,
216.                 "monthTotalTotal": 12892.90,
217.                 "monthRateTotal": 154.83,
218.                 "lastMonthRateTotal": 126.1
219.             }
220.           ]
221.     }
222.   },
224.   mounted() {
225.           this.gettableList()
226.   },
227.   methods: {
228.           // 整体表格PC端合并列
229.      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
230.          let that = this;
231.          // 因为日期在第一项，从0开始判断columnIndex === 0合并第一列
232.          if (columnIndex === 0) {
233.              // 当前行值及日期值为：bigCategoryName
234.              let idName = that.tableData[rowIndex].bigCategoryName;
235.              // rowIndex是行索引，判定第二行是不是和前面一行的日期值相同
236.              if (rowIndex > 0) {
237.              if (that.tableData[rowIndex].bigCategoryName != that.tableData[rowIndex - 1].bigCategoryName) {
238.                  let i = rowIndex;
239.                  let num = 0;
240.                  // 遍历
241.                  while (i < that.tableData.length) {
242.                  if (that.tableData[i].bigCategoryName === idName) {
243.                      i++;
244.                      num++;
245.                  } else {
246.                      i = that.tableData.length;
247.                  }
248.                  }
249.                  return {
250.                  // 这里返回的num就是有相同的行数
251.                  rowspan: num,
252.                  // 合并几列,实例中只是跨行合并,不跨列合并,所以用的1
253.                  colspan: 1,
254.                  }
255.              } else {
256.                  return {
257.                  rowspan: 0,
258.                  colspan: 1,
259.                  }
260.              }
261.              } else {
262.              let i = rowIndex;
263.              let num = 0;
264.              while (i < that.tableData.length) {
265.                  if (that.tableData[i].bigCategoryName === idName) {
266.                  i++;
267.                  num++;
268.                  } else {
269.                  i = that.tableData.length;
270.                  }
271.              }
272.              return {
273.                  rowspan: num,
274.                  colspan: 1,
275.              }
276.              }
277.          }
278.      },
279.     gettableList(){
280.         let data={
281.             date:this.time,
282.         }
283.         productionProcessPC(data).then((response) => {
284.             this.tableData=response.data.list
285.             this.tableHeaders=response.data.tableHeaders
286.         })
287.     },
288. };
289. </script>
290. <style lang='' scoped>
291. </style>

复制代码