SOURCE

var Main = {
    data() {
        return {
            tableData: [],
            fakeData: {
                train: [
                    { v: '0', v0: '104(30.487%)', v1: '24(7.038%)' },
                    { v: '1', v0: '9(2.675%)', v1: '204(59.965)' },
                    { v: '2', v0: '24(11.675%)', v1: '2(2.965)' }
                ],
                test: [
                    { v: '0', v0: '74(43.4561%)', v1: '10(4.3860%)' },
                    { v: '1', v0: '11(4.8246%)', v1: '133(58.3333%)' }
                ]
            },
            listTotal: 0, // 训练数据集和测试数据集合起来的总数量   用于第一个column的所有row合并
            trainTotal: 0, // 训练数据集数量  用于第二个column的训练数据集的row合并
            testTotal: 0,
            testStartMergeIndex: 0
        };
    },
    mounted() {
        const { train, test } = this.fakeData
        train[0].rowHeader_1 = '真实值'
        train[0].rowHeader_2 = '训练数据集'

        test[0].rowHeader_1 = '测试数据集'
        test[0].rowHeader_2 = '哈哈哈哈哈'
        this.tableData = [...train, ...test]

        this.listTotal = this.tableData.length
        this.trainTotal = train.length
        this.testTotal = test.length
        this.testStartMergeIndex = train.length + 1
    },
    methods: {
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0) {
                    return [this.listTotal , 1]
                } else {
                    return [0, 0]
                }
            }

            if (columnIndex === 1) {
                if (rowIndex === 0) {
                    return [this.trainTotal, 1]
                } else if (rowIndex === this.trainTotal) {
                    return [this.testTotal, 1]
                } else {
                    return [0, 0]
                }
            }
        },
    }
};




var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>

<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script> -->
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<template>
  <div>
    <el-table
      :data="tableData"
      border
      :span-method="arraySpanMethod"
      :cell-style="{'text-align':'center'}"
      style="width: 100%">
      <el-table-column width="200" >
        <div slot-scope="scope" class="type">
          {{ scope.row.rowHeader_1 }}
        </div>
      </el-table-column>
      <el-table-column>
        <div slot-scope="scope" class="type">
          {{ scope.row.rowHeader_2 }}
        </div>
      </el-table-column>
      <el-table-column prop="amount1" align="center" label="预测值">
        <el-table-column prop="v" label="空白" align="center" width="80">

        </el-table-column>
        <el-table-column prop="v0" :label="`${0}`" align="center">

        </el-table-column>
        <el-table-column prop="v1" :label="`${1}`" align="center">

        </el-table-column>
      </el-table-column>

    </el-table>
  </div>
</template>
</div>

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");