第五步：对各类进行搜索

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -23,9 +23,10 @@
     <!-- 搜索 -->
     <div class="search-box">
       <el-input
-        v-model="conditions.tableData"
-        placeholder="搜索表格数据..."
-        class="search-data"
+          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);
   });
 
   // 是否显示分页
@@ -164,11 +181,15 @@
 
   // 监听搜索条件变化
   watch(
-    conditions,
-    () => {
-      emits('changeConditions', conditions.value);
-    },
-    { deep: true }
+      conditions,
+      (newConditions) => {
+        emits('changeConditions', newConditions);
+        // 搜索条件变化时，重置到第一页
+        if (newConditions.tableData !== conditions.value.tableData) {
+          emits('changeCurrentPage', 1);
+        }
+      },
+      { deep: true }
   );
 </script>