第一步：将列表数据全部显示

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -39,7 +39,7 @@
     <!-- 表格 -->
     <div class="table-box">
       <el-table
-        :data="tableDataList"
+        :data="paginatedData"
         border
         style="width: 100%"
         empty-text="暂无数据"
@@ -111,6 +111,13 @@
 
   // ==================== 计算属性 ====================
 
+  // 分页后的数据
+  const paginatedData = computed(() => {
+    const start = (props.pageOption.currentPage - 1) * props.pageOption.pageSize;
+    const end = start + props.pageOption.pageSize;
+    return props.tableDataList.slice(start, end);
+  });
+
   // 是否显示分页
   const showPagination = computed(() => props.pageOption.totalPage !== 0);
 
@@ -216,7 +223,10 @@
   :deep(.el-select__selected-item) {
     color: white;
   }
-
+  /* 减小表格行的上下间距 */
+  :deep(.el-table .el-table__cell) {
+    padding: 6px 0;
+  }
   :deep(.el-table--border th) {
     background: linear-gradient(
       180deg,
@@ -227,7 +237,7 @@
     border: 1px solid rgba(255, 255, 255, 0.3);
     padding: 10px 12px;
     text-align: center;
-    font-size: 14px;
+    font-size: 15px;
     font-weight: bold;
   }
   :deep(.el-table tr),
@@ -267,4 +277,19 @@
     cursor: pointer;
     transition: background-color 0.3s ease;
   }
+  /* 名称列样式：一行显示，超出隐藏 */
+  :deep(.el-table .el-table__row td:first-child .cell) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  
+  /* 鼠标悬浮时显示完整名称 */
+  :deep(.el-table .el-table__row td:first-child:hover .cell) {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    word-break: break-all;
+  }
 </style>