本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

在后台管理系统中，最常见的业务就是CURD，对数据进行增删改，通常情况下新增与编辑我们会做成一个通用组件，我们在不使用v-if的情况下如何重置我们的表单呢？

技术栈：vue3.0 + elementPlus

一、从ui框架入手

方法名	说明
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果

我们从elementPlus文档可以获悉到这两个方法，resetFields 好像非常符合我们的需求，但是这里的初始值是指第一次打开的数据为初始值，若用户先通过编辑按钮打开，则再通过新增按钮打开，初始化的值则为编辑按钮打开的数据了。

那我们退而求其次使用 clearValidate 移除表单项的校验结果，我们自己设初始值

二、上手表单

1.设置表单初始值

// 我们在export default 外面设置表单的初始值
const moduleForm = {
	id: '',
	username: '',
	phone: '',
}
export default {}

2.表单初始化赋值以及一些通用参数

export default {
  data() {
    visible: false, // 抽屉/弹窗展示
    isEdit: false,  // 是否为编辑标识
    form: JSON.parse(JSON.stringify(moduleForm)),
  }
}

3.给表单抽屉/弹窗设置open方法

父组件只需通过在组件定义 ref='form' 新增按钮中@click="$refs.form.open({})" 编辑按钮中从后端返回到的res丢进open即可$refs.form.open(res)

export default {
  open(data) {
  	// 新增时外面传进来的是空对象，this.form即为moduleForm初始值
    Object.assign(this.form, moduleForm,{...data})
    // 通过判断data是否为空 设置编辑标识
    this.isEdit =  this.notEmpty(data)
    // 移除表单项的校验结果，异步的校验，使用$nextTick以防万一
    this.$nextTick(() => {
      const { form } = this.$refs
      form && form.clearValidate()
	})
	// 打开抽屉/弹窗
    this.visible = true
  },
}

总结

面对CURD一定要总结出一套常规的套路，才能高效完成工作，接下来的时间就可以愉快学习了