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":"全區(qū)區(qū)管干部必學(xué)，鼓勵(lì)其他干部選學(xué)","month":4,"teacherMisassignments":"中央黨校（國(guó)家行政學(xué)院）李志勇","title":"關(guān)于國(guó)家治理現(xiàn)代化的幾個(gè)問(wèn)題","typeName":"十九屆四中全會(huì)精神輪訓(xùn)","year":2020},{"attendTrainingPersonnel":"全區(qū)區(qū)管干部必學(xué)，鼓勵(lì)其他干部選學(xué)","month":4,"teacherMisassignments":"中央黨校（國(guó)家行政學(xué)院）李志勇","title":"關(guān)于國(guó)家治理現(xiàn)代化的幾個(gè)問(wèn)題","typeName":"十九屆四中全會(huì)精神輪訓(xùn)","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){   //只對(duì)第一列的數(shù)據(jù)（月份）可能進(jìn)行合并列
                    // 如果這個(gè)月已經(jīng)展示了，就不要再展示了
                    if(row.showMonth){
                        return {
                            rowspan : this.tempDetailslistMonth[tableData[rowIndex].month],
                            colspan: 1
                        }
                    }
                    else{
                        return {
                            rowspan : 0,
                            colspan: 0
                        }
                    }
                }
            }
        }
    }
</script>