第五步：对各类进行搜索

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -26,6 +26,7 @@
           v-model="conditions.tableData"
           placeholder="搜索表格数据..."
           class="search-data"
+          clearable
       />
       <el-select v-model="conditions.hiddenPoint" class="search-hidden-point">
         <el-option
@@ -120,11 +121,27 @@
 
   // ==================== 计算属性 ====================
 
+  // 过滤后的数据（根据搜索关键词）
+  const filteredData = computed(() => {
+    if (!conditions.value.tableData) {
+      return props.tableDataList;
+    }
+    const keyword = conditions.value.tableData.toLowerCase();
+    return props.tableDataList.filter(item => {
+      // 遍历所有列，检查是否包含关键词
+      return props.tableColumns.some(col => {
+        const value = item[col.key as keyof typeof item];
+        if (value === undefined || value === null) return false;
+        return String(value).toLowerCase().includes(keyword);
+      });
+    });
+  });
+
   // 分页后的数据
   const paginatedData = computed(() => {
     const start = (props.pageOption.currentPage - 1) * props.pageOption.pageSize;
     const end = start + props.pageOption.pageSize;
-    return props.tableDataList.slice(start, end);
+    return filteredData.value.slice(start, end);
   });
 
   // 是否显示分页
@@ -165,8 +182,12 @@
   // 监听搜索条件变化
   watch(
       conditions,
-    () => {
+      (newConditions) => {
-      emits('changeConditions', conditions.value);
+        emits('changeConditions', newConditions);
+        // 搜索条件变化时，重置到第一页
+        if (newConditions.tableData !== conditions.value.tableData) {
+          emits('changeCurrentPage', 1);
+        }
       },
       { deep: true }
   );