话不多说,直接上代码:
<table style="width: 99%;borderTop:1px solid #000;borderLeft:1px solid #000">
<colgroup>
<col width='3%'>
<col width='8%'>
<col width='8%'>
<col width='8%'>
<col width='7%'>
<col width='8%'>
<col width='10'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='8%'>
</colgroup>
<thead style="height: 30px;font-weight: bold;" id="header">
<tr>
<th >序号</th>
<th >合同号</th>
<th >计划单号</th>
<th >车号</th>
<th >产线</th>
<th >牌号</th>
<th >规格</th>
<th >件数</th>
<th >拟报结算量</th>
<th >结算基准价</th>
<th >下浮</th>
<th >钢种加价</th>
<th >规格加价</th>
<th >其他加价</th>
<th >拟报结算价</th>
<th >金额</th>
</tr>
</thead>
</table>
<!-- 中间表格 -->
<div style="width:100%;height:500px;overflow:auto">
<table border="1" style="width:100%;borderTop:0">
<colgroup>
<col width='3%'>
<col width='8%'>
<col width='8%'>
<col width='8%'>
<col width='7%'>
<col width='8%'>
<col width='10'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='8%'>
</colgroup>
<tbody id="tbody">
<tr v-for="(item) in lineData" :key="item.id" style="height: 25px">
<td>{{ item.index }}</td>
<td>{{ item.contract_no }}</td>
<td>{{ item.plan_no }}</td>
<td>{{ item.car_no }}</td>
<td>{{ item.product_line }}</td>
<td>{{ item.steel_no }}</td>
<td>{{ item.spec }}</td>
<td>{{ item.number }}</td>
<td>{{ item.accounts_weight }}</td>
<td @click="pageto(item.online_amount,item.price_id)" :class="{'style':item.online_amount !== null && item.index !== '合计'}">{{ item.online_amount }}</td>
<td>{{ item.low }}</td>
<td>{{ item.steel_amount }}</td>
<td>{{ item.spec_amount }}</td>
<td>{{ item.other_amount }}</td>
<td @click="pageto(item.accounts_amount,item.price_id)" :class="{'style':item.accounts_amount !== null && item.index !== '合计'}">{{ item.accounts_amount }}</td>
<td>{{ item.amount }}</td>
</tr>
</tbody>
</table>
</div>
<!-- 尾部表格 -->
<table style="width: 99%;borderTop:1px solid #000;borderLeft:1px solid #000">
<colgroup>
<col width='3%'>
<col width='8%'>
<col width='8%'>
<col width='8%'>
<col width='7%'>
<col width='8%'>
<col width='10'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='5%'>
<col width='8%'>
</colgroup>
<thead style="height: 30px;font-weight: bold;" id="header">
<tr>
<th>合计</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>{{ accounts_weight }}</th>
<th>{{ online_amount }}</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>{{ accounts_amount }}</th>
<th>{{ amount }}</th>
</tr>
</thead>
</table>