Elementui 中el-form表单中的ref是干嘛用的

最新推荐文章于 2025-03-18 17:21:53 发布

原创最新推荐文章于 2025-03-18 17:21:53 发布 · 1.3w 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

日常琐问专栏收录该内容

250 篇文章

订阅专栏

文章介绍了如何在ElementUI的el-form组件中使用ref属性进行组件引用，以便在Vue组件中直接操作表单，如验证、重置和提交数据。

在 Element UI 的 el-form 组件中，ref 是用来获取对该表单组件的引用的属性。通过给 el-form 添加 ref 属性，你可以在 Vue 组件中通过引用来访问和操作这个表单组件，而不需要通过 DOM 查询或其他方式。

使用 ref 属性可以在 Vue 组件的 JavaScript 部分直接访问 el-form 的实例，从而可以进行一系列操作，如表单验证、重置、获取表单数据等。

以下是一个使用 ref 属性的示例：

<template>
  <div>
    <el-form ref="myForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 更多表单项... -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        // 其他表单字段...
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        // 其他表单验证规则...
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.myForm.validate(valid => {
        if (valid) {
          // 执行表单提交操作
        } else {
          console.log('表单验证失败');
        }
      });
    },
    resetForm() {
      this.$refs.myForm.resetFields();
    },
  },
};
</script>

在这个例子中，通过在 el-form 上添加 ref="myForm"，你可以在 Vue 组件的方法中使用 this.$refs.myForm 来访问 el-form 的实例。在 submitForm 方法中，使用 this.$refs.myForm.validate 来触发表单验证，resetForm 方法中使用 this.$refs.myForm.resetFields 来重置表单。

总之，ref 属性允许你在 Vue 组件中通过引用直接访问 el-form 组件实例，从而方便地操作表单数据和执行相关操作。