1.图片加载失败,给默认图

2.form表单中,输入框加回车事件,页面刷新,如何解决?

3.使用在线主题生成工具,修改element自定义主题色

1.图片加载失败,给默认图,两种解决方法:

方法一:

给img标签加  onerror指令,然后在data中给 errorGoodsImg 赋值,根据自己所需图片路径赋值

<img :src="imgSrc+scope.row.fileId" id="avatarImg" v-if="scope.row.fileId" :onerror="errorGoodsImg">

小颖的目录:

data中,errorGoodsImg的值如下:

errorGoodsImg: 'this.src="' + require('../assets/images/new.jpg') + '"',

方法二:

调用 element-ui 中的  <el-image> 标签,可通过slot = error可自定义加载失败内容

eg:

<el-image v-if="userInfo.credentialsFileId" style="width: 75px; height: 115px" :src="imgSrc+userInfo.credentialsFileId" :preview-src-list="srcList">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>

2.form表单中,输入框加回车事件,页面刷新,如何解决?

解决方法就是在form中添加:@submit.native.prevent

示例:

html代码:

<template>
<div class="ceshi-form-tem right-content-tem">
<el-form ref="form" :model="userInfo" label-width="100px" class="userInfo-form" @submit.native.prevent>
<el-row>
<el-col :span="12">
<p class="form-title-tem">基本信息</p>
</el-col>
<el-col :span="12" class="txt-right">
<el-form-item>
<el-button type="primary" @click="onSubmit('form')" :loading="btnUserLoading">
保存
</el-button>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="头像">
<el-upload
style="width: 30%"
action="https://jsonplaceholder.typicode.com/posts/"
accept=".jpg,.png"
:on-remove="handleRemoveAvatar"
:beforeUpload="beforeAvatarUpload"
:on-error="onError"
:on-success="onSuccess"
:limit="1">
<img v-if="userInfo.avatar" :src="userInfo.avatar" :onerror="errorGoodsImg"
class="userInfo-avatar">
<img v-else src="../assets/img/tu4.png" class="userInfo-avatar">
</el-upload>
</el-form-item>
<el-form-item
label="昵称"
prop="nickname">
<p v-if="!userInfoEdit.nickname">{{userInfo.nickname}}
<i class="el-icon-edit" @click="showInput('nickname')"></i>
</p>
<el-input ref="customerInput" v-else maxlength="6" placeholder="请输入昵称" v-model="userInfo.nickname"
@keyup.enter.native="handleInputConfirm('nickname')"
@blur="handleInputConfirm('nickname')"></el-input>
</el-form-item>
<el-form-item label="姓名">
<p>{{userInfo.username}}</p>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="userInfo.sex" @change="changeSex">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<!--普通用户-->
<el-form-item label="所属机构">
<p v-if="!userInfoEdit.organizationName">{{userInfo.organizationName}}<i class="el-icon-edit" @click="showInput('organizationName')"></i></p>
<el-input ref="customerInput" v-if="userInfoEdit.organizationName" maxlength="6" placeholder="请输入所属机构"
v-model="userInfo.organizationName"
@keyup.enter.native="handleInputConfirm('organizationName')"
@blur="handleInputConfirm('organizationName')"></el-input>
</el-form-item>
</el-form>
</div>
</template>

js代码:

