elementUI弹窗关闭自动清空表单以及校验规则及不生效处理办法

在Element UI中，关闭弹窗时自动清空表单及重置验证规则，可以通过监听visible属性变化来实现。以下是一个简单的例子：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    @close="resetForm"
  >
    <el-form ref="formRef">
      <el-form-item
        label="用户名"
        prop="username"
        :rules="[{ required: true, message: '请输入用户名' }]"
      >
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        username: '',
        // 其他表单字段
      }
    };
  },
  methods: {
    resetForm() {
      this.$refs.formRef.resetFields(); // 清空表单字段
      this.dialogVisible = false; // 关闭弹窗
    }
  }
};
</script>

在这个例子中，el-dialog的:visible.sync属性绑定了dialogVisible变量，这样可以通过修改dialogVisible来控制弹窗的显示与隐藏。el-form的ref属性设置为formRef，这样可以通过this.$refs.formRef来访问表单实例。

resetForm方法中，this.$refs.formRef.resetFields()用于重置表单字段，清空字段的值并移除验证结果。当el-dialog的close事件触发时，调用resetForm方法来完成重置操作。这样在关闭弹窗时，表单和验证规则会被自动清空和重置。