From 5ebbc756c4509ec277b6c3edc974ec5f2a6305f5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 22 Nov 2025 10:53:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90mall=E3=80=91=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=95=86=E5=9F=8E=E7=B3=BB=E7=BB=9F=E8=AE=A2=E5=8D=95=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=B8=AD=E8=A1=A8=E5=A4=B4=E6=9C=AA=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E4=BD=93=E8=87=AA=E9=80=82=E5=BA=94=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../order/components/OrderTableColumn.vue     | 58 ++++++++++++++++---
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/views/mall/trade/order/components/OrderTableColumn.vue b/src/views/mall/trade/order/components/OrderTableColumn.vue
index a2955941e..6e387cf03 100644
--- a/src/views/mall/trade/order/components/OrderTableColumn.vue
+++ b/src/views/mall/trade/order/components/OrderTableColumn.vue
@@ -40,7 +40,7 @@
         <el-table-column min-width="300" prop="spuName">
           <template #header>
             <div
-              class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]"
+              class="h-[35px] flex items-center -mx-[10px] px-[20px]"
               style="background-color: var(--app-content-bg-color)"
             >
               <span class="mr-20px">订单号：{{ scope.row.no }} </span>
@@ -166,6 +166,7 @@
   </el-table-column>
 </template>
 <script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, watch } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { DeliveryTypeEnum } from '@/utils/constants'
 import { formatDate } from '@/utils/formatTime'
@@ -226,19 +227,26 @@ const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps): spanMethod
   }
 }
 
+const orderTableHeadWidthList = ref([300, 150, 120, 120, 160, 120, 120, 160]) // 头部 col 宽度初始化
+let isFirstTable = false // 标记是否已处理第一个表格
+let firstTableInstance: TableInstance | null = null
+
 /** 解决 ref 在 v-for 中的获取问题*/
-const setOrderTableRef = (el: TableInstance) => {
+const setOrderTableRef = async (el: TableInstance) => {
   if (!el) return
-  // 只要第一个表也就是开始的第一行
-  if (el.tableId !== 'el-table_2') {
-    return
+  // 只处理第一个表格实例
+  if (!isFirstTable) {
+    isFirstTable = true
+    firstTableInstance = el
+    // 使用 nextTick 确保 DOM 已完全渲染
+    await nextTick()
+    tableHeadWidthAuto(el)
   }
-  tableHeadWidthAuto(el)
 }
-// 头部 col 宽度初始化
-const orderTableHeadWidthList = ref([300, 150, 120, 120, 160, 120, 120, 160])
-// 头部宽度自适应
+
+/** 头部宽度自适应 */
 const tableHeadWidthAuto = (el: TableInstance) => {
+  if (!el) return
   const columns = el.store.states.columns.value
   if (columns.length === 0) {
     return
@@ -249,6 +257,38 @@ const tableHeadWidthAuto = (el: TableInstance) => {
     }
   })
 }
+
+/** 监听窗口大小变化，重新计算表头宽度 */
+const handleResize = async () => {
+  if (firstTableInstance) {
+    await nextTick()
+    tableHeadWidthAuto(firstTableInstance!)
+  }
+}
+
+/** 监听列表数据变化，重新计算表头宽度 */
+watch(
+  () => props.list,
+  async () => {
+    // 数据变化后，等待 DOM 更新完成再重新计算宽度
+    await nextTick()
+    if (firstTableInstance) {
+      // 延迟一小段时间，确保表格已完全渲染
+      await new Promise((resolve) => setTimeout(resolve, 100))
+      tableHeadWidthAuto(firstTableInstance!)
+    }
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
 /** 商品图预览 */
 const imagePreview = (imgUrl: string) => {
   createImageViewer({