<script>
export default {
name: "formCeshi",
data(){
return {
btnUserLoading: false,
errorGoodsImg: 'this.src="' + require('../assets/img/tu4.png') + '"',
userInfo: {
avatar: '',
nickname: 'v',
username: '测试',
sex: 1,
organizationName: '杀杀杀'
},
userInfoEdit: {
nickname: false,
organizationName: false
},
haveChange: false
}
},
mounted() {
this.haveChange = false
},
methods: {
onSubmit(formName) {
const that = this
if (!that.haveChange) {
that.$message({
message: '当前没有任何修改',
type: 'warning'
});
return
}
that.btnUserLoading = true
that.$refs[formName].validate((valid) => {
if (valid) {
that.btnUserLoading = false
// 调接口
} else {
that.btnUserLoading = false
return false;
}
});
},
showInput(key) {
switch (key) {
case'nickname':
this.userInfoEdit.nickname = true;
break
case'organizationName':
this.userInfoEdit.organizationName = true;
break
}
this.$nextTick(function () {
this.$refs.customerInput.$el.querySelector('input').focus();
});
},
handleInputConfirm(key) {
this.haveChange = true
switch (key) {
case'nickname':
this.userInfoEdit.nickname = false;
break
case'organizationName':
this.userInfoEdit.organizationName = false;
break
}
},
handleRemoveAvatar(file, fileList) {
this.userInfo.avatar = ''
},
beforeAvatarUpload(file) {
let fileend = file.name.substring(file.name.lastIndexOf("."))
//jpg、png、bmp
const isZip = (fileend === '.jpg' || file.type === 'jpg') || (fileend === '.png' || file.type === 'png')
if (!isZip) {
this.$message.error('您只能上传jpg、png格式的图片!')
}
const isLt2G = file.size / 1024 / 1024 < 1;
if (!isLt2G) {
this.$message.error('上传的图片大小必须小于1MB!')
}
return isZip && isLt2G
},
onSuccess(file, res, fileList) {
if (res.response.code != 200) {
this.$message.error('上传头像失败');
} else {
this.haveChange = true
this.userInfo.avatar = URL.createObjectURL(file.raw);
}
},
onError(err, file, fileList) {
const errMsg = JSON.parse(err.message)
this.$message.error(errMsg.msg ? errMsg.msg : '上传头像失败');
},//修改性别
changeSex() {
this.haveChange = true
}
}
}
</script>

css

<style scoped>
form.userInfo-form {
width: 400px;
margin: 40px auto 0 auto;
}
img.userInfo-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
</style>

3.使用在线主题生成工具,修改element自定义主题色

打开在线主题编辑器,在该页面中根据自己的需求,更改颜色,修改完后,下载主题包,然后在项目中引入就可以了。

持续更新.......................................

秀两张我家仔仔的盛世美颜:

vue+element-ui小笔记的更多相关文章

  1. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  2. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  5. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  6. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  7. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  8. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  9. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  10. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. HTTPS 是这样握手的

    HTTP协议默认是明文传输,存在一定的安全隐患,容易被中间人窃听和攻击,在 加密解决HTTP协议带来的安全问题 中提到使用哈希.对称加密.非对称加密等方式对数据加密,能解决数据安全的问题. 以上加密方 ...

  2. [nginx]lua控制响应头

    前言 适用场景:添加CDN缓存时间.操作set-cookie.标记业务数据类型等. 获取响应头 指令:ngx.resp.get_headers 语法:headers = ngx.resp.get_he ...

  3. golang trace view 视图详解

    大家好,我是蓝胖子,在golang中可以使用go pprof的工具对golang程序进行性能分析,其中通过go trace 命令生成的trace view视图对于我们分析系统延迟十分有帮助,鉴于当前对 ...

  4. Ubuntu20.04 下编译和运行 FreeSWITCH的问题汇总

    1. Ubuntu20.04 下编译和运行 FreeSWITCH的问题汇总 1.1. 环境 Ubuntu20.04.2 LTS (Linux 5.4.0-152-generic x86_64 GNU/ ...

  5. Ubuntu 安装部署Kubernetes(k8s)集群

    目录 一.系统环境 二.前言 三.Kubernetes 3.1 概述 3.2 Kubernetes 组件 3.2.1 控制平面组件 3.2.2 Node组件 四.配置节点的基本环境 五.节点安装doc ...

  6. 《Kali渗透基础》10. 提权、后渗透

    @ 目录 1:提权 2:Admin 提权为 System 2.1:at 2.2:sc 2.3:SysInternal Suite 2.4:进程注入提权 3:抓包嗅探 4:键盘记录 5:本地缓存密码 5 ...

  7. SqlServer修改表字段类型

    if not exists (select 1 from syscolumns where name='字段名' and id=OBJECT_ID('表名') and 条件) begin alter ...

  8. role

    角色权限管理改造方案 #   为什么需要角色 现有的权限方案 .net后台权限管理 在后台类中配置,权限 = 一级菜单:二级菜单:三级菜单: 通过在view模板中判断是否有权限显示菜单 后端通过权限配 ...

  9. 在.NET 8 RC1 版本中 MAUI、ASP.NET Core 和 EF8 的新特性

    从年初2 月份发布第一个预览版,经历7个预览版后,Microsoft 西雅图时间9月13日发布了 .NET 8  RC 1: https://devblogs.microsoft.com/dotnet ...

  10. Java开发面试--Redis专区

    1. 什么是Redis?它的主要特点是什么? 答: Redis是一个开源的.基于内存的高性能键值对存储系统.它主要用于缓存.数据存储和消息队列等场景. 高性能:Redis将数据存储在内存中,并采用单线 ...