第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

表單校驗el-upload,解決圖片上傳完成之后,校驗提示還存在

標簽:
Vue.js

需求如下:
如下图我们直接校验el-upload,会发现当图片上传完成后,校验还在,没有消失,我们想要的是图片上传完成后校验消失
图片描述
解决方法:
使用el-checkbox-group代理,将Form.imageUrl绑定在el-checkbox-group上
然后将校验的trigger值换成change即可

<el-checkbox-group v-model="Form.imageUrl" v-show="false"></el-checkbox-group>
{ required: true, message: '请上传图片', trigger: 'change' } 

使用后效果:
图片描述
完整代码如下:

<template>
  <div>
    <el-form :model="Form" ref="Form" :rules="rules">
      <el-form-item prop='imageUrl'>
        <el-checkbox-group v-model="Form.imageUrl" v-show="false"></el-checkbox-group>
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :http-request="handleAvatarSuccess">
          <img v-if="Form.imageUrl" :src="Form.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button type="primary">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Form: {
        imageUrl: ''
      },
      rules: {
        imageUrl: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    submitForm(){
      this.$refs.Form.validate(async valid => {
          console.log(valid)
      })
    },
    handleAvatarSuccess() {
      this.Form.imageUrl = 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg';
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
點擊查看更多內(nèi)容
2人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消