文章目录
- 为什么需要 `prop`?
- 示例:使用 `prop` 的正确方式
- 关键点
- 总结
在
element-ui
的
el-form
组件中,
prop
属性是与表单验证和表单字段绑定密切相关的,尤其在使用
resetFields()
重置表单数据时。
如果不使用
prop
,
el-form
将无法准确地识别和操作每个表单项,因此重置操作可能无法生效。
为什么需要 prop
?
-
验证依赖:表单验证需要通过
prop
来区分不同的表单项,确保验证规则能够正确应用。没有prop
,el-form
就无法知道如何验证这个字段,也无法在表单重置时清除验证状态。 -
重置操作:
resetFields()
方法是通过表单项的prop
来重置相应的数据的。如果没有prop
,el-form
就无法识别哪些字段需要被重置,从而导致重置操作无法生效。
示例:使用 prop
的正确方式
<template><div style="padding: 20px;"><el-form ref="form" :model="form" label-width="auto" style="width:100%"><el-row><el-col :span="12"><el-form-item label="产品名称" prop="name"><el-input v-model="form.name" placeholder="请输入产品名称" /></el-form-item></el-col><el-col :span="12"><el-form-item label="产品类型" prop="region"><el-select v-model="form.region" placeholder="请输入产品类型"><el-option label="应用产品" value="001" /><el-option label="WEB产品" value="002" /></el-select></el-form-item></el-col><el-col :span="24"><el-form-item label="产品简介" prop="desc"><el-input v-model="form.desc" type="textarea" /></el-form-item></el-col></el-row><el-row justify="center"><el-form-item><el-button type="primary" @click="onSubmit">搜索</el-button><el-button @click="onReset">重置</el-button></el-form-item></el-row></el-form></div>
</template><script>
export default {data() {return {form: {name: '',region: '',desc: ''}};},methods: {onSubmit() {console.log('submit!');},onReset() {this.$refs.form.resetFields();}}
};
</script><style lang="scss" scoped>
/* 样式部分 */
</style>
关键点
-
prop
属性:为每个el-form-item
添加prop
属性,prop
应该与model
中的字段名称对应。这样,el-form
才能正确地识别并重置每个字段。 -
resetFields()
:this.$refs.form.resetFields()
会根据prop
属性来重置表单项的值和校验状态,因此必须为每个表单项提供prop
。
总结
没有 prop
,resetFields()
无法知道要重置哪些字段,从而导致重置操作无法生效。因此,为了使表单重置生效,确保每个 el-form-item
都有 prop
属性,且 prop
与 model
中的数据字段相对应。