style: 完成origin等地址没有超出长度时，不用tooltip展示

src/hooks/useOverflow.ts

@@ -1,7 +1,9 @@
 import { ref, watch, onMounted, nextTick } from 'vue'
 
 export const useOverflow = (elementRef, dataRef) => {
-  const isOverflow = ref(false)
+  // 根据 elementRef 类型来初始化 isOverflow
+  const isOverflow = Array.isArray(elementRef.value) ? ref([]) : ref(false)
+
   const checkOverflow = (element) => {
     if (element) {
       return element.scrollWidth > element.clientWidth
@@ -9,10 +11,21 @@ export const useOverflow = (elementRef, dataRef) => {
     return false
   }
 
+  // 用于处理单个或多个元素的溢出检查
+  const updateOverflowStatus = () => {
+    if (Array.isArray(elementRef.value)) {
+      // 如果是数组，检查每个元素
+      isOverflow.value = elementRef.value.map((el) => checkOverflow(el))
+    } else {
+      // 如果是单个元素，直接返回布尔值
+      isOverflow.value = checkOverflow(elementRef.value)
+    }
+  }
+
   // 初次 mounted 时检查是否溢出
   onMounted(() => {
     nextTick(() => {
-      isOverflow.value = checkOverflow(elementRef.value)
+      updateOverflowStatus()
     })
   })
 
@@ -21,7 +34,7 @@ export const useOverflow = (elementRef, dataRef) => {
     () => dataRef,
     () => {
       nextTick(() => {
-        isOverflow.value = checkOverflow(elementRef.value)
+        updateOverflowStatus()
       })
     },
     {

src/utils/table.ts

@@ -32,10 +32,10 @@ export const autoWidth = (tableData: VxeGridProps, grid: VxeGridInstance) => {
       })
       // column.title.length > curStr.length && (curStr = column.title)
       // 表头的宽度如果小于表格内容的宽度
-      if (width < curStr.length * 10 + 20) {
+      if (width < curStr.length * 11 + 20) {
         // width = curStr.length * 10 + 20
         if (curStr.length > 20) {
-          width = curStr.length * 8 + 40
+          width = curStr.length * 9 + 40
         } else {
           width = curStr.length * 11 + 20
         }

src/views/Tracking/src/components/TrackingDetail/src/components/RoutesView.vue

@@ -56,10 +56,13 @@ const formatDate = (date: string) => {
 
 const basicOriginRef = ref()
 const basicDestinationRef = ref()
-let isOverflowData = ''
+const detailOriginRef = ref()
+const detailDestinationRef = ref()
 
-const { isOverflow: isOriginOverflow } = useOverflow(basicOriginRef, props)
-const { isOverflow: isDestinationOverflow } = useOverflow(basicDestinationRef, props)
+const { isOverflow: isBasicOriginOverflow } = useOverflow(basicOriginRef, props)
+const { isOverflow: isBasicDestinationOverflow } = useOverflow(basicDestinationRef, props)
+const { isOverflow: isDetailOriginOverflow } = useOverflow(detailOriginRef, props)
+const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinationRef, props)
 </script>
 
 <template>
@@ -82,10 +85,15 @@ const { isOverflow: isDestinationOverflow } = useOverflow(basicDestinationRef, p
             <div class="origin">
               <div class="title">Origin</div>
               <div class="content">
-                <el-tooltip placement="top">
+                <el-tooltip v-if="isBasicOriginOverflow?.[index]" placement="top">
                   <template #content>{{ item.origin || '--' }}</template>
-                  <span class="single-line-ellipsis">{{ item.origin || '--' }}</span>
+                  <span ref="basicOriginRef" class="single-line-ellipsis">{{
+                    item.origin || '--'
+                  }}</span>
                 </el-tooltip>
+                <span v-else ref="basicOriginRef" class="single-line-ellipsis">{{
+                  item.origin || '--'
+                }}</span>
 
                 <div class="line_container">
                   <hr color="#000000" />
@@ -95,10 +103,15 @@ const { isOverflow: isDestinationOverflow } = useOverflow(basicDestinationRef, p
             </div>
             <div class="destination" ref="">
               <div class="title">Destination</div>
-              <el-tooltip placement="top">
+              <el-tooltip v-if="isBasicDestinationOverflow?.[index]" placement="top">
                 <template #content>{{ item.destination || '--' }}</template>
-                <span class="content single-line-ellipsis">{{ item.destination || '--' }}</span>
+                <span ref="basicDestinationRef" class="content single-line-ellipsis">{{
+                  item.destination || '--'
+                }}</span>
               </el-tooltip>
+              <span v-else ref="basicDestinationRef" class="content single-line-ellipsis">{{
+                item.destination || '--'
+              }}</span>
             </div>
           </div>
           <div class="etd border-right">
@@ -120,12 +133,18 @@ const { isOverflow: isDestinationOverflow } = useOverflow(basicDestinationRef, p
               <div class="place">
                 <span style="font-size: 24px" class="font_family icon-icon_location_fill_b"></span>
 
-                <el-tooltip placement="top">
+                <el-tooltip v-if="isDetailOriginOverflow?.[index]" placement="top">
                   <template #content>{{ item.origin || '--' }}</template>
-                  <span class="label origin-label single-line-ellipsis">{{
+                  <span ref="detailOriginRef" class="label origin-label single-line-ellipsis">{{
                     item.origin || '--'
                   }}</span>
                 </el-tooltip>
+                <span
+                  v-else
+                  ref="detailOriginRef"
+                  class="label origin-label single-line-ellipsis"
+                  >{{ item.origin || '--' }}</span
+                >
                 <div class="line_container">
                   <hr color="#000000" />
                   <div class="right-icon"></div>
@@ -146,10 +165,15 @@ const { isOverflow: isDestinationOverflow } = useOverflow(basicDestinationRef, p
               <div class="place">
                 <span style="font-size: 24px" class="font_family icon-icon_location_fill_b"></span>
 
-                <el-tooltip placement="top">
+                <el-tooltip v-if="isDetailDestinationOverflow?.[index]" placement="top">
                   <template #content>{{ item.destination || '--' }}</template>
-                  <span class="label single-line-ellipsis">{{ item.destination || '--' }}</span>
+                  <span ref="detailDestinationRef" class="label single-line-ellipsis">{{
+                    item.destination || '--'
+                  }}</span>
                 </el-tooltip>
+                <span v-else ref="detailDestinationRef" class="label single-line-ellipsis">{{
+                  item.destination || '--'
+                }}</span>
               </div>
               <div class="eta">
                 <span class="font_family icon-icon_date_b"></span>
@@ -234,15 +258,14 @@ const { isOverflow: isDestinationOverflow } = useOverflow(basicDestinationRef, p
   }
 
   .destination {
-    max-width: calc(40% - 16px);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    max-width: 40%;
     margin-left: 16px;
-    & > div.content {
-      display: inline-block;
+    & > .content {
       width: 100%;
-      overflow: hidden;
+      margin-top: 8px;
+      padding-top: 2px;
+      font-size: 18px;
+      font-weight: 700;
     }
   }
   .place {
@@ -256,9 +279,10 @@ const { isOverflow: isDestinationOverflow } = useOverflow(basicDestinationRef, p
       margin-top: 2px;
     }
     .origin {
-      width: 60%;
+      width: calc(60% - 16px);
     }
-
+  }
+  .origin {
     .content {
       position: relative;
       display: flex;

src/views/Tracking/src/components/TrackingTable/src/components/DownloadDialog.vue

@@ -36,7 +36,9 @@ defineExpose({
       <div class="download-dialog">
         <div class="select-data">
           <div style="display: inline-block">
-            Select data on your shipment list：<span style="color: var(--color-theme)">1330</span>
+            Select data on your shipment list：<span style="color: var(--color-theme)">{{
+              listData.length || 0
+            }}</span>
           </div>
         </div>
         <div class="data-filter">