el-table 行合并_el-table单元格行合并

el-table 行合并

重复的太多 故此 合并下（適用于無關聯性的行合併）

<template>
  <div>
    <el-table
      :data="data"
      style="width: 100%"
      :header-cell-style="TableHead"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        label="費用"
        prop="費用"
        fixed
      />
      <el-table-column
        label="因子"
        prop="因子"
        fixed
        width="140"
      />
      <el-table-column
        label="影響會科"
        prop="影響會科"
        fixed
        width="150"
      />
      <el-table-column
        label="影響週期"
        fixed
        prop="影響週期"
        width="120"
      />
      <el-table-column
        label="計算方式"
        fixed
        prop="計算方式"
        align="center"
      />
      <el-table-column
        label="單位"
        fixed
        prop="單位"
        align="center"
      />
      <el-table-column
        fixed
        label="owner"
        align="center"
        prop="owner"
      />
      <el-table-column
        v-for="(item,index) in tableColumn"
        :key="index"
        :label="item"
        :prop="item"
        align="center"
        width="120"
      />
    </el-table>
  </div>
</template>
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

JS

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex <= 2) {
        if (!this.data[rowIndex]) {
          // 1列 1行
          return {
            rowspan: 1,
            colspan: 1
          }
        }
        // console.log(this.data[rowIndex].contractNo);
        if (this.data[rowIndex - 1]) {
          if (this.data[rowIndex][column.property] === this.data[rowIndex - 1][column.property]) {
            // 0列 0 行
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
        if (this.data[rowIndex + 1]) {
          if (this.data[rowIndex][column.property] === this.data[rowIndex + 1][column.property]) {
            let conutRowSpan = 1
            let countIndex = 1
            var len = this.data.length
            // 往下遍历 重复的列有几个 合并几个
            for (var i = rowIndex; i <= len; i++) { // 遍历数组
              if (this.data[rowIndex + countIndex] && this.data[rowIndex][column.property] === this.data[rowIndex + countIndex][column.property]) {
                countIndex += 1
                conutRowSpan += 1
              } else {
                break
              }
            }
            // 2列1行
            return {
              rowspan: conutRowSpan,
              colspan: 1
            }
          }
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    }
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