element-plus在dialog组件里面嵌套表单,点击右上角清空不了表单验证的问题

    <el-dialog :close-on-click-modal="false"
      v-model="dialogFormVisible"
      :width="500"
      :before-close="handleClose"
      title="新增标签类别">
      <el-form ref="ruleFormRef" :model="form" label-width="120" :rules="rules">
        <el-form-item label="类别名称" prop="name">
          <el-input v-model="form.name" autocomplete="off" style="width: 412px"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="closeFrom(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
// 因为在dialog关闭是拿不到表单标记的元素,不能直接使用官网中resetFields方法
// 先拿到表单标记ruleFormRef
// 在使用
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()

ruleFormRef.value.resetFields()
posted @ 2022-03-20 15:04  Life_countdown  阅读(1341)  评论(0)    收藏  举报