Vue3 Element Plus 中 el-form 表单组件的使用方法

在 Vue3 结合 Element Plus 进行前端开发时，el-form 表单组件是常用的交互元素之一，它能方便地收集用户输入信息并进行数据校验等操作。下面详细介绍其使用方法。

引入 el-form 组件。在 Vue 组件中，通过 import 引入 Element Plus 的相关组件，如：import { ElForm, ElFormItem, ElInput } from 'element-plus'; 并在 components 选项中注册。

基本使用方面，el-form 组件需要配合 el-form-item 组件使用。el-form 用于包裹整个表单，而 el-form-item 用于包裹每个表单字段。例如：

<template>
  <el-form ref="formRef" :model="formData" label-width="120px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" type="password"></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
const formRef = ref(null);
const formData = ref({
  username: '',
  password: ''
});
</script>

这里，:model 绑定表单数据对象 formData，prop 属性用于指定表单字段在数据对象中的 key。

数据校验是 el-form 组件的重要功能。可以通过在 el-form-item 中设置 prop 属性，并在表单数据对象对应的属性上设置校验规则。例如：

const rules = {
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度为 3 到 10 位', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, message: '密码至少 6 位', trigger: 'blur' }
  ]
};

然后在 el-form 中添加 :rules="rules" 绑定校验规则。调用 formRef.value.validate() 方法即可触发校验。

提交表单时，在 el-form 中添加 @submit="submitForm" 绑定提交事件处理函数，在函数内进行数据处理和提交逻辑。

掌握 Vue3 Element Plus 中 el-form 表单组件的使用方法，能有效提升前端表单开发的效率和用户体验，无论是简单的信息收集还是复杂的业务表单处理都能轻松应对。