前几天搞了个简易版的动态合并单元格
但是需求有变化，就只能稍微改改了~~
欢迎路过的各位大佬指出我代码的问题~~~~
另： 代码执行效率不是很高，如果需要大量渲染更多数据建议可以直接使用原生
<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: _,
width: 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: _,
width: 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: _,
width: 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: _,
width: 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>
原文地址：https://www.cnblogs.com/sugartang/p/12540512.html
时间： 2024-11-07 23:23:55