前几天搞了个简易版的动态合并单元格
但是需求有变化，就只能稍微改改了~~
欢迎路过的各位大佬指出我代码的问题~~~~
另： 代码执行效率不是很高，如果需要大量渲染更多数据建议可以直接使用原生
<template> <page-view :title="title"> <h1>第一種數據結構，前端渲染</h1> <div class="snall-table-spacing"> <a-table :columns="columns" :dataSource="dataArr" row-key="id" :scroll="{x:5900, y: 500 }" bordered :pagination="false" > <template slot="name" slot-scope="text"> <a href="javascript:;">{{ text }}</a> </template> </a-table> </div> </page-view> </template> <script> import { PageView } from '@/layouts' export default { // name: 'paaaaaaaTest', components: { PageView }, data() { return { renderContent: function() {}, countArr: [], dataArr: [ { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'dddd', paaaaaaa: 'paaaaaaa', um: '0.3um', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'dddd', paaaaaaa: 'paaaaaaa', um: '0.5um', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'dddd', paaaaaaa: 'paaaaaaa', um: '1.0um', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'dddd', paaaaaaa: 'paaaaaaa', um: '5.0um', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'dddd', paaaaaaa: 'tttttttt', um: '', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'dddd', paaaaaaa: 'hehehehehe', um: '', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'wwwwwww', paaaaaaa: 'paaaaaaa', um: '0.3um', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'wwwwwww', paaaaaaa: 'paaaaaaa', um: '0.5um', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'wwwwwww', paaaaaaa: 'paaaaaaa', um: '1.0um', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'wwwwwww', paaaaaaa: 'paaaaaaa', um: '5.0um', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'wwwwwww', paaaaaaa: 'tttttttt', um: '', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' }, { date: '2020/03/20', myaaaaaa: 'aaaaaaaaa', floor: 'bbbbb', myleeeeeee: 'cccccc', ssssttt: 'wwwwwww', paaaaaaa: 'hehehehehe', um: '', lsl: '3000', usl: '4000', l_0: '27400', l_1: '27420', l_2: '2742300', l_3: '27r400', l_4: '27df400', l_5: '274f00', l_6: '274400', l_7: '27400', l_8: '273400', l_9: '27rt400', l_10: '27er400', l_11: '27400', l_12: '2765400', l_13: '2745400', l_14: '27400', l_15: '27400', l_16: '27400', l_17: '27400', l_18: '27400', l_19: '274500', l_20: '274400', l_21: '274400', l_22: '275400', l_23: '274600', l_24: '27400', l_25: '274500', l_26: '274500', l_27: '274500', l_28: '274500', l_29: '275400', l_30: '274500', l_31: '274500', l_32: '274500', l_33: '274500', l_34: '274400', l_35: '275400', l_36: '2744500', l_37: '27400', l_38: '27456400', l_39: '276546400', l_40: '27400', l_41: '27400', l_42: '27400', l_43: '27400', l_44: '2740540', l_45: '275400', l_46: '2754040', l_47: '274500', l_48: '274400' } ], columns: [] } }, methods: { // 這個函數作用是輸入表格內容data以及表頭裡的dataIndex，返回一個需要合併的數組，只是單個的列需要合併的1 conutfun(dataIndex) { var dataArr1 = this.dataArr var myArray = new Array(dataArr1.length) // 聲明一個數組，每個對應保存的是rowspan的值 // console.log(dataArr1) var myKeyName = '' // 保存上一個值 var count = 0 // 保存相同的值出現的次數 var startIndex = 0 // 保存第一次這個值出現的位置 for (var i = 0; i < dataArr1.length; i++) { var val = dataArr1[i][dataIndex] if (i === 0) { myKeyName = val count = 1 myArray[0] = 1 } else { if (val === myKeyName) { count++ myArray[startIndex] = count myArray[i] = 0 } else { count = 1 myKeyName = val startIndex = i myArray[i] = 1 } } } // console.log(myArray) return myArray }, // 這個函數作用是輸入表格內容data以及表頭裡的dataIndex，返回一個需要合併的數組，只是單個的列需要合併的2 // 這個函數的作用是把表格的表頭部分輸入，然後生成一個大對象，對象的key是對應的表格內容列名，數組的value對應的表格合併的列1 // Name: (8) [6, 0, 0, 0, 0, 0, 1, 1] // age: (8) [1, 1, 1, 1, 4, 0, 0, 0] // age3: (8) [6, 0, 0, 0, 0, 0, 2, 0] // age4: (8) [5, 0, 0, 0, 0, 3, 0, 0] // agetwo: (8) [8, 0, 0, 0, 0, 0, 0, 0] // oid: (8) [1, 1, 1, 1, 1, 1, 1, 1] countArrFun() { var myNewArray = {} for (var i = 0; i < this.columns.length; i++) { const _ = this.columns[i] const arr = this.conutfun(_.dataIndex) myNewArray[_.dataIndex] = arr } // console.log(myNewArray) return myNewArray }, // 這個函數的作用是把表格的表頭部分輸入，然後生成一個數組，數組的key是對應的表格內容列名，數組的value對應的表格合併的列2 setColumns() { // 聲明一個對象，key是表格的標題，value 是表格每列的寬度 var myObj = { date: 200, myaaaaaa: 100, floor: 100, myleeeeeee: 100, ssssttt: 100, paaaaaaa: 100, um: 100, lsl: 100, usl: 100, l_0: 100, l_1: 100, l_2: 100, l_3: 100, l_4: 100, l_5: 100, l_6: 100, l_7: 100, l_8: 100, l_9: 100, l_10: 100, l_11: 100, l_12: 100, l_13: 100, l_14: 100, l_15: 100, l_16: 100, l_17: 100, l_18: 100, l_19: 100, l_20: 100, l_21: 100, l_22: 100, l_23: 100, l_24: 100, l_25: 100, l_26: 100, l_27: 100, l_28: 100, l_29: 100, l_30: 100, l_31: 100, l_32: 100, l_33: 100, l_34: 100, l_35: 100, l_36: 100, l_37: 100, l_38: 100, l_39: 100, l_40: 100, l_41: 100, l_42: 100, l_43: 100, l_44: 100, l_45: 100, l_46: 100, l_47: 100, l_48: 100 } // 聲明一個新的數組，用來放新生成的colums var newarr = [] Object.keys(myObj).forEach((_, i) => { // 如果表格標題不是這幾個字段的話，就設置不用合併單元格，正常 if (['date', 'myaaaaaa', 'floor', 'myleeeeeee', 'ssssttt', 'paaaaaaa', 'um'].indexOf(_) < 0) { newarr.push({ title: _, dataIndex: _, myObj[_], customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr[_]) { obj.attrs.rowSpan = 1 } return obj } }) } else if (_ === 'paaaaaaa') { // 如果表格標題是paaaaaaa的話，就設置如果內容是hehehehehe或者tttttttt向右合併， // 並且如果有重複字段的話，向下合併 newarr.push({ title: _, dataIndex: _, myObj[_], customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr[_]) { obj.attrs.rowSpan = this.countArr[_][index] } // 自定義需求，如果表內容是這幾個，就橫向合併一個單元格，需要設置兩列的內容 if (['hehehehehe', 'tttttttt'].indexOf(value) !== -1) { obj.attrs.colSpan = 2 } // 自定義需求，如果表內容是這幾個，就橫向合併一個單元格，需要設置兩列的內容 return obj } }) } else if (_ === 'um') { // 如果表格標題是um的話，就設置如果內容為空，就向右合併為0需要配合上一個， // 並且如果有重複字段的話，向下合併 newarr.push({ title: _, dataIndex: _, myObj[_], customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr[_]) { obj.attrs.rowSpan = this.countArr[_][index] } // 自定義需求，如果表內容是這幾個，就橫向合併一個單元格，需要設置兩列的內容 if (!value) { obj.attrs.colSpan = 0 } // 自定義需求，如果表內容是這幾個，就橫向合併一個單元格，需要設置兩列的內容 return obj } }) } else { // 並且如果有重複字段的話，向下合併 newarr.push({ title: _, dataIndex: _, myObj[_], customRender: (value, row, index) => { const obj = { children: value, attrs: {} } if (this.countArr[_]) { // 向下合併 obj.attrs.rowSpan = this.countArr[_][index] } return obj } }) } }) this.columns = newarr } }, mounted() { this.setColumns() this.countArr = this.countArrFun() }, computed: { title() { return this.$route.meta.title } } } </script> <style lang="less" scoped> @import url('./common-assets/index.less'); </style>