vue组件下的dialog表单正确写法

正确写法说明

表单验证的时候如果是dilog出来的表单，使用this.$res[“fdgs”].resetFislds()会失败，因为$res还没有初始化，可以使用v-if在表单组件的父元素进行控制，初始化组件进行重置。

1.使用v-if="dialogVisible"对组件进行销毁重置，避免初始化被表单校验报错；

2.使用close方法对表单数据进行销毁，相当于表单重置数据，避免再次打开弹框之前数据还在；

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="resetForm('ruleForm')">      <el-form        :model="ruleForm"        v-if="dialogVisible"        status-icon        :rules="rules"        ref="ruleForm"        label-width="100px"        class="demo-ruleForm"      >        <el-form-item label="密码" prop="pass">          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>        </el-form-item>         <el-form-item>          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>          <el-button @click="resetForm('ruleForm')">重置</el-button>        </el-form-item>      </el-form>      <span slot="footer" class="dialog-footer">        <el-button @click="dialogVisible = false">取 消</el-button>        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>      </span>    </el-dialog>

如果有什么问题和疑问请在下方留言，文章为原创，转载请注明！