element ui 使用问题整合，目前累计2个

本文为记录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)//模拟数据调用 一秒后关闭遮罩
    }