Element中为什么不使用prop重置无法生效

文章目录

• • • [为什么需要 `prop`？](#为什么需要 prop？)
    • [示例：使用 `prop` 的正确方式](#示例：使用 prop 的正确方式)
    • 关键点
    • 总结

在 element-ui 的 el-form 组件中， prop 属性是与表单验证和表单字段绑定密切相关的，尤其在使用 resetFields() 重置表单数据时。
如果不使用 prop， el-form 将无法准确地识别和操作每个表单项，因此重置操作可能无法生效。

为什么需要 prop？

1. 验证依赖 ：表单验证需要通过 prop 来区分不同的表单项，确保验证规则能够正确应用。没有 prop，el-form 就无法知道如何验证这个字段，也无法在表单重置时清除验证状态。

2. 重置操作 ：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>

关键点

1. prop 属性 ：为每个 el-form-item 添加 prop 属性，prop 应该与 model 中的字段名称对应。这样，el-form 才能正确地识别并重置每个字段。

2. resetFields() ：this.$refs.form.resetFields() 会根据 prop 属性来重置表单项的值和校验状态，因此必须为每个表单项提供 prop。

总结

没有 prop，resetFields() 无法知道要重置哪些字段，从而导致重置操作无法生效。因此，为了使表单重置生效，确保每个 el-form-item 都有 prop 属性，且 prop 与 model 中的数据字段相对应。