vue原生table合并单元格
<table border="1"><thead><tr><th>学习</th><th>名称</th><th>班级</th><th>年级</th></tr></thead><tbody id="tablie" ><tr v-for="(item,index) in this.tabdata" :key="index" ><td>{{item.groupName}}</td><td>{{item.objectName}}</td><td>{{item.so2Value}}</td><td>{{item.fuValue}}</td></tr></tbody></table>
请求到数据直接调用methods里的方法改变dom，需要用到this.nextTick这个方法；this.nextTick这个方法； this.nextTick这个方法；this.nextTick(()=>{
//传入dom定义的id名字，还有请求到数据的条数；
that.uniteTable(‘tablie’,that.tabdata.length);
})
methods: {uniteTable(tableId,colLength) {//表格ID，表格列数var tb=document.getElementById(tableId);tb.style.display='';var i = 0;var j = 0;var rowCount = tb.rows.length; // 行数var colCount = tb.rows[0].cells.length; // 列数var obj1 = null;var obj2 = null;// 为每个单元格命名for (i = 0; i < rowCount; i++) {for (j = 0; j < colCount; j++) {tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();// console.log(tb.rows[i].cells[j].id,'tb.rows[i].cells[j].id')}}// 合并行for (i = 0; i < colCount; i++) {if (i == colLength) break;obj1 = document.getElementById("tb__0_" + i.toString())for (j = 1; j < rowCount; j++) {obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString());if (obj1.innerText == obj2.innerText && ((obj2.innerText != "" || obj1.innerText != "")&&(obj1.innerText != "-"|| obj2.innerText != "-"))) {obj1.rowSpan++;obj2.parentNode.removeChild(obj2);} else {obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());}}}// 合并列for (i = 0; i < rowCount; i++) {colCount = tb.rows[i].cells.length;obj1 = document.getElementById(tb.rows[i].cells[0].id);for (j = 1; j < colCount; j++) {if (j >= colLength) break;if (obj1.colSpan >= colLength) break;obj2 = document.getElementById(tb.rows[i].cells[j].id);if (obj1.innerText == obj2.innerText && ((obj2.innerText != "" || obj1.innerText != "")&&(obj1.innerText != "-"|| obj2.innerText != "-"))) {obj1.colSpan++;obj2.parentNode.removeChild(obj2);j = j - 1;}else {obj1 = obj2;j = j + obj1.rowSpan;}}}},}
