记录elementUI中表格合并记录elementUI中表格合并

有个需求是这样的，表格第一列需要合并行，后边的数据是通过接口获取，效果图如下：

文章图片

【记录elementUI中表格合并】首先，列中的时间是前端生成的，尖峰、高峰、低谷是每行数据都会有的，可以写死，具体代码如下：
// 表格：

// data数据如下：

data() { return { companyArr: [], companyPos: 0, typeArr: [], typePos: [], // 假数据，后期是通过接口获取 tableData: [ {company: "xxxx1",type:1,symbolType: "尖峰",m1: "1",m2:"1",m3: "",m4: "",m5:"",m6: "",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, {company: "xxxx1",type:1,symbolType: "高峰",m1: "",m2:"1",m3: "1",m4: "",m5:"",m6: "",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, {company: "xxxx1",type:1,symbolType: "低谷",m1: "",m2:"",m3: "1",m4: "1",m5:"",m6: "",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, {company: "xxxx2",type:2,symbolType: "尖峰",m1: "",m2:"2",m3: "2",m4: "",m5:"",m6: "",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, {company: "xxxx2",type:2,symbolType: "高峰",m1: "",m2:"",m3: "2",m4: "2",m5:"",m6: "",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, {company: "xxxx2",type:2,symbolType: "低谷",m1: "",m2:"",m3: "",m4: "2",m5:"2",m6: "",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, {company: "xxxx3",type:3,symbolType: "尖峰",m1: "",m2:"",m3: "3",m4: "3",m5:"",m6: "",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, {company: "xxxx3",type:3,symbolType: "高峰",m1: "",m2:"",m3: "",m4: "3",m5:"3",m6: "",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, {company: "xxxx3",type:3,symbolType: "低谷",m1: "",m2:"",m3: "",m4: "",m5:"3",m6: "3",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""}, ], } }

// timeData:

computed: { timeData() { let year = new Date().getFullYear(); let obj = {}; let arr = []; for (let i = 1; i <= 12; i++) { obj = { time: year + "年" + i + "月", label: "m" + i, // 这块是和后端确认的每个月的字段名 }; arr.push(obj); } return arr; }, },

// 对tableData数据处理

created() { this.consolidation() }

// methods中的方法

// 根据type计算出要合并的行数 consolidation() { this.companyArr = []; this.companyPos = 0; this.typeArr = []; this.typePos = 0; for (var i = 0; i < this.tableData.length; i++) { if (i === 0) { //第一行必须存在 this.companyArr.push(1); this.companyPos = 0; this.typeArr.push(1); this.typePos = 0; } else { // 判断当前元素与上一个元素是否相同 this.companyPos是companyArr内容的序号 if (this.tableData[i].type === this.tableData[i - 1].type) { this.companyArr[this.companyPos] += 1; this.companyArr.push(0); } else { this.companyArr.push(1); this.companyPos = i; } if ( this.tableData[i].symbolType === this.tableData[i - 1].symbolType && this.tableData[i].type === this.tableData[i - 1].type ) { this.typeArr[this.typePos] += 1; this.typeArr.push(0); } else { this.typeArr.push(1); this.typePos = i; } } } },

// 合并行方法

arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row_1 = this.companyArr[rowIndex]; const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消 return { rowspan: _row_1, colspan: _col_1, }; } else if (columnIndex === 1) { const _row_2 = this.typeArr[rowIndex]; const _col_2 = _row_2 > 0 ? 1 : 0; return { rowspan: _row_2, colspan: _col_2, }; } },

完美解决，后期table数据从接口获取，改装成tableData中的数据结构就可以直接使用了。