工作中经常会遇到需要将表格合并的需求,elementUI官方文档也有对应的方法,但是不够详细,发个贴记录一下学习之路
首先需要一个数组记录需要合并的行数据,再来一个变量记录数组的下标
然后就是写一个方法 遍历数据,得到需要合并的行数据,
<el-tableclass="table":data="data"borderstyle="width: 100%"size="mini":header-cell-style="headerStyle":cell-style="cellStyle"height="37rem":span-method="objectSpanMethod"><el-table-column label="本周签到表(06.27-07.01)" align="center"><el-table-column:prop="key.value":label="key.label"v-for="(key, index1) in tableheader":key="index1"align="center":width="index1 == 0 ? 120 : ''":formatter="index1 == 3 ? valformat : format"></el-table-column></el-table-column></el-table>
// 获取需要合并的数据getSpanArr(data) {// data就是我们从后台拿到的数据for (var i = 0; i < data.length; i++) {if (i === 0) {this.span.push(1);this.index= 0;} else {// 判断当前元素与上一个元素是否相同if (data[i].date === data[i - 1].date) {this.span[this.index] += 1;this.span.push(0);} else {this.span.push(1);this.index= i;}}}},// 表格合并行方法objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.span[rowIndex];return {// [0,0] 表示这一行不显示， [2,1]表示行的合并数rowspan: _row,colspan: 1};}},
最后是效果图
