elementui table 固定列_elementUI Table组件 如何设置合并列

效果图：

image.png

代码如下：

:data="tableData"

style="width:200px"

:border="true"

:span-method="objectSpanMethod"

>

prop="month"

label="月份"

>

prop="year"

label="年份"

>

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

}

}

}

}

}

}