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

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>

src/component/rain-earthquake/function-child/AroundAnalysis.vue

@@ -34,20 +34,16 @@
 </template>
 
 <script lang="ts" setup>
-import { provide } from 'vue';
+import { inject } from 'vue';
 import { useStatusStore } from '@/stores/useStatusStore';
-import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
 import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
 import ButtonComponent from './around-analysis/ButtonComponent.vue';
 import SearchComponent from './around-analysis/SearchComponent.vue';
 
 const statusStore = useStatusStore();
 
-// 在父组件中创建唯一的 Hook 实例
-const aroundAnalysisState = useAroundAnalysis();
-
-// 通过 provide 共享给所有子组件
-provide<AroundAnalysisState>('aroundAnalysisState', aroundAnalysisState);
+// 通过 inject 获取父组件（RainstormView.vue）提供的实例
+const aroundAnalysisState = inject<AroundAnalysisState>('aroundAnalysisState')!;
 </script>
 
 <style scoped>