vue使用table实现动态数据报表（行合并）

<template><div class="previewTable"><h2>***项目研发数据报告</h2><table id="previewTable" width="100%"><tr><th>项目名称</th><td colspan="6">{{ resultData.proName }}</td><th>课程级别</th><td>{{resultData.leval }}</td></tr><tr><th>课题类别</th><td colspan="4"></td><th>目标方向</th><td></td><th>承担部门</th><td></td></tr><tr><th>项目负责人</th><td colspan="3"></td><th>项目成员</th><td colspan="5"></td></tr><tr><th>委托</th><th colspan="3">方案</th><th>样品</th><th colspan="2">检验项目</th><th colspan="2">方案小结</th></tr><tr v-for="(item) in resultData.list" :key="item.id"><td v-if="item.commissionRowSpan != 0" :rowspan="item.commissionRowSpan">{{item.commission}}</td><td v-if="item.schemeRowSpan != 0" :rowspan="item.schemeRowSpan">{{item.scheme}}</td><td v-if="item.schemeNameRowSpan != 0" :rowspan="item.schemeNameRowSpan">{{item.schemeName}}</td><td><span class="link-class" >数据链接</span> 			 </td><td v-if="item.schemeNameRowSpan != 0" :rowspan="item.schemeNameRowSpan">{{item.num}}</td><td>{{item.inspectionItems}}</td><td><span class="link-class" >数据链接</span> 			 </td><td>***小结(小结名称)</td><td><span class="link-class" >数据链接</span> 			 </td></tr></table></div>
</template>
<script>
export default{data(){return{resultData:{proName:"xxx项目名称",leval:'高级',zhengshus:"安全员C证、PMP",list:[{id:0,commission:"委托1",scheme:"委托1方案1",schemeName:"委托1方案1(方案名称)",num:"5",name:"李四",inspectionItems:"直读检测成分",zhengshus:"安全员A证、操作员B证"},{id:0,commission:"委托1",scheme:"委托1方案1",schemeName:"委托1方案1(方案名称)",num:"5",name:"李四",inspectionItems:"金相组织",zhengshus:"安全员A证、操作员B证"},{id:0,commission:"委托1",scheme:"委托1方案1",schemeName:"委托1方案1(方案名称)",num:"5",name:"李四",inspectionItems:"晶粒度评级",zhengshus:"安全员A证、操作员B证"},{id:0,commission:"委托1",scheme:"委托1方案1",schemeName:"委托1方案1(方案名称)",num:"5",name:"李四",inspectionItems:"硬度测量",zhengshus:"安全员A证、操作员B证"},{id:0,commission:"委托1",scheme:"委托1方案2",schemeName:"委托1方案2(方案名称)",num:"5",name:"李四",inspectionItems:"直读检测成分",zhengshus:"安全员A证、操作员B证"},{id:1,commission:"委托1",scheme:"委托1方案2",schemeName:"委托1方案2(方案名称)",num:"5",name:"李四",inspectionItems:"金相组织",zhengshus:"安全员A证、操作员B证"},{id:2,commission:"委托1",scheme:"委托1方案3",schemeName:"委托1方案3(方案名称)",num:"5",name:"王五",inspectionItems:"晶粒度评级",zhengshus:"安全员A证、操作员B证"},{id:3,commission:"委托2",scheme:"委托2方案1",schemeName:"委托2方案1(方案名称)",num:"5",name:"何佳慧",inspectionItems:"硬度测量",zhengshus:"安全员A证、操作员B证"},{id:4,commission:"委托2",scheme:"委托2方案2",schemeName:"委托2方案2(方案名称)",num:"5",name:"王五",inspectionItems:"常温冲击",zhengshus:"安全员A证、操作员B证"},{id:5,commission:"委托2",scheme:"委托2方案3",schemeName:"委托2方案3(方案名称)",num:"5",name:"何佳慧",inspectionItems:"金相组织",zhengshus:"安全员A证、操作员B证"},{id:6,commission:"委托3",scheme:"委托3方案1",schemeName:"委托3方案1(方案名称)",num:"5",name:"何佳慧",inspectionItems:"常温冲击",zhengshus:"安全员A证、操作员B证"}]}}},created() {this.combineRow(['commission','scheme','schemeName'])},methods:{//  合并单元格combineRow(cols) {console.log("resultData.value",this.resultData.list)const tableData = this.resultData.listcols.forEach((key) => {for (let i = 0; i < tableData.length; i++) {const item = tableData[i]let count = 1for (let j = i + 1; j < tableData.length; j++) {// 如果是同一个值，往后递增if (item[key] === tableData[j][key]) {count++// 往后相同的值都设为空单元格tableData[j][`${key}RowSpan`] = 0// 只有同值第一个才设置合并的单元格数item[`${key}RowSpan`] = count// 所有都是为同一个值的情况// 如果到了尾部，则循环结束if (j === tableData.length - 1) {return}} else {// 指针跳转到下一个，从下一排开始i = j - 1count = 1tableData[j][`${key}RowSpan`] = countbreak}}}})this.resultData.list = tableData}}
}</script><style lang="scss" scoped>.previewTable{padding:10px;background-color: #fff;color: #000000;line-height: 40px;h2{text-align: center;}.link-class{color: red;}// 给表格设置边框table,td,th {text-align: center;border: 1px solid #ccc;border-collapse: collapse;}table td {// padding: 10px 30px;}}  </style>