中台端 油站配置 编辑油站 5张图片隐藏上传狂

fuintAdmin_zt/src/views/components/Service/index.vue

@@ -175,7 +175,7 @@
                   <el-upload
                     :action="uploadAction"
                       list-type="picture-card"
-                      :class="{hide:hideUpload}"
+                      :class="{hide2:hideUpload2}"
                       :file-list="uploadImages"
                       :headers="uploadHeader"
                       :auto-upload="true"
@@ -232,6 +232,8 @@
     props: ["id"],
     data(){
       return{
+        //门头照 控制是否显示上传框样式
+        hideUpload2:false,
         dataForm:{coverImage:''},
         // 上传地址
         // uploadAction: 'http://192.168.0.178:8008/backendApi/file/upload',
@@ -319,7 +321,21 @@
         }
       }
     },
-
+    watch: {
+      // 监听 uploadImages 数组长度
+      'uploadImages.length'(val) {
+        this.$nextTick(() => {
+          if (val>=5){
+            this.$nextTick(() => {
+              this.hideUpload2=true
+            });
+          }
+          if (val<=5){
+            this.hideUpload2=false
+          }
+        });
+      }
+    },
     computed: {
       uploadAction(){
 
@@ -587,5 +603,9 @@
   line-height: 60px;
 }
 
+/deep/.hide2 .el-upload--picture-card{
+  display: none;
+}
+
 
 </style>