el-table合并单元格-会超出表格内容问题

需求，合并第一行，前三列

<template>
  <div>
    <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: '测试1',
        amount3: "测试2"
      }, {
        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: {
    //需求，合并第一行，前三列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  
      if (rowIndex === 0 && columnIndex === 0) {
        return {
          rowspan: 1, //第0行
          colspan: 3  //第0列
        };

      }
      if (rowIndex === 0 && columnIndex === 1) {
        return {
          rowspan: 0, //第0行
          colspan: 0  //第1列
        };

      }
      if (rowIndex === 0 && columnIndex === 2) {
        return {
          rowspan: 0, //第0行
          colspan: 0  //第2列
        };

      }
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

关键代码

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  
      if (rowIndex === 0 && columnIndex === 0) {
        return {
          rowspan: 1, //第0行
          colspan: 3  //第0列
        };

      }
      if (rowIndex === 0 && columnIndex === 1) {
        return {
          rowspan: 0, //第0行
          colspan: 0  //第1列
        };

      }
      if (rowIndex === 0 && columnIndex === 2) {
        return {
          rowspan: 0, //第0行
          colspan: 0  //第2列
        };

      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

等同于

if (rowIndex === 0) {
        if (columnIndex === 0) {
          return {
            rowspan: 1, //第一行
            colspan: 3  //合并三列
          };
        } else if (columnIndex < 3) {
          //代表，第一行第二列，第一行第三列   需要处理
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

出现超出行的表格问题，是因为你合并了代码，就需要把被合并放表格进行处理