1. resetFields() 表单中的重置按钮生效有 2 个条件
✦ form 要设置 ref 属性,且 ref 属性值要和 this.$refs[formName].resetFields() 中的 formName 一致
✦ 表单域 el-form-item 上需要设置 prop 属性,表单 rules 规则校验、resetFields() 重置文件清理的都是 prop 属性绑定的字段
this.$refs[formName].resetFields() 只是将查询条件初始化,在初始化时绑定什么值还是什么值,并不是全部置为空
2. 表单域 el-form-item 参数 prop 说明
使用 validate()、resetFields() 的情况下,表单域中的 prop 属性是必填的
表单校验 validate() 是一个方法接收一个回调函数做参数
<template>
<section>
<el-form :model="formData" inline :rules="rules" ref="formData">
<!-- 活动名称 -->
<el-form-item prop="name" label="活动名称">
<el-input v-model="formData.name" placeholder="活动名称"></el-input>
</el-form-item>
<el-form-item prop="value" label="活动区域">
<!-- el-select 绑定当前选中的 value 属性值 -->
<el-select v-model="formData.value" placeholder="活动区域">
<el-option
v-for="item in formData.regionList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 提交按钮和重置按钮 -->
<el-form-item>
<el-button @click="submitForm('formData')" type="primary">提交</el-button>
<el-button @click="resetForm('formData')">重置</el-button>
</el-form-item>
</el-form>
</section>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
name: 'Home',
data () {
return {
formData: {
name: '',
regionList: [{
label: '上海',
value: 'shanghai'
}, {
label: '北京',
value: 'beijing'
}]
},
// rules 定义表单校验规则,是一个对象
rules: {
name: [{ required: true, message:'请输入活动名称', trigger: 'blur' }],
value: [{ required: true, message:'请选择活动区域', trigger: 'blur' }]
}
}
},
methods: {
submitForm (formName) {
// validate 校验
this.$refs[formName].validate(valid => {
/**
* VSCode 多行注释快捷键 alt + shift + a
* 提交表单模式数据
* 项目实战表单校验向服务器发送请求
*/
if(valid) {
resourseService.saveData(this.formData).then(res => {
if(res.data) {
this.$message({
showClose: true,
message: res.data.message,
// type 设置消息提示框按钮主题色 success/error/info/warning
type: 'success'
})
} else {
this.$message({
showClose: true,
message: res.data.message,
type: 'error'
})
}
})
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
})
</script>