关于elementUI表单验证的重置，一般多用于dialog的情况

最新推荐文章于 2024-01-25 17:58:42 发布

七月蜗牛

最新推荐文章于 2024-01-25 17:58:42 发布

阅读量912

点赞数

分类专栏： vue效果文章标签：表单重置弹层

本文链接：https://blog.csdn.net/qq_36947174/article/details/103417809

版权

vue效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在做中后台管理系统的时候，一般会有弹窗表单的出现，此时就需要添加表单的重置功能，防止每次打开的时候上次的信息遗留

下面说重点

1 给所有的表单项添加 prop

2 需要在el-form上添加 :model / ref ，这两项是验证必须的但如果在没有:rules或者：rules中没有对应规则的时候是不会进行验证的

这里其实要说下elementui验证之后的重置是分两种的

1 表单各项规则的验证，验证时候将各种提示文字及样式进行清空

2 将各个表单的字段进行重置（添加prop之后，在初始化完毕之后,vue应该是进行了初始字段的缓存【需要注意的是，如果在其缓存之前进行字段赋值，则缓存的是赋值之后的值~，在进行重置的时候自然也是恢复到赋值之后】）

下面上代码看下~

<el-dialog title="弹层提示" center :visible.sync="visible" @close="dialogClose('form')">
      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <el-form-item label="金额" prop="price">
          <el-input type="text" v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="金额2：" prop="price2">
          <el-input type="text" v-model="form.price2"></el-input>
        </el-form-item>
        <el-form-item label="时间：" prop="date">
          <el-date-picker
            v-model="form.date"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
</el-form>

// data
visible: false,
form: {
    price: '',
    price2: '',
    date: ''
},
rules: {
    price: [{}] // 验证规则
}
// rules中具有的验证规则 在验证的时候才会进行验证


// methods
// @close方法 会在弹层关闭之后执行（无论是弹层外/右上角x号/取消/确定  都会走）
dialogClose(type) {
    this.$refs[type].resetFields()   // 这里就是重置表单了~
    this.visible = false
}

所以感觉比较好的做法就是

遇到dialog类型的表单，在写的时候就把所有的prop都添加上！

然后在rules中只写自己需要进行验证的字段就好