pms 项目列表 合同名称 固定宽度

src/views/pms/iotprojectinfo/index.vue

@@ -80,8 +80,10 @@
             {{ scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column label="客户名称" align="left" prop="manufactureName" :width="columnWidths.manufactureName" />
-        <el-table-column label="合同名称" align="center" prop="contractName" :width="columnWidths.contractName" >
+        <el-table-column label="客户名称" align="left" prop="manufactureName"
+                         :show-overflow-tooltip="true" width="200px" class-name="manufacture-name-column" />
+        <el-table-column label="合同名称" align="center" prop="contractName" class-name="contract-name-column"
+                         :show-overflow-tooltip="true" width="200px" >
           <template #default="scope">
             <el-link type="primary" @click="showTaskList(scope.row)">
               {{ scope.row.contractName }}
@@ -365,8 +367,8 @@ const { push } = useRouter() // 路由跳转
 // 列宽度配置
 const columnWidths = ref({
   serial: '50px',
-  manufactureName: '120px',
-  contractName: '150px',
+  manufactureName: '200px',
+  contractName: '200px',
   contractCode: '120px',
   workloadTotal: '100px',
   workloadFinish: '120px',
@@ -425,7 +427,7 @@ const getList = async () => {
 const calculateColumnWidths = () => {
   const MIN_WIDTH = 80; // 最小列宽
   const PADDING = 25; // 列内边距
-  const FLEXIBLE_COLUMNS = ['manufactureName', 'contractName', 'contractCode']; // 可伸缩列
+  const FLEXIBLE_COLUMNS = ['contractCode']; // 可伸缩列
 
   // 确保表格容器存在
   if (!tableContainerRef.value?.$el) return;
@@ -457,8 +459,8 @@ const calculateColumnWidths = () => {
 
   // 计算各列最小宽度
   calculateColumnMinWidth('serial', t('iotDevice.serial'), (row: any, index: number) => `${index + 1}`);
-  calculateColumnMinWidth('manufactureName', '客户名称', (row: any) => row.manufactureName);
-  calculateColumnMinWidth('contractName', '合同名称', (row: any) => row.contractName);
+  // calculateColumnMinWidth('manufactureName', '客户名称', (row: any) => row.manufactureName);
+  // 合同名称列：直接固定宽度，不参与动态计算
   calculateColumnMinWidth('contractCode', '合同编号', (row: any) => row.contractCode);
   calculateColumnMinWidth('workloadTotal', '总工作量', (row: any) => row.workloadTotal);
   calculateColumnMinWidth('workloadFinish', '已完成工作量', (row: any) => row.workloadFinish);
@@ -481,9 +483,14 @@ const calculateColumnWidths = () => {
 
   // 应用最小宽度到所有列
   Object.keys(minWidths).forEach(key => {
-    newWidths[key] = `${minWidths[key]}px`;
+      newWidths[key] = `${minWidths[key]}px`;
   });
 
+  // 合同名称列强制固定宽度
+  // 合同名称列强制固定宽度
+  newWidths.manufactureName = '200px';
+  newWidths.contractName = '200px';
+
   // 计算可伸缩列需要的宽度
   if (totalMinWidth < availableWidth) {
     // 有剩余空间：按比例分配给可伸缩列
@@ -1037,18 +1044,7 @@ watch(list, () => {
 
 /* 调整表格最小宽度，确保内容完全显示 */
 :deep(.el-table) {
-  min-width: 100%;
-}
-
-/* 强制显示所有内容，防止省略号 */
-:deep(.el-table td.el-table__cell),
-:deep(.el-table th.el-table__cell) {
-  overflow: visible !important;
-}
-
-:deep(.el-table .cell) {
-  overflow: visible !important;
-  text-overflow: clip !important;
+  table-layout: fixed !important;
 }
 
 /* 进度展示容器样式 */
@@ -1101,4 +1097,34 @@ watch(list, () => {
   font-size: 14px;
 }
 
+/* 核心：强制合同名称列的th/td固定宽度+溢出隐藏，确保省略号生效 */
+:deep(.contract-name-column) {
+  width: 200px !important; /* 与脚本中固定宽度一致 */
+  min-width: 200px !important;
+  max-width: 200px !important;
+}
+
+/* 覆盖全局的 overflow: visible，强制单元格溢出隐藏 */
+:deep(.contract-name-column .el-table__cell) {
+  overflow: hidden !important;
+}
+
+/* 合同名称单元格：溢出显示省略号（原有样式保留，增加优先级） */
+:deep(.contract-name-column .cell) {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  width: 100% !important;
+  display: block !important; /* 添加此属性确保省略号生效 */
+}
+
+/* 确保合同名称链接也遵守溢出规则 */
+:deep(.contract-name-column .el-link) {
+  display: block !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  width: 100% !important;
+}
+
 </style>