lcw

src/components/aboutTable/Search.vue

@@ -430,56 +430,63 @@ defineExpose({
   submit,
   reset
 });
-watchEffect(() => {
+// 优化 watchEffect 为 watch，避免因 reactive 内部状态变化导致频繁重新执行
+watch(() => props.searchArr, (newArr) => {
   loadingPage.value = true;
-  let arr = JSON.parse(JSON.stringify(props.searchArr));
-  getArr = arr.map((item) => {
-    switch (item.showType) {
-      case "select":
-        item = { ...selectDefault, ...item };
-        item.options = reactive(item.options);
-        getOptions[item.prop] = item.options;
-        break;
-      case "input":
-        item = { ...inputDefault, ...item };
-        break;
-      case "daterange":
-        item = { ...daterangeDefault, ...item };
-        if (item.defaultShortcuts) item.shortcuts = shortcuts;
-        break;
-      case "date":
-        item = { ...defaultDate, ...item };
-        if (item.defaultShortcuts) {
-          item.shortcuts = dateShortcuts;
-        }
-        break;
-      case "checkbox":
-        item = reactive({ ...defaultCheckbox, ...item });
-        item.checkboxValueArr = item.options.map((obj) => {
-          return obj.value;
-        });
-        break;
-      case "cascader":
-        item = { ...defaultCascader, ...item };
-        if (item.lazy) {
-          cascaderLazyProps.checkStrictly = item.checkStrictly;
-          item.props = { ...cascaderLazyProps, ...(item.props || {}) };
-          delete item.options;
-        } else {
-          item.props = {
-            ...defaultCascader.props,
-            ...(item.props || {}),
-            ...{ checkStrictly: item.checkStrictly }
-          };
-          getOptions[item.prop] = reactive(item.options);
-        }
-        break;
-    }
+  // 使用 try-catch 防止解析失败导致崩溃
+  try {
+    let arr = JSON.parse(JSON.stringify(newArr));
+    getArr = arr.map((item) => {
+      switch (item.showType) {
+        case "select":
+          item = { ...selectDefault, ...item };
+          item.options = reactive(item.options);
+          getOptions[item.prop] = item.options;
+          break;
+        case "input":
+          item = { ...inputDefault, ...item };
+          break;
+        case "daterange":
+          item = { ...daterangeDefault, ...item };
+          if (item.defaultShortcuts) item.shortcuts = shortcuts;
+          break;
+        case "date":
+          item = { ...defaultDate, ...item };
+          if (item.defaultShortcuts) {
+            item.shortcuts = dateShortcuts;
+          }
+          break;
+        case "checkbox":
+          item = reactive({ ...defaultCheckbox, ...item });
+          item.checkboxValueArr = item.options.map((obj) => {
+            return obj.value;
+          });
+          break;
+        case "cascader":
+          item = { ...defaultCascader, ...item };
+          if (item.lazy) {
+            cascaderLazyProps.checkStrictly = item.checkStrictly;
+            item.props = { ...cascaderLazyProps, ...(item.props || {}) };
+            delete item.options;
+          } else {
+            item.props = {
+              ...defaultCascader.props,
+              ...(item.props || {}),
+              ...{ checkStrictly: item.checkStrictly }
+            };
+            getOptions[item.prop] = reactive(item.options);
+          }
+          break;
+      }
+      loadingPage.value = false;
+      searchObj[item.prop] = item.defaultVal;
+      return item;
+    });
+  } catch (e) {
+    console.error('Search组件初始化失败:', e);
     loadingPage.value = false;
-    searchObj[item.prop] = item.defaultVal;
-    return item;
-  });
-});
+  }
+}, { immediate: true, deep: false });
 </script>
 
 <style scoped lang="scss">