elementUI实现上传单张图片隐藏上传按钮

elementUI实现上传单张图片隐藏上传按钮

话不多说直接上代码

 

　　　　　　<el-form-item>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove" 图片上传事件
                :limit="1" 
                :on-change="handleChange" 图片上传事件
                :class="{ hide: hideUpload }" 设置一个class表达式用于达到条件调用隐藏样式
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="ruleForm.dialogVisible">
                <img width="100%" :src="ruleForm.headPortrait" alt="" />
              </el-dialog>
　　　　　　</el-form-item>

<script>中

import "../../style/uoLoad.css"; //引入外部css 用户更改样式就是隐藏样式

 

 

　　　　　　data(){ //设置初始值和限制数量
　　　　　　　　return {
　　　　　　　　　　hideUpload:false　,
　　　　　　　　　　limitCount:1

　　　　　　　　}
　　　　　　}

事件

methods: {

    handleRemove(file, fileList) {

      this.hideUpload = fileList.length >= this.limitCount;

    },

    handleChange(fileList) {

      this.hideUpload = fileList.length >= this.limitCount;

      this.hideUpload = true; //此时值为ture时 才会执行隐藏

    },

}