Vue+El-form表单重置

1.表单添加ref属性<el-form ref="refname"></el-form>2.form的每个item添加prop属性<el-form-item prop="name"><el-input v-model="query.name"></el-input></el-form-item>3.绑定点击事件中传入refna

Senkui

2711人浏览 · 2020-08-05 00:45:16

Senkui · 2020-08-05 00:45:16 发布

1.表单添加ref属性

<el-form ref="refname"></el-form>

2.form的每个item添加prop属性

<el-form-item prop="name">
    <el-input v-model="query.name"></el-input>
</el-form-item>

3.绑定点击事件中传入refname

<el-form-item>
    <el-button @click="resetForm('refname')">清空</el-button>
</el-form-item>

4.注册事件

restForm(refname) {
   this.$refs[refname].resetFields()
}

5.检查是否有初始值
在data数据上需要挂载表单数据初始值为""
如果使用了$store.state.fm.plan管理关联表单数据，那么在form中需要添加:model="$store.state.fm"

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^