详情信息 输入框显隐处理单独

src/views/business/basicInfo/index.vue

@@ -125,7 +125,7 @@
                   <el-tab-pane label="企业基本信息" name="0">
                     <div class="rel-flex">
                       <div class="scrolling4">
-                        <div v-for="(item, key) in Dict.baseInfo" style="">
+                        <div v-for="(item, key) in Dict.baseInfo" style="" :class="{'isHide': item.mode===7, [key]: item.mode===7}">
                           <div class="item">
                             <span class="name">{{ item.name }} ：</span>
                             <template v-if="item.type === 'select'">
@@ -261,7 +261,49 @@ export default {
     });
   },
   watch: {
+    'basicActv':{ 
+      handler(newValue) {
+		    // console.log('模态框显隐！！！', this.catchItem['isHighGrowthInnovative'])
+        setTimeout(()=>{ // 用于详情弹窗显隐处理
+          [{
+            key: 'isHighGrowthInnovative',  // 主元素
+            subKey: 'highGrowthInnovativeDate' // 子元素（随着主元素值改变而显隐处理）
+          },
+          {
+            key: 'isHighTech',
+            subKey: 'highTechDate'
+          },
+          {
+            key: 'isAdvancedTechService',
+            subKey: 'advancedTechServiceDate'
+          },
+          {
+            key: 'isSpecializedSpecialEnterprises',
+            subKey: 'specializedSpecialEnterprisesDate'
+          },
+          {
+            key: 'isTechSme',
+            subKey: 'techSmeDate'
+          },
+          {
+            key: 'isLittleGiant',
+            subKey: 'littleGiantDate'
+          },
+          {
+            key: 'isGazelle',
+            subKey: 'gazelleDate'
+          }
+           
+        ].forEach((item, index)=>{ 
+          this.toggleDateElement(item.subKey,  this.catchItem[item.key]);
 
+        })
+      //    this.toggleDateElement("highGrowthInnovativeDate", this.form.item.isHighGrowthInnovative);
+
+       },1000)
+      },
+      immediate: true // 立即调用处理函数
+    },
     // "form.item.isHighGrowthInnovative"(newVal, oldVal) {
     //   this.toggleDateElement("highGrowthInnovativeDate");
     // },
@@ -350,16 +392,21 @@ export default {
       this.dialogVisible = false;
     },
     toggleDateElement(targetEleClass, flag) {
+      // console.log(targetEleClass, flag, '切换样式')
       const elements = document.getElementsByClassName(targetEleClass);
+      // console.log(elements)
       if (elements.length) {
-        const element = elements[0];
+        for (let i = 0; i < elements.length; i++) {
+          const element = elements[i];
+          flag ? element.classList.remove("isHide") : element.classList.add("isHide");
+          }
+ 
 		// console.log('值改变了，日期切换', element.classList,element.classList.contains("isHide"))
         // if (element.classList.contains("isHide")) {
         //   element.classList.remove("isHide"); // 移除 'hidden' 类
         // } else {
         //   element.classList.add("isHide");
         // }
-		flag ? element.classList.remove("isHide") : element.classList.add("isHide");
       }
 
     },
@@ -471,6 +518,9 @@ export default {
 };
 </script>
 <style rel="stylesheet/scss" lang="scss" scope>
+	.isHide{
+			display: none !important;
+		}
 .p-head {
   position: absolute;
   height: 100%;