el-table合并单元格

article/2025/9/12 21:52:30

根据id相同合并单元格
在这里插入图片描述

<el-table @selection-change="handleSelectionChange" :span-method="objectSpanMethod" :data="tableData"  ref="multipleTable" ><el-table-column :selectable="checkSelect" type="selection" width="60"></el-table-column><el-table-column label="序号" width="60"><template v-if="scope.row" slot-scope="scope"><div>{{scope.row.rank}}</div></template></el-table-column><el-table-column label="名称"><template v-if="scope.row" slot-scope="scope"><div>{{scope.row.name}}</div>  </template></el-table-column><el-table-column label="金额(元)"><template v-if="scope.row" slot-scope="scope">{{scope.row.money}}</template></el-table-column><el-table-column label="面值(金币)"><template v-if="scope.row" slot-scope="scope">{{scope.row.coinNum}}</template></el-table-column><el-table-column label="数量(张)"><template v-if="scope.row" slot-scope="scope">{{scope.row.allNum}}</template></el-table-column><el-table-column label="未发放(张)"><template v-if="scope.row" slot-scope="scope">{{scope.row.surplusNum}}</template></el-table-column><el-table-column label="门店名称"><template v-if="scope.row" slot-scope="scope">{{scope.row.merchantName}}</template></el-table-column><el-table-column label="活动时间" width="160" prop="startTime"></el-table-column></el-table>

原理：
如果是第一条数据，设置索引为0，并向空的spanArr数组中加入1；
如果不是第一条数据，判断它与前一条数据的id是否相等，若相等，则向数组spanArr中添加0，并将前一位元素+1，表示合并行数+1。
以此往复，得到所有行的合并数，0即表示改行不显示

        /*** 获取每行id* @param {*} data */getSpanId(data) {// data就是我们从后台拿到的数据for (var i = 0; i < data.length; i++) {if (i === 0) {//spanArr 用于存放没一行记录的合并数this.spanArr.push(1);//pos是spanArr的索引this.pos = 0;} else {// 判断当前元素与上一个元素是否相同if (data[i].id === data[i - 1].id) {this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}// console.log(this.spanArr);// console.log(this.pos);}},

在这里插入图片描述

    /** * 合并行列  * 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。* @param {*} param0 */objectSpanMethod({row,column,rowIndex,columnIndex}) {if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 ||columnIndex === 7 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10 ||columnIndex === 11 || columnIndex === 12) {const _row = this.spanArr[rowIndex];//如果行号大于0 合并const _col = _row > 0 ? 1 : 0;// console.log(`rowspan:${_row} colspan:${_col}`);return {// [0,0] 表示这一行不显示， rowspan: _row,colspan: _col};}}