即当表格中“获奖名称”这个数据有多条的时候,把这些行合并起来。
<el-table :data="tableData" border :height="tableHeight" :span-method="objectSpanMethod">
<el-table-column label="序号" align="center" width>
<template slot-scope="scope">
{{scope.row.order}}
</template>
</el-table-column>
<el-table-column label="获奖名称" prop="awaName" align="center" width />
<el-table-column label="获奖等级" prop="awaLev" align="center" width />
<el-table-column label="奖金基数(元)" prop="awaBase" align="center" width>
<template slot-scope="scope">{{scope.row.awaBase | monFormat}}</template>
</el-table-column>
<el-table-column label="备注" prop="remark" align="center" width="600" />
<el-table-column label="操作" align="center" width="160">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-edit"
v-if="scope.row"
@click="toEdit(scope.row)"
>修改</el-button>
<el-popconfirm title="是否删除此条据?" @confirm="toDelete(scope.row,scope.$index)">
<el-button slot="reference" type="text" size="mini" icon="el-icon-close">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
// 合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex !== 2 && columnIndex !== 3) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
getSpanArr(data) {
this.spanArr = [];
this.pos = 0;
for (var i = 0; i < data.length; i++) {
if (i == 0) {
// 如果是第一条记录(即索引是0的时候),向数组中加入1
this.spanArr.push(1);
this.pos = 0;
} else {
if (data[i].awaName === data[i - 1].awaName) {
// 如果itemCode相等就累加,并且push 0
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
// 不相等push 1
this.spanArr.push(1);
this.pos = i;
}
}
}
},