el-table,列表合并,根据名称列名称相同的品名将其它列值相同的进行合并

el-table,列表合并,根据名称列名称相同的品名将其它列值相同的进行合并,并且不能跨品名合并

如图

用到el-table合并行的方法合并

    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.property === "materielName") {
        //合并商品名
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      // 其它列根据商品名进行合并
      if (column.property === "pieceUnit" || column.property === "pieceNum") {
        const _row = this.spanNewArr[rowIndex] ? this.spanNewArr[rowIndex] : 0;
        return {
          rowspan: _row,
          colspan: _row > 0 ? 1 : 0,
        };
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

   // 获取合并行
 getSpanArr(data) {
    this.spanArr = []; //第2列合并
    let pos = 0; //index
    for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      // 如果是第一条记录（即索引是0的时候），向数组中加入１
      this.spanArr.push(1); //第二列合并
    } else {
      //第二列合并
      if (data[i].materielName === data[i - 1].materielName) {
        // 如果orgUnitId相等就累加，并且push 0
        this.spanArr[pos] += 1;
        this.spanArr.push(0);
      } else {
        // 不相等push 1
        this.spanArr.push(1);
        pos = i;
      }
    }
  }

  this.spanNewArr = {};
  let tip = 0;
  this.spanArr.forEach((item, index) => {
    for (let i = 0; i < item; i++) {
      const row = data[i + index];
      const lastrow = data[i + index - 1];
      if (i == 0) {
        this.spanNewArr[i + index] = 1;
        tip = i + index;
      } else {
        if (
          row.pieceUnit == lastrow.pieceUnit ||
          row.pieceNum == lastrow.pieceNum
        ) {
          this.spanNewArr[tip] = this.spanNewArr[tip]
            ? this.spanNewArr[tip]
            : 1;
          this.spanNewArr[tip] += 1;
        } else {
          this.spanNewArr[i + index] = 1;
          tip = i + index;
        }
      }
    }
  });

  console.log(this.spanNewArr);
},
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

//然后在初始值的时候调取方法
  this.getSpanArr(this.tableData);

1
2
3
4

手动分割------------------------------------------------------

方法二:一个全新的demo,更简单一些

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

分割----------------------------------------------

如果仅仅是一列需要合并

  // 合并行
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        //第2列合并
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 获取合并行
    getSpanArr(data) {
      this.spanArr = []; //第2列合并
      let pos = 0;
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          this.spanArr.push(1); //第二列合并
        } else {
          //第二列合并
          if (data[i].lossType === data[i - 1].lossType) {
            // 如果orgUnitId相等就累加，并且push 0
            this.spanArr[pos] += 1;
            this.spanArr.push(0);
          } else {
            // 不相等push 1
            this.spanArr.push(1);
            pos = i;
          }
        }
      }
    },
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

然后在列表里面调取

    getList() {
      this.getSpanArr(this.tableData);
    },
1
2
3