elementUI Table组件 如何设置合并列

image.png

代码如下：

    <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>