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

文章目录

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

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

为什么需要 prop

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

  2. 重置操作resetFields() 方法是通过表单项的 prop 来重置相应的数据的。如果没有 propel-form 就无法识别哪些字段需要被重置,从而导致重置操作无法生效。

示例:使用 prop 的正确方式

vue 复制代码
<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

总结

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

相关推荐
CssHero1 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui4 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚6 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴7 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte11 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常12 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常14 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾15 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101817 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱19 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript