开发中使用elementUI遇到的问题总结

最新推荐文章于 2022-08-18 14:38:27 发布

smile一个

最新推荐文章于 2022-08-18 14:38:27 发布

阅读量213

点赞数

文章标签： elementui vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43740491/article/details/125259647

版权

el-form submit.prevent resetFields el-upload base64

关键词由CSDN通过智能技术生成

1、表单--单个input出现回车刷新整个页面的情况,解决方法：在el-form上添加@submit.native.prevent即可阻止表单的默认行为

<el-form @submit.native.prevent label-width="100px">
     <el-form-item label="新号码：">
          <el-input v-model="changePhoneForm.newPhone" placeholder="请输入"></el-input>
     </el-form-item>
</el-form>

2.表单内容重置&清空校验结果

//使用refs来调用resetFields()将表单内容进行重置
//同时将校验的结果进行重置

this.$refs.restPassword.resetFields()

this.$refs['restPassword'].resetFields()

//以上两种写法均可

//注意与表单上的ref一致，否则将获取不到

 <el-form :model="restPassword" ref="restPassword" :rules="rules"></el-form>

3.将图片转为base64二进制的文档流上传并在本地正常显示（这个和element无关）

//上传组件

<el-upload class="avatar-uploader" action="你的上传地址" :show-file-list="false" :on-change="handlePicture">
     <img v-if="imageUrl" :src="imageUrl" class="avatar" />
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

//将图片转为二进制文档流并创建一个用来本地显示的地址

handlePicture (file){
    //FileReader可直接将上传文件转化为二进制流
    var reader = new FileReader();

    reader.readAsDataURL(file.raw);
    //处理转换成base64的二进制流（根据后端传参要求做对应处理）
    reader.onload = () => {
        this.sendImageUrl = reader.result.substr(
             reader.result.lastIndexOf(",") + 1
         );
         //创建一个本地地址用来显示上传照片
         this.imageUrl = URL.createObjectURL(file.raw);
      };
}