前言

在后台管理系统中，最常见的业务就是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一定要总结出一套常规的套路，才能高效完成工作，接下来的时间就可以愉快学习了

转载地址：http://yduzi.baihongyu.com/

你可能感兴趣的文章

2017新生儿爆款名字出炉！90后的父母们最受欢迎的居然是.....