本文为记录element ui使用过程中遇到的各类组件的问题的一个记录,持续更新,遇到问题就进行更新,如果大家有遇到什么问题,有解决方法,欢迎评论问题和解决方法,我将统一写入这里,方便大家查询。
<---------------------------------------------我是一条分割线---------------------------------------------------------->
1. 表单问题:同一个页面中使用多个element ui的表单,通过v-if进行切换显示的时候,第二个表单得格式验证失效。
解决方法: 分别给多个表单赋值key属性,因为在同一个页面使用多个表单时,浏览器先解析第一个表单,此时表单上是有绑定ref,之后再解析第二个表单时,就没有重新渲染ref,而ref本身是作为渲染结果被创建的,所以第二个表单没能成功绑定ref,验证就无法生效。
示例:
<!--第一个表单-->
<div class="top" v-if="isShow1">
<el-row type="flex" justify="center" align="middle">
<div style="font-size: 20px">账号验证</div>
</el-row>
<el-row type="flex" justify="center" align="middle">
<div style="margin: 20px auto;width: 300px">
<!--第一个表单-->
<el-form ref="form" key="form" :model="form" :rules="rule" label-width="80px" label-position="top">
<el-form-item label="手机号码:" prop="name">
<el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
</el-form-item>
<el-form-item label="验证码:">
<el-input v-model="form.name" placeholder="请输入密码" style="width: 58%;margin-right: 14px"></el-input>
<el-button type="primary">发送验证码</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="nextSubmit('form')" style="width: 100%">下一步</el-button>
</el-form-item>
</el-form>
</div>
</el-row>
</div>
<!--第二个表单-->
<div class="top" v-if="isShow2">
<el-row type="flex" justify="center" align="middle">
<div style="font-size: 20px">重置密码</div>
</el-row>
<el-row type="flex" justify="center" align="middle">
<div style="margin: 20px auto;width: 300px">
<!--第二个表单-->
<el-form ref="resetForm" key="resetForm" :model="resetForm" :rules="loginFormRules" label-width="80px" label-position="top">
<el-form-item label="新密码:" prop="password">
<el-input v-model="resetForm.password" placeholder="请输入新密码" type="password"></el-input>
</el-form-item>
<el-form-item label="确认新密码:" prop="newPassword">
<el-input v-model="resetForm.newPassword" placeholder="请再一次输入新密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetSubmit('resetForm')" style="width: 100%">确认重置</el-button>
</el-form-item>
</el-form>
</div>
</el-row>
</div>
2.loading的局部使用问题:当你需要在某一个弹窗或者表格内容中在请求数据时,对其内容进行加载提示时,发现用官网的 v-loading="loading"
会导致全局遮罩,并不会局部遮罩。
解决方法: loading指定需要遮罩的地方,在target中指定需要遮罩的地方,类名,id都可,需要是唯一的,如果是表格内容可以用'.el-table__body'
,代码中为对话框的内容。然后我们需要在调用数据之前使用这个方法,结束之后调用关闭方法即可(注意:this.loading中的loading只需在data中声明变量即可,不用使用在要指定的地方,还有本方法时基于vue的使用的基础上的解决方法)。
示例:
// loading框设置局部刷新,且所有请求完成后关闭loading框
startLoading() {
this.loading = this.$loading({ // 声明一个loading对象
lock: true, // 是否锁屏
text: '正在加载,请稍后...', // 加载动画的文字
spinner: 'el-icon-loading', // 引入的loading图标
background: 'rgba(255,255,255)', // 背景颜色
target: document.querySelector('.el-dialog__body'), // 需要遮罩的区域 querySelector中的名称为需要遮罩的类名,默认为body
})
},
//关闭loading遮罩层
endLoading() {
this.loading.close()
},
use(){//要调用的方法
this.startLoading()//开启遮罩
setTimeout(this.endLoading,1000)//模拟数据调用 一秒后关闭遮罩
}