
<el-table :data="tableData" border style="width: 100%; margin-top: 20px" :span-method="mergeCell">
<el-table-column prop="projectName" label="项目名称" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="amount1" label="数值 1(元)">
</el-table-column>
<el-table-column prop="amount2" label="数值 2(元)">
</el-table-column>
<el-table-column prop="amount3" label="数值 3(元)">
</el-table-column>
</el-table>
需求:合并表格第一列中,项目名称相同的单元列
// 合并 项目名称 相同的列单元格
mergeCell ({ row, column, rowIndex, columnIndex }) {
let spanOneArr = []
let concatOne = 0
this.tableData.map((item, index) => {
if (index === 0) {
spanOneArr.push(1)
} else {
//第一列需合并相同内容的判断条件
if (item.projectName === this.tableData[index - 1].projectName) {
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
}
}
})
// 需要合并的列号 第1列 不可改
if (columnIndex === 0) {
const _row = spanOneArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},