vue 关闭弹框重新打开时elementui验证规则还在

在Vue中使用Element UI时，如果需要在关闭弹框后重新打开，并保持之前的数据，同时清除表单验证规则，可以通过以下步骤实现：

1. 使用ref属性来标识你的表单，并在关闭弹框前清除验证。
2. 在重新打开弹框时，重置表单数据和验证规则。

以下是一个简单的示例：

<template>
  <el-dialog
    ref="dialogForm"
    :visible.sync="dialogVisible"
    @close="handleClose"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="120px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        // 其他字段
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
          // 其他验证规则
        ],
        // 其他字段的规则
      },
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      if (this.$refs.form) {
        this.$refs.form.resetFields(); // 清除验证规则
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过的操作
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    }
  }
};
</script>

在这个示例中，当弹框关闭时，会调用handleClose方法，在这个方法中使用this.$refs.form.resetFields()来清除表单的验证规则。当你重新打开弹框并需要重置表单数据和验证时，可以调用openDialog方法来设置dialogVisible为true。