解决诊断目录数据展示不全问题

openhis-ui-vue3/src/views/catalog/disease/index.vue

@@ -86,75 +86,80 @@
           </el-col> -->
         </el-row>
 
-        <el-table v-loading="loading" :data="diseaseList" @selection-change="handleSelectionChange">
+        <!-- 添加外层滚动容器，确保表格可以水平滚动 -->
+        <div class="table-scroll-container">
+          <!-- 移除style="width: 100%"，让Element UI表格根据内容自动调整 -->
+          <el-table v-loading="loading" :data="diseaseList" @selection-change="handleSelectionChange" border resizable>
             <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="编码" align="center" key="conditionCode" prop="conditionCode" />
+            <!-- 使用prop属性并设置合适的最小宽度，启用列宽调整 -->
+            <el-table-column label="编码" align="center" prop="conditionCode" min-width="150" />
+            <!-- 名称列保留自定义模板以处理长文本 -->
             <el-table-column
               label="名称"
               align="center"
-            key="name"
               prop="name"
-            :show-overflow-tooltip="true"
+              min-width="280"
-          />
+            >
+              <template #default="scope">
+                <div class="name-cell">
+                  {{ scope.row.name }}
+                </div>
+              </template>
+            </el-table-column>
+            <!-- 其他列使用标准配置 -->
             <el-table-column
               label="疾病分类"
               align="center"
-            key="sourceEnum_enumText"
               prop="sourceEnum_enumText"
-            :show-overflow-tooltip="true"
+              min-width="180"
             />
             <el-table-column
               label="拼音助记码"
               align="center"
-            key="pyStr"
               prop="pyStr"
-            :show-overflow-tooltip="true"
+              min-width="220"
             />
             <el-table-column
               label="类型"
               align="center"
-            key="typeCode_dictText"
               prop="typeCode_dictText"
-            :show-overflow-tooltip="true"
+              min-width="120"
             />
             <el-table-column
-            label="医保编码 "
+              label="医保编码"
               align="center"
-            key="ybNo"
               prop="ybNo"
-            :show-overflow-tooltip="true"
+              min-width="180"
             />
             <el-table-column
               label="医保标记"
               align="center"
-            key="ybMatchFlag"
               prop="ybMatchFlag_enumText"
+              min-width="150"
             />
             <el-table-column
               label="医保对码标志"
               align="center"
-            key="ybMatchFlag"
               prop="ybMatchFlag_enumText"
+              min-width="150"
             />
             <el-table-column
               label="状态"
               align="center"
-            key="statusEnum_enumText"
               prop="statusEnum_enumText"
-            width="160"
+              min-width="150"
             />
             <el-table-column
               label="描述"
               align="center"
-            key="description"
               prop="description"
-            width="160"
+              min-width="250"
             />
             <el-table-column
               label="操作"
               align="center"
-            width="150"
+              min-width="120"
-            class-name="small-padding fixed-width"
+              class-name="small-padding"
             >
               <template #default="scope">
                 <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
@@ -163,6 +168,7 @@
               </template>
             </el-table-column>
           </el-table>
+        </div>
           <pagination
           v-show="total > 0"
           :total="total"
@@ -504,4 +510,73 @@ getList();
   display: flex;
   align-items: center;
 }
+  /* 表格外层滚动容器，确保表格整体可以水平滚动 */
+  .table-scroll-container {
+    width: 100%;
+    overflow-x: auto;
+    margin-bottom: 10px;
+  }
+  
+  /* 表格样式调整，移除默认的最大宽度限制 */
+  .table-scroll-container >>> .el-table {
+    min-width: 100%;
+    width: auto;
+  }
+  
+  /* 名称列的单元格样式，确保长文本可以水平滚动 */
+  .name-cell {
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    padding: 4px 8px;
+    height: 32px;
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  
+  /* 美化名称列的滚动条 */
+  .name-cell::-webkit-scrollbar {
+    height: 8px;
+  }
+  
+  .name-cell::-webkit-scrollbar-thumb {
+    background: rgba(0, 120, 215, 0.6);
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    transition: background-color 0.2s ease;
+  }
+  
+  .name-cell::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 120, 215, 0.8);
+  }
+  
+  .name-cell::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+  
+  /* 表格外层容器的滚动条样式 */
+  .table-scroll-container::-webkit-scrollbar {
+    height: 12px;
+  }
+  
+  .table-scroll-container::-webkit-scrollbar-thumb {
+    background: rgba(0, 120, 215, 0.7);
+    border-radius: 6px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    transition: background-color 0.2s ease;
+  }
+  
+  .table-scroll-container::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 120, 215, 0.9);
+  }
+  
+  .table-scroll-container::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 6px;
+    border: 2px solid rgba(0, 0, 0, 0.05);
+  }
 </style>