vue2的 element 表格单元格合并

1. <template>
2. <div>
3. <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id" ref="tableDom" border>
4. <el-table-column label="序号" width="55" align="center">
5. <template slot-scope="scope">{{ scope.$index + 1 }}</template>
6. </el-table-column>
7. <el-table-column prop="name" label="分类" align="center"></el-table-column>
8. <el-table-column prop="num1" label="数量1" align="center"></el-table-column>
9. <el-table-column prop="num2" label="数量2" align="center"></el-table-column>
10. <el-table-column prop="num3" label="数量3" align="center"></el-table-column>
11. <el-table-column prop="type" label="类型" align="center"></el-table-column>
12. <el-table-column prop="num4" label="数量4" align="center"></el-table-column>
13. <el-table-column prop="num5" label="数量5" align="center"></el-table-column>
14. </el-table>
15. </div>
16. </template>
17. <script>
18. export default {
19. name: '',
20. components: {},
21. props: {},
22. data() {
23. return {
24. tableData: [{
25. name: '名称1',
26. num1: '2',
27. num2: '3',
28. num3: '4',
29. num4: '连续',
30. num5: '6',
31. num6: '7',
32. }, {
33. name: '名称2',
34. num1: '2',
35. num2: '3',
36. num3: '4',
37. num4: '连续',
38. num5: '6',
39. num6: '7',
40. }, {
41. name: '名称2',
42. num1: '2',
43. num2: '3',
44. num3: '4',
45. num4: '连续',
46. num5: '6',
47. num6: '7',
48. }, {
49. name: '名称3',
50. num1: '2',
51. num2: '3',
52. num3: '4',
53. num4: '连续',
54. num5: '6',
55. num6: '7',
56. }, {
57. name: '名称4',
58. num1: '2',
59. num2: '3',
60. num3: '4',
61. num4: '连续',
62. num5: '6',
63. num6: '7',
64. }, {
65. name: '名称4',
66. num1: '2',
67. num2: '3',
68. num3: '4',
69. num4: '连续',
70. num5: '6',
71. num6: '7',
72. }]
73. }
74. },
75. filters: {},
76. computed: {},
77. watch: {},
78. created() {},
79. mounted() {},
80. beforeDestroy() {},
81. methods: {
82. // 合计
83. getSummaries (param) {
84. const { columns, data } = param
85. const sums = []
86. columns.forEach((column, index) => {
87. if (index === 0) {
88. sums[index] = '合计'
89. } else if (index === 2 || index === 7) {
90. const values = data.map(item => Number(item[column.property]))
91. if (!values.every(value => isNaN(value))) {
92. sums[index] = values.reduce((prev, curr) => {
93. const value = Number(curr)
94. if (!isNaN(value)) {
95. return prev + curr
96. } else {
97. return prev
98. }
99. }, 0)
100. } else {
101. sums[index] = ''
102. }
103. } else {
104. sums[index] = ''
105. }
106. })
107. return sums
108. },
109. // table合并列
110. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
111. let data = this.tableData; //拿到当前table中数据
112. let cellValue = row[column.property]; //当前位置的值
113. let noSortArr = ['num1', 'num2', 'num3', 'num4', 'num5', 'num6']; //不需要合并的字段（不进行合并行的prop）
114. if (cellValue && !noSortArr.includes(column.property)) {
115. let prevRow = data[rowIndex - 1]; //获取到上一条数据
116. let nextRow = data[rowIndex + 1]; //下一条数据
117. if (prevRow && prevRow[column.property] === cellValue) { //当有上一条数据，并且和当前值相等时
118. return { rowspan: 0, colspan: 0 };
119. } else {
120. let countRowspan = 1;
121. while (nextRow && nextRow[column.property] === cellValue) { //当有下一条数据并且和当前值相等时,获取新的下一条
122. nextRow = data[++countRowspan + rowIndex];
123. }
124. if (countRowspan > 1) {
125. return { rowspan: countRowspan, colspan: 1 };
126. }
127. }
128. }
129. },
130. }
131. }
132. </script>
133. <style scoped lang="less">
134. </style>