1.需求：合并第5行，6行，7行的前6列
效果图：
使用table编写
<table class="detail-list" border="1">
<tr>
<th>
<div>序号</div>
<div>No.</div>
</th>
<th>
<div>项目号</div>
<div>Project No.</div>
</th>
<th>名称 Description</th>
<th>
<div>规格型号</div>
<div>Spec.</div>
</th>
<th>
<div>数量</div>
<div>Qty.</div>
</th>
<th>
<div>单价</div>
<div>Unit Price</div>
</th>
<th>
<div>总价</div>
<div>Total Price</div>
</th>
</tr>
<tr v-for="(item, index) in dataList" :key="index">
<td class="col">{{item.a}}</td>
<td class="col-2">{{item.a}}</td>
<td class="col">{{item.a}}</td>
<td class="col">{{item.a}}</td>
<td class="col">{{item.a}}</td>
<td class="col txt-right">{{item.a}}</td>
<td class="col txt-right">{{item.a}}</td>
</tr>
<tr>
<td colspan="6" class="tit txt-right bold">
<div>不含税总价：</div>
<div>Total Price Without Tax:</div>
</td>
<td class="bold">{{'$1111'}}</td>
</tr>
<tr>
<td colspan="6" class="tit txt-right bold">
<div>税率：</div>
<div>Tax Rate:</div>
</td>
<td>{{'1111'}}</td>
</tr>
<tr>
<td colspan="6" class="tit txt-right bold">
<div>含税总价：</div>
<div>Total Price Including Tax:</div>
</td>
<td class="bold">{{'$1111'}}</td>
</tr>
</table>
css：
.detail-list {
width: 100%;
border-collapse: collapse;
text-align: center;
font-size: 13px;
th {
font-size: 14px;
div {
padding: 2px 0;
}
}
th, td {
padding: 10px;
}
.col {
width: calc(100% / 8);
}
.col-2 {
width: calc(100% / 8 * 2);
}
.tit {
padding: 10px;
font-size: 14px;
div {
padding: 2px 0;
}
}
.bold {
font-weight: bold;
}
.txt-right {
text-align: right;
}
}
使用element ui table表格编写
html 省略哈。可参考官网上的标签来写
对应js 方法：
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 4) {
return [1, 6];
} else if (rowIndex === 5) {
return [1, 6];
} else if (rowIndex === 6) {
return [1, 6];
} else {
return [1, 1]; //
}
},
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79322.html
