element ui 表格合并列
显示效果:
代码
<el-table
:data="tableData"
style="width: 100%"
:span-method="objectSpanMethod"
border
class="reset-el-table"
>
<el-table-column prop="sentenceName" label="" width="180">
</el-table-column>
<el-table-column prop="ways" label="练习方式" width="180">
</el-table-column>
<el-table-column prop="count" label="练习次数"> </el-table-column>
<el-table-column label="最近评测分">
<template slot-scope="scope">
{{ Math.round(scope.row.latelyScore) }}
</template>
</el-table-column>
<el-table-column label="最高/最低评测分">
<template slot-scope="scope">
{{ Math.round(scope.row.maxScore) }} /
{{ Math.round(scope.row.minScore) }}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="text"
@click="checkSentence(scope.row)"
size="small"
>查看趋势</el-button
>
</template>
</el-table-column>
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if(!this.tableData || this.tableData.length<=2){
return
}
if (columnIndex === 0&& this.tableData[rowIndex].sentenceId) {
if (
rowIndex < this.tableData.length - 1 &&
this.tableData[rowIndex].sentenceId === this.tableData[rowIndex + 1].sentenceId
) {//如果两项的sentenceId一样的话
return {
rowspan: 2, //合并一行
colspan: 1, //合并两列
}
} else if (rowIndex!==0&&
this.tableData[rowIndex - 1].sentenceId === this.tableData[rowIndex].sentenceId
) {
return {
rowspan: 0,
colspan: 0,
}
}
}
},