结算表格滚动修改
This commit is contained in:
parent
c0ab280ba1
commit
b48471f9d7
|
|
@ -116,17 +116,17 @@
|
|||
</div> -->
|
||||
|
||||
<div style="margin: 20px 0">
|
||||
<!-- 基本信息表格 -->
|
||||
<table
|
||||
border="1"
|
||||
cellspacing="0"
|
||||
cellpadding="6"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 20px;"
|
||||
>
|
||||
<!-- 表头 -->
|
||||
<tr>
|
||||
<th colspan="10">结算费用</th>
|
||||
</tr>
|
||||
|
||||
<!-- 单位 & 工程 -->
|
||||
<tr>
|
||||
<td style="width: 100px; text-align: center">结算单位</td>
|
||||
|
|
@ -136,43 +136,83 @@
|
|||
<td style="text-align: center">结算工程</td>
|
||||
<td colspan="9" style="text-align: center">{{ projectName }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 租赁费用明细表头 -->
|
||||
<tr>
|
||||
<th colspan="10">租赁费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 60px">序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>租赁单价</th>
|
||||
<th>租赁数量</th>
|
||||
<th>租赁日期</th>
|
||||
<th>归还日期</th>
|
||||
<th>租赁天数</th>
|
||||
<th>租赁费用（元）</th>
|
||||
</tr>
|
||||
<!-- 租赁费用明细表格 -->
|
||||
<div class="table-container lease-table">
|
||||
<!-- 固定表头 -->
|
||||
<div class="table-header">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||||
<colgroup>
|
||||
<col style="width: 60px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 120px;">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th colspan="10">租赁费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>租赁单价</th>
|
||||
<th>租赁数量</th>
|
||||
<th>租赁日期</th>
|
||||
<th>归还日期</th>
|
||||
<th>租赁天数</th>
|
||||
<th>租赁费用（元）</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 租赁费用明细内容 -->
|
||||
<tr v-for="(item, index) in leaseList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modelName }}</td>
|
||||
<td>{{ item.mtUnitName }}</td>
|
||||
<td v-if="item.leasePrice">{{ item.leasePrice.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.startTime }}</td>
|
||||
<td>{{ item.endTime }}</td>
|
||||
<td v-if="item.leaseDays">{{ Number(item.leaseDays).toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
<!-- 滚动数据区域 -->
|
||||
<div class="table-body">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||||
<colgroup>
|
||||
<col style="width: 60px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 120px;">
|
||||
</colgroup>
|
||||
<tr v-for="(item, index) in leaseList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modelName }}</td>
|
||||
<td>{{ item.mtUnitName }}</td>
|
||||
<td>{{ item.leasePrice ? item.leasePrice.toFixed(3) : '0' }}</td>
|
||||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.startTime }}</td>
|
||||
<td>{{ item.endTime }}</td>
|
||||
<td v-if="item.leaseDays">{{ Number(item.leaseDays).toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.costs ? item.costs.toFixed(3) : '0' }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小计 -->
|
||||
<!-- 小计 -->
|
||||
<table
|
||||
border="1"
|
||||
cellspacing="0"
|
||||
cellpadding="6"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px;"
|
||||
>
|
||||
<tr>
|
||||
<td style="text-align: center">费用小计：</td>
|
||||
<td colspan="9" style="text-align: center">{{ leaseCost }}</td>
|
||||
|
|
@ -234,40 +274,69 @@
|
|||
</div> -->
|
||||
|
||||
<div style="margin-bottom: 20px">
|
||||
<!-- 维修费用明细表格 -->
|
||||
<div class="table-container repair-table">
|
||||
<!-- 固定表头 -->
|
||||
<div class="table-header">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||||
<colgroup>
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 140px;">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th colspan="7">维修费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>维修数量</th>
|
||||
<th>是否收费</th>
|
||||
<th>维修费用（元）</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 滚动数据区域 -->
|
||||
<div class="table-body">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||||
<colgroup>
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 140px;">
|
||||
</colgroup>
|
||||
<tr v-for="(item, index) in repairList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modelName }}</td>
|
||||
<td>{{ item.mtUnitName }}</td>
|
||||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.partType }}</td>
|
||||
<td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小计 -->
|
||||
<table
|
||||
border="1"
|
||||
cellspacing="0"
|
||||
cellpadding="6"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px;"
|
||||
>
|
||||
<!-- 表头 -->
|
||||
<tr>
|
||||
<th colspan="7">维修费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 100px">序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>维修数量</th>
|
||||
<th>是否收费</th>
|
||||
<th>维修费用（元）</th>
|
||||
</tr>
|
||||
|
||||
<!-- 数据行 -->
|
||||
<tr v-for="(item, index) in repairList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modelName }}</td>
|
||||
<td>{{ item.mtUnitName }}</td>
|
||||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.partType }}</td>
|
||||
<td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
|
||||
<!-- 小计 -->
|
||||
<tr>
|
||||
<td style="text-align: center">费用小计：</td>
|
||||
<td colspan="6" style="text-align: center">{{ repairCost }}</td>
|
||||
|
|
@ -323,38 +392,65 @@
|
|||
</div> -->
|
||||
|
||||
<div style="margin-bottom: 20px">
|
||||
<!-- 丢失费用明细表格 -->
|
||||
<div class="table-container lose-table">
|
||||
<!-- 固定表头 -->
|
||||
<div class="table-header">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||||
<colgroup>
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 180px;">
|
||||
<col style="width: 180px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 140px;">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th colspan="6">丢失费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>丢失数量</th>
|
||||
<th>丢失费用（元）</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 滚动数据区域 -->
|
||||
<div class="table-body">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||||
<colgroup>
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 180px;">
|
||||
<col style="width: 180px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 140px;">
|
||||
</colgroup>
|
||||
<tr v-for="(item, index) in loseList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modelName }}</td>
|
||||
<td>{{ item.mtUnitName }}</td>
|
||||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小计 -->
|
||||
<table
|
||||
border="1"
|
||||
cellspacing="0"
|
||||
cellpadding="6"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px;"
|
||||
>
|
||||
<!-- 表头 -->
|
||||
<tr>
|
||||
<th colspan="6">丢失费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 100px">序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>丢失数量</th>
|
||||
<th>丢失费用（元）</th>
|
||||
</tr>
|
||||
|
||||
<!-- 数据行 -->
|
||||
<tr v-for="(item, index) in loseList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modelName }}</td>
|
||||
<td>{{ item.mtUnitName }}</td>
|
||||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
|
||||
<!-- 小计 -->
|
||||
<tr>
|
||||
<td style="text-align: center">费用小计：</td>
|
||||
<td colspan="5" style="text-align: center">{{ loseCost }}</td>
|
||||
|
|
@ -415,40 +511,69 @@
|
|||
</div>
|
||||
</div> -->
|
||||
<div style="margin-bottom: 20px">
|
||||
<!-- 报废费用明细表格 -->
|
||||
<div class="table-container scrap-table">
|
||||
<!-- 固定表头 -->
|
||||
<div class="table-header">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||||
<colgroup>
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 140px;">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th colspan="7">报废费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>报废数量</th>
|
||||
<th>是否收费</th>
|
||||
<th>报废费用（元）</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 滚动数据区域 -->
|
||||
<div class="table-body">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||||
<colgroup>
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 150px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 140px;">
|
||||
</colgroup>
|
||||
<tr v-for="(item, index) in scrapList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modelName }}</td>
|
||||
<td>{{ item.mtUnitName }}</td>
|
||||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.partType }}</td>
|
||||
<td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小计 -->
|
||||
<table
|
||||
border="1"
|
||||
cellspacing="0"
|
||||
cellpadding="6"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px;"
|
||||
>
|
||||
<!-- 表头 -->
|
||||
<tr>
|
||||
<th colspan="7">报废费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 100px">序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>报废数量</th>
|
||||
<th>是否收费</th>
|
||||
<th>报废费用（元）</th>
|
||||
</tr>
|
||||
|
||||
<!-- 数据行 -->
|
||||
<tr v-for="(item, index) in scrapList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modelName }}</td>
|
||||
<td>{{ item.mtUnitName }}</td>
|
||||
<td v-if="item.num">{{ item.num.toFixed(2) }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.partType }}</td>
|
||||
<td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
|
||||
<!-- 小计 -->
|
||||
<tr>
|
||||
<td style="text-align: center">费用小计：</td>
|
||||
<td colspan="6" style="text-align: center">{{ scrapCost }}</td>
|
||||
|
|
@ -530,55 +655,90 @@
|
|||
</div>
|
||||
</div> -->
|
||||
<div style="margin-bottom: 20px">
|
||||
<!-- 减免费用明细表格 -->
|
||||
<div class="table-container reduce-table">
|
||||
<!-- 固定表头 -->
|
||||
<div class="table-header">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="header-table">
|
||||
<colgroup>
|
||||
<col style="width: 60px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 120px;">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th colspan="11">减免费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>租赁单价</th>
|
||||
<th>减免数量</th>
|
||||
<th>减免开始日期</th>
|
||||
<th>减免结束日期</th>
|
||||
<th>减免天数</th>
|
||||
<th>减免原因</th>
|
||||
<th>减免费用（元）</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 滚动数据区域 -->
|
||||
<div class="table-body">
|
||||
<table border="1" cellspacing="0" cellpadding="6" class="data-table">
|
||||
<colgroup>
|
||||
<col style="width: 60px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 80px;">
|
||||
<col style="width: 120px;">
|
||||
<col style="width: 120px;">
|
||||
</colgroup>
|
||||
<tr v-for="(item, index) in reducList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modeName }}</td>
|
||||
<td>{{ item.unitName }}</td>
|
||||
<td v-if="item.leasePrice">{{ item.leasePrice }}</td>
|
||||
<td v-else></td>
|
||||
<td v-if="item.reduceNum">{{ item.reduceNum }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.startTime }}</td>
|
||||
<td>{{ item.endTime }}</td>
|
||||
<td>{{ item.days }}</td>
|
||||
<td>{{ item.remark }}</td>
|
||||
<td v-if="item.leaseMoney">{{ item.leaseMoney.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小计和合计 -->
|
||||
<table
|
||||
border="1"
|
||||
cellspacing="0"
|
||||
cellpadding="6"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center"
|
||||
style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px;"
|
||||
>
|
||||
<!-- 表头 -->
|
||||
<tr>
|
||||
<th colspan="11">减免费用明细</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 100px">序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>规格型号</th>
|
||||
<th>计量单位</th>
|
||||
<th>租赁单价</th>
|
||||
<th>减免数量</th>
|
||||
<th>减免开始日期</th>
|
||||
<th>减免结束日期</th>
|
||||
<th>减免天数</th>
|
||||
<th>减免原因</th>
|
||||
<th>减免费用（元）</th>
|
||||
</tr>
|
||||
|
||||
<!-- 数据行 -->
|
||||
<tr v-for="(item, index) in reducList" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.typeName }}</td>
|
||||
<td>{{ item.modeName }}</td>
|
||||
<td>{{ item.unitName }}</td>
|
||||
<td v-if="item.leasePrice">{{ item.leasePrice }}</td>
|
||||
<td v-else></td>
|
||||
<td v-if="item.reduceNum">{{ item.reduceNum }}</td>
|
||||
<td v-else></td>
|
||||
<td>{{ item.startTime }}</td>
|
||||
<td>{{ item.endTime }}</td>
|
||||
<td>{{ item.days }}</td>
|
||||
<td>{{ item.remark }}</td>
|
||||
<td v-if="item.leaseMoney">{{ item.leaseMoney.toFixed(3) }}</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
|
||||
<!-- 小计 -->
|
||||
<tr>
|
||||
<td style="text-align: center">费用小计：</td>
|
||||
<td colspan="10" style="text-align: center">{{ reducCost }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- 合计 -->
|
||||
<tr>
|
||||
<td style="text-align: center">合计：</td>
|
||||
<td colspan="10" style="text-align: center">{{ costAll.toFixed(2) }}</td>
|
||||
|
|
@ -977,6 +1137,234 @@ export default {
|
|||
width: 80px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 固定表头样式 */
|
||||
.table-container {
|
||||
position: relative;
|
||||
border: 1px solid #dfe6ec;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: #f8f8f9;
|
||||
|
||||
.header-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
|
||||
th {
|
||||
background-color: #f8f8f9;
|
||||
color: #303133;
|
||||
font-weight: bold;
|
||||
padding: 8px 6px;
|
||||
border: 1px solid #dfe6ec;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
|
||||
td {
|
||||
padding: 8px 6px;
|
||||
border: 1px solid #dfe6ec;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
/* 移除空值显示横线 */
|
||||
}
|
||||
|
||||
/* 移除斑马线效果 */
|
||||
|
||||
tr:hover td {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 精确对齐表头和数据 */
|
||||
.table-container {
|
||||
position: relative;
|
||||
border: 1px solid #dfe6ec;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: #f8f8f9;
|
||||
/* 精确计算滚动条宽度补偿 */
|
||||
margin-right: 8px;
|
||||
|
||||
.header-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
/* 移除边框以避免宽度计算问题 */
|
||||
border-right: none;
|
||||
|
||||
th {
|
||||
background-color: #f8f8f9;
|
||||
color: #303133;
|
||||
font-weight: bold;
|
||||
padding: 8px 6px;
|
||||
border: 1px solid #dfe6ec;
|
||||
border-right: 1px solid #dfe6ec;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 最后一列保持边框 */
|
||||
th:last-child {
|
||||
border-right: 1px solid #dfe6ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
|
||||
td {
|
||||
padding: 8px 6px;
|
||||
border: 1px solid #dfe6ec;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 移除空值显示横线 */
|
||||
}
|
||||
|
||||
/* 移除斑马线效果 */
|
||||
|
||||
tr:hover td {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保滚动条稳定显示 */
|
||||
.table-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 进一步微调对齐 */
|
||||
.table-header {
|
||||
/* 精确匹配滚动条宽度 */
|
||||
width: calc(100% - 8px);
|
||||
|
||||
.header-table {
|
||||
/* 确保占满容器宽度 */
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 数据区域宽度控制 */
|
||||
.table-body {
|
||||
.data-table {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保所有表格单元格宽度一致 */
|
||||
th, td {
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
.table-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
}
|
||||
|
||||
/* 表格响应式调整 */
|
||||
@media (max-width: 1200px) {
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.header-table,
|
||||
.data-table {
|
||||
min-width: 800px;
|
||||
}
|
||||
}
|
||||
.tabelAllTop {
|
||||
display: flex;
|
||||
border: 1px solid #dfe6ec;
|
||||
|
|
|
|||
|
|
@ -544,7 +544,7 @@ export default {
|
|||
}
|
||||
.tabelAll {
|
||||
display: flex;
|
||||
border: 1px solid #dfe6ec;
|
||||
border: 1px solid #ecedf3;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #dfe6ec;
|
||||
border-top: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue