Przeglądaj źródła

优化分账金额显示

张田田 2 miesięcy temu
rodzic
commit
523fedc86a
1 zmienionych plików z 22 dodań i 3 usunięć
  1. 22 3
      src/service/SingleItemDetail.vue

+ 22 - 3
src/service/SingleItemDetail.vue

@@ -130,7 +130,11 @@ const sellTypeText: Record<string, string> = {
     <!-- 分账信息 -->
     <div class="info-section">
       <h3 class="info-title">分账信息</h3>
-      <vxe-table :data="mockSplitAccountList" border>
+      <vxe-table
+        class="split-account-table"
+        :data="mockSplitAccountList"
+        border
+      >
         <vxe-column field="profitSharingTime" title="分账时间" align="center" />
         <vxe-column field="conditioningProgramSupplierName" title="供应商" align="center" />
         <vxe-column field="profitSharingStatus" title="分账状态" align="center" >
@@ -145,12 +149,12 @@ const sellTypeText: Record<string, string> = {
         </vxe-column>
         <vxe-column field="profitSharingAmount" title="预计分账金额" align="center" >
           <template #default="{ row }">
-            {{ row.profitSharingAmount ?? 0 }}元
+            {{ row.profitSharingAmount ? row.profitSharingAmount + '元' : '' }}
           </template>
         </vxe-column>
         <vxe-column field="realAmount" title="到账金额" align="center">
           <template #default="{ row }">
-            {{ row.realAmount ?? 0 }}元
+            {{ row.realAmount ? row.realAmount + '元' : '' }}
           </template>
         </vxe-column>
       </vxe-table>
@@ -314,6 +318,21 @@ const sellTypeText: Record<string, string> = {
     padding: 10px 20px;
   }
 
+  /* 分账表格仅按内容自适应高度,避免一行数据时出现多余空白 */
+  .split-account-table {
+    :deep(.vxe-table--wrapper),
+    :deep(.vxe-table) {
+      height: auto !important;
+    }
+
+    :deep(.vxe-table--body-wrapper) {
+      height: auto !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      flex: unset !important;
+    }
+  }
+
   .product-info {
     display: flex;
     align-items: flex-start;