vue + ElementUI 如何操作完新增之后关闭对话框清空验证?

Question

以上图片是我操作完新增之后, 当再次点击新增还会有表单验证, 试了很多种办法都不行, 以下是我通过网上查询的方法来操作可以取消新增验证, 但是新增完之后再次点击新增还是会有表单验证, 请各位大佬指点一二

html

        <div class="section_add">
          <el-dialog title="部门信息" :visible.sync="addUser" width="60%" :before-close="closeDialog">
            <div class="decorate">
              <i class="close" @click="addUserOff('ruleForm')"></i>
              <i class="bag"></i>
            </div>
            <div class="add_content clearfix">
              <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="165px">
                <el-col class="add_content_one">
                  <el-form-item label="部门编码" prop="departCode">
                    <el-input v-model="ruleForm.departCode" placeholder="请输入部门编码"></el-input>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addUserOff('ruleForm')">取 消</el-button>
                <el-button type="success" @click="submitForm('ruleForm')">保 存</el-button>
              </span>
          </el-dialog>
        </div>

js

      // 校验表单
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.addUserData();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 新增
      addUserData(formName) {
        this.addSuperiorDepartment();
        this.$ajax
          .post(this.$api.departmentData, this.ruleForm)
          .then(res => {
            if (res.data.status == 200) {
              this.$message({
                type: "success",
                message: "新增成功!"
              });
              this.ruleForm = {};
              this.addUser = false;
              this.$refs[formName].resetFields();
              this.ztreeData();
            }
          })
          .catch(err => {
            console.log("addUserData有异常", err);
          });
      },
       // 新增取消
      addUserOff(formName) {
        this.addUser = false;
        this.$refs[formName].resetFields();
      },

Answer 1

在el-form上 ref="dialogForm" @close="closeDialog"
然后在closeDialog方法里 this.$refs.dialogForm.resetFields()

demo

Answer 2

相同问题：https://segmentfault.com/q/10...