vue 动态合并单元格、并添加小计合计功能

1、效果图

2、后台返回数据格式（平铺式）

3、后台返回数据后，整理所需要展示的属性存储到（items）数组内

1var obj = {
2              "id": curItems[i].id,
3              "feeName": curItems[i].feeName,
4              "projectName": curItems[i].projectName,
5              "projectDetailsName": curItems[i].projectDetailsName,
6              "zbMoney": curItems[i].zbMoney,
7              "qyMoney": curItems[i].qyMoney,
8              "projectId": curItems[i].projectId,
9              "instructions": curItems[i].instructions,
10              "contentText": curItems[i].contentText,
11              "measureText": curItems[i].measureText
12            }
13            if (curItems[i].projectDetailsName == '合计:') {
14              obj.projectName = curItems[i - 1].projectName
15            }
16            _self.items.push(obj)
17          }
18        

4、调用initData(调用后会删除需要合并的字段内容)

  _self.initData()

1 initData(){
2        const that = this;
3        let arry = [];
4        let itemsCopy = JSON.parse(JSON.stringify(that.items));
5        for (let i = 0; i < itemsCopy.length; i++) {
6          for (let j = (i + 1); j < itemsCopy.length; j++) {
7            for (let h in itemsCopy[i]) {
8              for (let k in itemsCopy[j]) {
9                if (k == 'feeName' || k == 'projectName' || k == 'projectDetailsName') {
10                  if (itemsCopy[j][k] != '小计:' && itemsCopy[j][k] != '合计:') {
11                    if (h === k && itemsCopy[i][h] === itemsCopy[j][k]) {
12                      delete  itemsCopy[j][k]
13                    }
14                  }
15                }
16              }
17            }
18          }
19          arry.push(itemsCopy[i]);
20        }
21        that.dataT = arry;
22      },

4、合并行数的代码

1 rowSpanF: function (key, val) {
2        const that = this;
3        let num = 0;
4        for (let i in that.items) {
5          for (let j in that.items[i]) {
6            if (j == 'feeName' || j == 'projectName' || j == 'projectDetailsName') {
7              if (key === j && val === that.items[i][j]) {
8                if (that.items[i][j] == '小计:' || that.items[i][j] == '合计:') {
9                  return
10                }
11                num++;
12              }
13            }
14          }
15        }
16
17        if(num==0){
18            return 1
19        }
20        return num;
21      },

5、html

代码如下：

1<tr v-for="(item,$index) in dataT">　　   　　　　
2          <td
3            v-if="key!='id'&&(key=='feeName'||key=='projectName'||key=='projectDetailsName'||key=='zbMoney'||key=='qyMoney'||key=='projectId'||key=='instructions'||key=='contentText'||key=='measureText')"
4            v-for="(val,key) in item" :rowspan="rowSpanF(key,val)">
5            <span v-if="key=='feeName'">{{val}}</span>
6            <span v-if="key=='projectName'">{{val}}</span>
7            <span v-if="key=='projectDetailsName'">{{val}}</span>
8            <span v-if="key=='zbMoney'">{{val}}</span>
9            <span v-if="key=='qyMoney'">{{val}}</span>
10            <span v-if="key=='projectId'">{{item['zbMoney']+item['qyMoney']}}</span>
11            <span v-if="key=='instructions'">{{val}} </span>
12            <span v-if="key=='contentText'">{{val}}</span>
13            <span v-if="key=='measureText'">{{val}}</span>
14          </td>
15          <td>
16            <div v-if="item.projectDetailsName!='小计:'&&item.projectDetailsName!='合计:'">
17              <!--<span @click="toAdd(allItems[$index])"><a>添加</a></span>-->
18              <span @click="toEdit(item)"><a>编辑</a></span>
19              <span>
20                  <a-popconfirm
21                    title="确定删除吗?"
22                    okText="确定"
23                    cancelText="取消"
24                    @confirm="() => deletArr(item)">
25                       <a href="javascript:;">删除</a>
26                  </a-popconfirm>
27              </span>
28            </div>
29          </td>　　　　
30        </tr>

 注意事项：
后台返回数据必须符合该条件