element中el-dialog点击关闭或确认按钮清除里面的内容和验证
代码:
<template> <div> <el-button type="primary" @click="dialogFormVisible = true">打开嵌套表单的Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogFormVisible"> <el-form ref="form" :model="form" :rules="rules" :before-close="closeDiv"> <el-form-item label="姓名" prop="Name"> <el-input v-model="form.Name" placeholder="请输入真实姓名"/> </el-form-item> <el-form-item label="手机号码" prop="Mobile"> <el-input v-model="form.Mobile" placeholder="请输入手机号码" maxlength="11"/> </el-form-item> <el-form-item label="身份证号" prop="idCardNo"> <el-input v-model="form.idCardNo" placeholder="请输入身份证号" maxlength="20"/> </el-form-item> <el-form-item label="详细地址" prop="address"> <el-input v-model="form.address" type="textarea" placeholder="请输入详细地址"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="Submit">提交 </el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { dialogFormVisible:false, form: {}, // 表单校验 // 表单校验 pattern可以做正则验证 rules: { Name: [ { required: true, pattern:/^[\u4e00-\u9fa5a-zA-Z]{1,20}$/, message: "请输入中英文姓名", trigger: "blur" } ], address:[ {required: true, message: "请输入详细地址", trigger: "blur" } ], Mobile: [ { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" } ], idCardNo: [ { required: true, pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/, message: "请输入正确格式身份证号", trigger: "blur" } ], }, } }, methods: { // 点击提交 Submit() { this.$refs['form'].validate(valid => { if(valid) { // 请求后台接口 表示验证通过 // 请求后台接口 进行操作 // 请求成功之后 清除输入框汇中的内容 this.$nextTick(() => { // form对应你写的<el-form ref="form"></el-form> this.$refs["form"].resetFields(); }); } }) }, cancel() { this.dialogFormVisible = false // 点击取消按钮的时候清除输入框中的内容 清除验证 // this.$nextTick获取了节点之后进行操作 this.$nextTick(() => { // form对应你写的<el-form ref="form"></el-form> this.$refs["form"].resetFields(); }); }, // 右上角 × 取消按钮 closeDiv() { this.$nextTick(() => { // form对应你写的<el-form ref="form"></el-form> this.$refs["form"].resetFields(); }); } } } </script>
如有错误或者改善之处 欢迎指出矫正