引入 table-merge

src/App5.vue

@@ -6,7 +6,7 @@
     <div class="box">
       <p>从第一行和第二例开始合并</p>
       <pre>tableMergeElement(data, { range: { row: 1, col: 2 } })</pre>
-      <el-table :data="data1" :span-method="tableMergeElement(data1, { range: { row: [0, 11] } })" border>
+      <el-table :data="data1" :span-method="tableMergeElement(data1, { range: { row: [0, 11],col:[0,14] } })" border>
         <!--        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />-->
         <el-table-column prop="id" label="序号" width="70" align=‘center’></el-table-column>
         <el-table-column prop="projectName" label="项目名称" align=‘center’></el-table-column>

src/App6.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <el-table
+        :data="tableData"
+        :span-method="arraySpanMethod"
+        border
+        style="width: 100%;visibility: collapse">
+      <el-table-column
+          prop="id"
+          label="ID"
+          width="180">
+      </el-table-column>
+      <el-table-column
+          prop="name"
+          label="姓名">
+      </el-table-column>
+      <el-table-column
+          prop="amount1"
+          sortable
+          label="数值 1">
+      </el-table-column>
+      <el-table-column
+          prop="amount2"
+          sortable
+          label="数值 2">
+      </el-table-column>
+      <el-table-column
+          prop="amount3"
+          sortable
+          label="数值 3">
+      </el-table-column>
+    </el-table>
+
+    <el-table
+        :data="tableData"
+        :span-method="objectSpanMethod"
+        border
+        style="width: 100%; margin-top: 20px">
+      <el-table-column
+          prop="id"
+          label="ID"
+          width="180">
+      </el-table-column>
+      <el-table-column
+          prop="name"
+          label="姓名">
+      </el-table-column>
+      <el-table-column
+          prop="amount1"
+          label="数值 1（元）">
+      </el-table-column>
+      <el-table-column
+          prop="amount2"
+          label="数值 2（元）">
+      </el-table-column>
+      <el-table-column
+          prop="amount3"
+          label="数值 3（元）">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        id: '12987122',
+        name: '王小虎',
+        amount1: '234',
+        amount2: '3.2',
+        amount3: 10
+      }, {
+        id: '12987123',
+        name: '王小虎',
+        amount1: '165',
+        amount2: '4.43',
+        amount3: 12
+      }, {
+        id: '12987124',
+        name: '王小虎',
+        amount1: '324',
+        amount2: '1.9',
+        amount3: 9
+      }, {
+        id: '12987125',
+        name: '王小虎',
+        amount1: '621',
+        amount2: '2.2',
+        amount3: 17
+      }, {
+        id: '12987126',
+        name: '王小虎',
+        amount1: '539',
+        amount2: '4.1',
+        amount3: 15
+      },{
+        id: '12987122',
+        name: '王小虎',
+        amount1: '234',
+        amount2: '3.2',
+        amount3: 10
+      }, {
+        id: '12987123',
+        name: '王小虎',
+        amount1: '165',
+        amount2: '4.43',
+        amount3: 12
+      }, {
+        id: '12987124',
+        name: '王小虎',
+        amount1: '324',
+        amount2: '1.9',
+        amount3: 9
+      }, {
+        id: '12987125',
+        name: '王小虎',
+        amount1: '621',
+        amount2: '2.2',
+        amount3: 17
+      }, {
+        id: '12987126',
+        name: '王小虎',
+        amount1: '539',
+        amount2: '4.1',
+        amount3: 15
+      }]
+    };
+  },
+  methods: {
+    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex % 2 === 0) {
+        if (columnIndex === 0) {
+          return [1, 2];
+        } else if (columnIndex === 1) {
+          return [0, 0];
+        }
+      }
+    },
+
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        if (rowIndex % 2 === 0) {
+          return {
+            rowspan: 2,
+            colspan: 1
+          };
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+    }
+  }
+};
+</script>

src/main.js

@@ -12,10 +12,11 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import App from './Vue5.vue';
 import App5 from "@/App5";
+import App6 from "@/App6";
 
 Vue.use(ElementUI);
 
 new Vue({
   el: '#app',
-  render: h => h(App5)
+  render: h => h(App6)
 });