实时视图-表格-特货信息超出隐藏

src/components/SimpleTable/customRender.tsx

@@ -0,0 +1,25 @@
+import { ElTooltip } from 'element-plus'
+
+export const ellipsisCell = (scope: any, ellipsisLength = 5) => {
+  return defineComponent({
+    setup() {
+      const cellValue = scope.row[scope.column.property]
+
+      return () =>
+        typeof cellValue === 'string' ? (
+          <ElTooltip
+            disabled={cellValue.length <= ellipsisLength}
+            content={cellValue}
+          >
+            <span>
+              {cellValue.length <= ellipsisLength
+                ? cellValue
+                : `${cellValue.slice(0, ellipsisLength)}…`}
+            </span>
+          </ElTooltip>
+        ) : (
+          ''
+        )
+    },
+  })
+}

src/components/SimpleTable/index.vue

@@ -50,6 +50,9 @@
           filter-style="arrow"
         />
       </template>
+      <template v-if="column.customRender" #default="scope">
+        <component :is="column.customRender(scope)" />
+      </template>
     </el-table-column>
   </el-table>
 </template>

src/views/realTime/components/AirportView/useAirportTable.ts

@@ -1,4 +1,5 @@
 import { Query } from '@/api/webApi'
+import { ellipsisCell } from '@/components/SimpleTable/customRender'
 import { CommonData, CommonTableColumn } from '~/common'
 
 interface SimpleColumn {
@@ -75,6 +76,7 @@ const columnGroupsMap: {
         {
           columnName: 'speCargoInfo',
           columnLabel: '特货信息',
+          customRender: ellipsisCell,
         },
         {
           columnName: 'preLoad',
@@ -265,6 +267,7 @@ const columnGroupsMap: {
         {
           columnName: 'speCargoInfo',
           columnLabel: '特货信息',
+          customRender: ellipsisCell,
         },
         // {
         //   columnName: 'preUnLoad',
@@ -391,6 +394,7 @@ const columnGroupsMap: {
         {
           columnName: 'speCargoInfo',
           columnLabel: '特货信息',
+          customRender: ellipsisCell,
         },
         // {
         //   columnName: 'transIn',
@@ -628,6 +632,7 @@ const columnGroupsMap: {
         {
           columnName: 'speCargoInfo',
           columnLabel: '特货信息',
+          customRender: ellipsisCell,
         },
         // {
         //   columnName: 'preUnLoad',

src/views/realTime/components/FlightView/ContainerWaybillDialog.vue

@@ -27,6 +27,7 @@ import {
   CommonTableFormatter,
   CommonValue,
 } from '~/common'
+import { ellipsisCell } from '@/components/SimpleTable/customRender'
 
 const props = defineProps({
   flag: {
@@ -59,7 +60,11 @@ const tableColumnsMap = {
       width: 300,
       showOverflowTooltip: true,
     },
-    { columnLabel: '特货信息', columnName: 'speCargoInfo' },
+    {
+      columnLabel: '特货信息',
+      columnName: 'speCargoInfo',
+      customRender: ellipsisCell,
+    },
     { columnLabel: '货物件数', columnName: 'luggageCount', needCount: 1 },
     { columnLabel: '拉下件数', columnName: 'pullNum', needCount: 1 },
     { columnLabel: '退运件数', columnName: 'returnNum', needCount: 1 },
@@ -76,7 +81,12 @@ const tableColumnsMap = {
       width: 300,
       showOverflowTooltip: true,
     },
-    { columnLabel: '特货信息', columnName: 'speCargoInfo', needCount: 1 },
+    {
+      columnLabel: '特货信息',
+      columnName: 'speCargoInfo',
+      needCount: 1,
+      customRender: ellipsisCell,
+    },
     {
       columnLabel: '进港报文货物件数',
       columnName: 'messageCargos_in',

src/views/realTime/hooks/useTable.ts

@@ -1,4 +1,5 @@
 import { Query } from '@/api/webApi'
+import { ellipsisCell } from '@/components/SimpleTable/customRender'
 import { CommonValue, CommonData, CommonTableColumn } from '~/common'
 
 const idGetter = (name: string) => {
@@ -82,7 +83,11 @@ const tableColumnsMap: {
       width: 300,
       showOverflowTooltip: true,
     },
-    { columnLabel: '特货信息', columnName: 'speCargoInfo' },
+    {
+      columnLabel: '特货信息',
+      columnName: 'speCargoInfo',
+      customRender: ellipsisCell,
+    },
     { columnLabel: '运单件数', columnName: 'luggageCount', needCount: 1 },
     { columnLabel: '货物重量', columnName: 'weight', needCount: 1 },
     { columnLabel: '拉下件数', columnName: 'pullNum', needCount: 1 },
@@ -251,7 +256,12 @@ const tableColumnsMap: {
       width: 300,
       showOverflowTooltip: true,
     },
-    { columnLabel: '特货信息', columnName: 'speCargoInfo', needCount: 1 },
+    {
+      columnLabel: '特货信息',
+      columnName: 'speCargoInfo',
+      needCount: 1,
+      customRender: ellipsisCell,
+    },
     {
       columnLabel: '运单件数',
       columnName: 'messageCargos_in',
@@ -489,7 +499,11 @@ const tableColumnsMap: {
       width: 300,
       showOverflowTooltip: true,
     },
-    { columnLabel: '特货信息', columnName: 'speCargoInfo' },
+    {
+      columnLabel: '特货信息',
+      columnName: 'speCargoInfo',
+      customRender: ellipsisCell,
+    },
     { columnLabel: '运单件数', columnName: 'luggageCount', needCount: 1 },
     { columnLabel: '货物重量', columnName: 'weight', needCount: 1 },
     { columnLabel: '拉下件数', columnName: 'pullNum', needCount: 1 },
@@ -618,7 +632,12 @@ const tableColumnsMap: {
       width: 160,
       showOverflowTooltip: true,
     },
-    { columnLabel: '特货信息', columnName: 'speCargoInfo', needCount: 1 },
+    {
+      columnLabel: '特货信息',
+      columnName: 'speCargoInfo',
+      needCount: 1,
+      customRender: ellipsisCell,
+    },
     {
       columnLabel: '运单件数',
       columnName: 'messageCargos_in',