element（table）合并相同数据的列_element table合并列

element（table）合并相同数据的列（自看）

    <el-table
              size="mini"
              :data="electricityList"
              style="width: 100%;height: auto;"
              :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
              height="240"
              :summary-method="getSummaries"
              show-summary
              :span-method="objectSpanMethod"
              :row-class-name="rowClassName"
              border
              ref="tb"
            >
            <el-table-column
                label="序号"
                prop="energyNoid"
                width="60px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="电表编号/名称"
                prop="energyNo"
              >
              </el-table-column>
              <el-table-column
                label="电费单价(元/度)"
                prop="unitPrice"
              >
              </el-table-column>
              <el-table-column
                label="上次抄表时间"
                prop="lastWriterTime"
              >
                <template slot-scope="scope">
                  {{scope.row.lastWriterTime |timeReplace}}
                </template>
              </el-table-column>
              <el-table-column
                label="上次抄表人"
                prop="lastUserName"
              >
              </el-table-column>
              <el-table-column
                label="上次读数"
                prop="lastNumbers"
              >
              </el-table-column>
              <el-table-column
                label="本次抄表时间"
                prop="thisWriterTime"
              >
                <template slot-scope="scope">
                  {{scope.row.thisWriterTime |timeReplace}}
                </template>
              </el-table-column>
              <el-table-column
                label="本次抄表人"
                prop="thisUserName"
              >
              </el-table-column>
              <el-table-column
                label="最新读数"
                prop="writerNumbers"
              >
              </el-table-column>
              <el-table-column
                label="用量"
                prop="totalUsage"
              >
              </el-table-column>
              <el-table-column
                label="费用"
                prop="totalPrice"
              >
              </el-table-column>
            </el-table>
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

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // data ：需要修改的列数和列的属性 第一列从0开始
      const data = [
        { columnIndex: 3, value: 'lastWriterTime' },
        { columnIndex: 4, value: 'lastUserName' },
        { columnIndex: 6, value: 'thisWriterTime' },
        { columnIndex: 7, value: 'thisUserName' }
      ];
      for (let index = 0; index < data.length; index++) {
        if (columnIndex === data[index].columnIndex) {
          const _row = this.filterData(this.electricityList, data[index].value)[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
    },
    // 根据是否有相同数据返回一个如[2,0,3,0,0]格式的数组(公共的)
    filterData(arr, value) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          // name 修改
          if (item[value] === arr[index - 1][value]) {
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return spanOneArr
    }
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