原生表格合并

原生表格合并

<table border="1" width="600" height="230" cellspacing="0">
    <thead>
      <tr style="color: #B3B3B3;">
        <td>方案计划</td>
        <td>条款代码</td>
        <td>条款名称</td>
        <td>责任代码</td>
        <td>责任名称</td>
      </tr>
    </thead>
    <tr v-for="item in dataList">
      <td v-if="item.show0" :rowspan="item.num0" style="width:5.5%;">{{item.fajh}}</td>
      <td v-if="item.show" :rowspan="item.num" style="width:10%;">{{item.tkdm}}</td>
      <td v-if="item.show" :rowspan="item.num" style="width:7%;">{{item.tkmc}}</td>
      <td style="width:7%;">{{item.zrdm}}</td>
      <td style="width:5%;">{{item.zrmc}}</td>
    </tr>
  </table>

数据源

dataList: [
        {
          fajh: "方案计划",
          tkdm: "条款代码1",
          tkmc: "条款名称1",
          zrdm: "责任代码1",
          zrmc: "责任名称1"
        },
        {
          fajh: "方案计划",
          tkdm: "条款代码1",
          tkmc: "条款名称1",
          zrdm: "责任代码2",
          zrmc: "责任名称2"
        },
        {
          fajh: "方案计划",
          tkdm: "条款代码2",
          tkmc: "条款名称1",
          zrdm: "责任代码3",
          zrmc: "责任名称3"
        },
        {
          fajh: "方案计划",
          tkdm: "条款代码2",
          tkmc: "条款名称2",
          zrdm: "责任代码1",
          zrmc: "责任名称1"
        },
        {
          fajh: "方案计划",
          tkdm: "条款代码2",
          tkmc: "条款名称2",
          zrdm: "责任代码1",
          zrmc: "责任名称1"
        },
        {
          fajh: "方案计划",
          tkdm: "条款代码2",
          tkmc: "条款名称2",
          zrdm: "责任代码2",
          zrmc: "责任名称2"
        },
        {
          fajh: "方案计划2",
          tkdm: "条款代码1",
          tkmc: "条款名称1",
          zrdm: "责任代码1",
          zrmc: "责任名称1"
        },
        {
          fajh: "方案计划2",
          tkdm: "条款代码1",
          tkmc: "条款名称1",
          zrdm: "责任代码2",
          zrmc: "责任名称2"
        },
        {
          fajh: "方案计划2",
          tkdm: "条款代码1",
          tkmc: "条款名称1",
          zrdm: "责任代码3",
          zrmc: "责任名称3"
        },
        {
          fajh: "方案计划3",
          tkdm: "条款代码2",
          tkmc: "条款名称2",
          zrdm: "责任代码1",
          zrmc: "责任名称1"
        },
        {
          fajh: "方案计划2",
          tkdm: "条款代码3",
          tkmc: "条款名称3",
          zrdm: "责任代码1",
          zrmc: "责任名称1"
        },
        {
          fajh: "方案计划2",
          tkdm: "条款代码3",
          tkmc: "条款名称3",
          zrdm: "责任代码2",
          zrmc: "责任名称2"
        },
        {
          fajh: "方案计划2",
          tkdm: "条款代码3",
          tkmc: "条款名称3",
          zrdm: "责任代码3",
          zrmc: "责任名称3"
        },
      ],

如果是扁平的数据格式，直接调用合并方法，如果是嵌套的数据格式需要先处理成扁平格式

for(let i = 0 ;i < this.dataList1.length;i++){
      for(let j = 0 ; j < this.dataList1[i].tkdmList.length; j++){
        let aa = {}
        for(let m = 0 ; m  < this.dataList1[i].tkdmList[j].zrdm.length ;m++){
          let obj = {}
          obj.zrdm = this.dataList1[i].tkdmList[j].zrdm[m].zrdm;
          obj.zrmc = this.dataList1[i].tkdmList[j].zrdm[m].zrmc;
          obj.tkmc = this.dataList1[i].tkdmList[j].tkmc;
          obj.tkdm  = this.dataList1[i].tkdmList[j].tkdm;
          obj.fajh  = this.dataList1[i].fajh;
          arr.push(obj)
        }
      }
    }

js合并方法

function combine(data1) { //合并单元格方法
		for(let i = 0; i < data1.length; i++) {
      data1[i].show0 = true;
			data1[i].num0 = 1;
			data1[i].show = true;
			data1[i].num = 1;
			data1[i].col = 1;
		}
		var ob = {};
		for(let i = 0; i < data1.length - 1; i++) {
			var a = data1[i].tkdm;
      var aa = data1[i].fajh;
			// if(ob[a] == undefined) {
				ob[a] = 1;
        ob[aa] = 1;
			// }
			for(let l = i + 1; l < data1.length; l++) {
				var b = data1[l].tkdm;
        var bb = data1[l].fajh;
        if(a == b) {
					data1[l].show = false;
					ob[a]++;
					data1[i].num = ob[a];
				}else{
          ob[a] =1
          break
        }
			}
      for(let l = i + 1; l < data1.length; l++) {
        var bb = data1[l].fajh;
				if(aa == bb) {
					data1[l].show0 = false;
					ob[aa]++;
					data1[i].num0 = ob[aa];
				}else{
          ob[aa] =1
          break
        }
			}
		}
		return data1
	}