Element使用表单重置如果不使用prop，重置无法生效

文章目录

- - 为什么需要 `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。