当前位置：首页 > news >正文

合并单元格

news 2025/8/2 9:14:10

需求：
合并相同名称的产品
在这里插入图片描述
先说下elementUI合并单元格的方法，先计算好要合并的行数rowspan，return {rowspan，colspan}，其他的单元格return{0,0}

    getData(params) {//临时数组，存放产品名称相同的数量this.tempArr = []getTableData(params).then(response => {this.tableData = response.data//获取到表格数据后，通过遍历获取各个产品的数量for (let i = 0; i < this.tableData.length; i++) {if (i === 0) {this.tempArr.push(1) } else {//一样的产品Id就累加产品数量，用0补齐要合并的位置if (this.tableData[i].prod_id === this.tableData[i - 1].prod_id) {this.tempArr[pos] += 1 this.tempArr.push(0)} else {this.tempArr.push(1)pos = i}}}})},spanMethod({row, column, rowIndex, columnIndex}) {if (columnIndex === 0) {if (this.tempArr[rowIndex]) {return {rowspan: this.tempArr[rowIndex],colspan: this.tempArr[rowIndex] > 0 ? 1 : 0,}} else {return {rowspan: 0,colspan: 0,}}}},

合并固定的两行单元格

在这里插入图片描述

spanMethod({ row, column, rowIndex, columnIndex }){...//12列之前合并起来if (columnIndex < 12) if (rowIndex % 2 === 0) {return {rowspan: 2, colspan: 1}} else {return {rowspan: 0, colspan: 0}}}},