Vue 学习随笔系列十三 -- ElementUI 表格归并单元格

ElementUI 表格归并单元格



一、表头归并

参考：
二、单元格归并

1、示例代码

1. <template>
2.   <div>
3.     <el-table
4.       size="small"
5.       border
6.       class="custom-tab"
7.       :data="tableBody"
8.       :span-method="objectMergeMethod"
9.       :cell-style="columnStyle"
10.       :row-class-name="rowStyle"
11.       :header-cell-style="{
12.         background: '#87CEFA',
13.         color: '#38434F',
14.         fontWeight: '500',
15.         fontSize: '14px',
16.       }"
17.     >
18.    
19.       <!-- <el-table-column type="index" label="序号" width="58" align="center"></el-table-column> -->
20.       <el-table-column prop="type" label="姓名" align="center" width="140px"></el-table-column>
21.       <el-table-column prop="name" label="科目" align="center"></el-table-column>
22.       <el-table-column prop="sysData" label="成绩" align="center"></el-table-column>
23.       <el-table-column prop="contractData" label="排名" align="center"></el-table-column>
24.     </el-table>
25.   </div>
26. </template>
28. <script>
29. export default {
30.   props: {
31.     DiffData: {},
32.     isShowOpr: {
33.       default: false
34.     },
35.   },
36.   data() {
37.     return {
38.       // 表体数据
39.       tableBody: [
40.         {
41.           type: "小明",
42.           name: "语文",
43.           sysData: 10,
44.           contractData: "1",
45.           isDiff: "是",
46.           fhsj: "",
47.         },
48.         {
49.           type: "小明",
50.           name: "数学",
51.           sysData: 20,
52.           contractData: "2",
53.           isDiff: "是"
54.         },
55.         {
56.           type: "小明",
57.           name: "英语",
58.           sysData: 30,
59.           contractData: "1",
60.           isDiff: "是"
61.         },
62.         {
63.           type: "小明",
64.           name: "地理",
65.           sysData: 30,
66.           contractData: "1",
67.           isDiff: "是"
68.         },
69.         {
70.           type: "小明",
71.           name: "生物",
72.           sysData: 30,
73.           contractData: "1",
74.           isDiff: "是"
75.         },
76.         {
77.           type: "小李",
78.           name: "语文",
79.           sysData: 88,
80.           contractData: "1",
81.           isDiff: "是"
82.         },
83.         {
84.           type: "小李",
85.           name: "数学",
86.           sysData: 44,
87.           contractData: "1",
88.           isDiff: "是"
89.         },
90.         {
91.           type: "小李",
92.           name: "英语",
93.           sysData: 44,
94.           contractData: "1",
95.           isDiff: "是"
96.         },
97.         {
98.           type: "小李",
99.           name: "历史",
100.           sysData: 44,
101.           contractData: "1",
102.           isDiff: "是"
103.         },
104.         {
105.           type: "小李",
106.           name: "生物",
107.           sysData: 44,
108.           contractData: "1",
109.           isDiff: "是"
110.         },
111.         {
112.           type: "小王",
113.           name: "语文",
114.           sysData: 1001,
115.           contractData: "1",
116.           isDiff: "是"
117.         },
118.         {
119.           type: "小王",
120.           name: "数学",
121.           sysData: 1001,
122.           contractData: "1",
123.           isDiff: "是"
124.         },
125.         {
126.           type: "小王",
127.           name: "英语",
128.           sysData: 1001,
129.           contractData: "1",
130.           isDiff: "是"
131.         },
132.         {
133.           type: "小王",
134.           name: "地理",
135.           sysData: 1001,
136.           contractData: "1",
137.           isDiff: "是"
138.         },
139.         {
140.           type: "小王",
141.           name: "生物",
142.           sysData: 1001,
143.           contractData: "1",
144.           isDiff: "是"
145.         },
146.       ],
147.       cellList: [], // 单元格数组
148.       count: null, // 计数
149.     };
150.   },
151.   watch: {
152.     tableBody: {
153.       immediate: true,
154.       deep: true,
155.       handler() {
156.         this.computedColumns(this.tableBody)
157.       },
158.     },
159.   },
160.   // mounted() {
161.   //   // 第1步，根据表体信息，计算合并单元格的信息
162.   //   this.computedColumns(this.DiffData);
163.   // },
164.   methods: {
165.     columnStyle({row, column, rowIndex, columnIndex}) {
166.       if(columnIndex === 0) {
167.         // 表头样式
168.         // return "background: #F5F6FA; color: #171A23; font-weight: 500; font-size: 14px; ";
169.         if(row.type == '小明') {
170.           return 'row-m1'
171.         } else if(row.type == '小李') {
172.           return 'row-m2'
173.         } else if(row.type == '小王') {
174.           return 'row-m3'
175.         } else if(row.type == 'xxx') {
176.           return 'row-m4'
177.         }
178.       }
179.     },
180.     rowStyle({ row, rowIndex }) {
181.       if(row.type == '小明') {
182.         return 'row-m1'
183.       } else if(row.type == '小李') {
184.         return 'row-m2'
185.       } else if(row.type == '小王') {
186.         return 'row-m3'
187.       } else if(row.type == 'xxx') {
188.         return 'row-m4'
189.       }
190.       // 指定行或列信息样式
191.       // if(rowIndex === 7) {
192.       //   return 'target-row'
193.       // }
194.     },
195.     // 第1步，遍历表格数据
196.     computedColumns(tableBody) {
197.       // 循环遍历表体数据
198.       for (let i = 0; i < tableBody.length; i++) {
199.         if (i == 0) {
200.           // 先设置第一项，往 cellList 中追加 1， 若下一项与当前项相同，则往 cellList中追加 0
201.           // count 初始值为 0
202.           this.cellList.push(1);
203.           this.count = 0;
204.           // console.log("索引", 0, this.count);
205.         } else {
206.           // 判断当前项与上一项的类别(type)是否相同，若相同则合并这一列的单元格
207.           if (tableBody[i].type == tableBody[i - 1].type) {
208.             // 如果相同, this.cellList 增加计数 1 ，并向数组追加数据 0
209.             this.cellList[this.count] += 1;
210.             this.cellList.push(0);
211.             // console.log("索引", this.count);
212.           } else {
213.             // 如果不同，往cellList数组中追加 1，并将索引赋值给 count
214.             this.cellList.push(1);
215.             this.count = i;
216.             // console.log("索引", this.count);
217.           }
218.         }
219.       }
220.     },
221.     // 第2步，将计算好的结果返回给el-table，表格会根据结果做出对应合并列渲染
222.     objectMergeMethod({ row, column, rowIndex, columnIndex }) {
223.       // 给第一列做单元格合并。0 是第一列，1 是第二列。
224.       if (columnIndex === 0) {
225.         const rowCell = this.cellList[rowIndex];
226.         if (rowCell > 0) {
227.           const colCell = 1;
228.           return {
229.             rowspan: rowCell,
230.             colspan: colCell,
231.           };
232.         } else {
233.           // 清除所有单元格数据，防止动态数据出现表格偏移现象
234.           return {
235.             rowspan: 0,
236.             colspan: 0,
237.           };
238.         }
239.       }
240.     },
241.   },
242. };
243. </script>
245. <style lang="scss" scoped>
246.   .vueWrap {
247.     .custom-tab {
248.       margin: 0 0 20px 0;
249.     }
250.   }
251.   .data-box {
252.     display: flex;
253.     align-items: center;
254.     justify-content: center;
255.     .icon {
256.       height: 7px;
257.       width: 7px;
258.       background-color: '#333';
259.       margin: 0 2px 0 0;
260.     }
261.   }
262.   ::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
264.   }
266.   ::v-deep .target-row {
267.     color: #3363FF;
268.     font-weight: 500;
269.   }
271.   ::v-deep .row-m1 {
272.     background-color: #BBFFFF;
273.     color: #333;
274.   }
275.   ::v-deep .row-m2 {
276.     background-color: #FFF8DC;
277.     color: #333;
278.   }
279.   ::v-deep .row-m3 {
280.     background-color: #F0FFF0;
281.     color: #333;
282.   }
283.   ::v-deep .row-m4 {
284.     background-color: #E0EEE0;
285.     color: #333;
286.   }
287.   .update-btn {
288.     color: #4597EB;
289.     cursor: pointer;
290.   }
291. </style>

复制代码

2、示例效果