代码如下:
<div id="wrap">
<el-table
:data="tableData"
style="width:200px"
:border="true"
:span-method="objectSpanMethod"
>
<el-table-column
prop="month"
label="月份"
>
</el-table-column>
<el-table-column
prop="year"
label="年份"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{"attendTrainingPersonnel":"全区区管干部必学,鼓励其他干部选学","month":4,"teacherMisassignments":"中央党校(国家行政学院)李志勇","title":"关于国家治理现代化的几个问题","typeName":"十九届四中全会精神轮训","year":2020},{"attendTrainingPersonnel":"全区区管干部必学,鼓励其他干部选学","month":4,"teacherMisassignments":"中央党校(国家行政学院)李志勇","title":"关于国家治理现代化的几个问题","typeName":"十九届四中全会精神轮训","year":2020}]
}
},
mounted(){
let tableData = this.tableData;
let tempDetailslistMonth = {};
tableData.map(item => {
if(tempDetailslistMonth[item.month]){
tempDetailslistMonth[item.month]++;
item.showMonth = false;
return item;
}
else{
tempDetailslistMonth[item.month] = 1;
item.showMonth = true;
return item;
}
});
this.tempDetailslistMonth = tempDetailslistMonth;
},
methods : {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//rowIndex:行 columnIndex:列
let {tableData} = this;
if(columnIndex == 0){ //只对第一列的数据(月份)可能进行合并列
// 如果这个月已经展示了,就不要再展示了
if(row.showMonth){
return {
rowspan : this.tempDetailslistMonth[tableData[rowIndex].month],
colspan: 1
}
}
else{
return {
rowspan : 0,
colspan: 0
}
}
}
}
}
}
</script>