VUE中关闭表单后重置表单以及清空表单校验

一般用于表单的新增或者编辑、查看等功能

目录

重置表单：

清空表单校验：clearValidate（）移除表单校验方法

resetFields() 移除校验结果并重置字段值

---

重置表单：

这里利用了一个偏门的小技巧，dialog对话框组件有个close，主要用途是Dialog 关闭的回调（详情可见Element-UI组件库），然后再close里直接给设置的表单数据对象重新赋值为空，这时点击取消，或者点击表单外，关闭表单再重新打开，内容就会清空

<template>
  <!-- 弹框 -->
  <el-dialog
    title="添加部门"
    :visible.sync="isShow"
    width="50%"
    // close事件 （复制请删除此行）
    @close="close"
  >
    <!-- 表单 -->
    <el-form ref="form" label-width="120px" :model="formData" :rules="formRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getEmployeesList">
          <el-option v-for="item in employeesList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <div slot="footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
 data(){
    return {
        // 表单数据对象
        formData: {
            name: '', // 部门名称
            code: '', // 部门编码
            manager: '', // 部门管理者
            introduce: '' // 部门介绍
        }
    }
 },



 methods: {
    // 弹框关闭触发
    close() {
      // 小技巧，直接给表单数据对象赋值为空
      this.formData = {}
    }
 }
}
</script>

清空表单校验：clearValidate（）移除表单校验方法

给form表单绑定ref，在close里指想form.ref，设置clearValidate（）方法

<template>
    <!-- 表单 -->
    <el-form ref="form" label-width="120px" :model="formData" :rules="formRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getEmployeesList">
          <el-option v-for="item in employeesList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <div slot="footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
 methods: {
    // 弹框关闭触发
    close() {
      this.formData = {}
      // 清空表单校验，避免再次进来会出现上次校验的记录
      this.$refs.form.clearValidate()
    }
 }
}
</script>

resetFields() 移除校验结果并重置字段值

还有一种简洁的方法，集合重置表单和清空表单校验于一身，resetFields和clearValidate都能清除验证，但是resetFields（）会重置字段值，而在vue中大量用到的数据的绑定，很可能出现同一个数据绑定在多处的情况，如果滥用resetFields很可能造成界面上出现莫名的bug，请慎重选择

<script>
export default {
 methods: {
    // 弹框关闭触发
    close() {
      // 移除校验结果并重置数据
      this.$refs.form.resetFields()
    }
 }
}
</script>