How to use Vue3 Element Plus el-form form component

In Element Plus, el-form is a form component used to create forms for users to fill in and submit data. It provides many built-in validation rules and validation methods to make form validation easier.

Using the el-form component, you can organize form controls together and validate the form to ensure that the submitted data meets the expected format and requirements. This component has the following features:

• Supports built-in validation rules and custom validation functions.

• You can bind form data to the form component by setting the model attribute.

• Supports callback functions before and after form validation.

• Provides some common form controls, such as input boxes, drop-down boxes, radio buttons, check boxes, etc.

In terms of functionality and usage, the el-form component is similar in Element Plus and ElementUI, but there are some changes in some details.

The following are some major changes to the el-form component in Element Plus and ElementUI:

• Introduction method: ElementUI uses Vue. Use(ElementUI) to introduce components, while Element Plus uses import to import components. For example, to use Element Plus in Vue 3, we need to import the el-form component like this:

import { ElForm } from 'element-plus'

• Style: Element Plus uses the new The default theme and style of ElementUI are different from the default theme and style of ElementUI. You can use the theme styles provided by Element Plus or customize the theme styles.

• Form validation: In Element Plus, form validation is performed through the this.$refs.form.validate() method. In ElementUI, form validation is performed through the this.$refs.form.validate((valid) => {}) method. This is because in Element Plus, the form validation callback function is an optional parameter.

• Form controls: Some new form controls have been added to Element Plus, such as TimePicker, DatePicker, TreeSelect wait. In ElementUI, these form controls are provided in el-date-picker, el-time-picker, el-cascader and other components.

• Translation: Element Plus supports more language translations, and can support more languages ​​by customizing translation objects. In ElementUI, only the default language translation and several language packs are available.

In short, Element Plus is an upgraded version of ElementUI, providing more form controls and functions, while also improving some details and styles. Although there are some changes between the two, if you are already familiar with ElementUI's el-form component, you will quickly adapt to using Element Plus.

el-form is a form component in Element Plus. The following are the commonly used properties and methods of el-form:

Common properties

• model: Used to bind form data objects, you can use v-model to bind to form elements. For example, <el-input v-model="formData.username"></el-input>.

• rules: Used to set form validation rules. Rules is an array where each object represents a validation rule. For example, rules: { username: [ { required: true, message: 'Please enter your username', trigger: 'blur' } ] }.

• label-width: Used to set the label width of the form element.

• label-position: used to set the position of the form element label. Optional values ​​​​are 'right', 'left ', 'top', 'bottom'.

• #inline: used to set whether it is an inline form.

• disabled: Used to set whether to disable the form.

Common methods

• validate: used to trigger form verification. If the verification is successful, execute the callback function and pass true, otherwise false is passed. For example, formRef.value.validate((valid) => { if (valid) { // Form validation succeeded } else { // Form validation failed } }).

• resetFields: Used to reset form data and validation status.

• clearValidate: Used to clear form validation status.

• validateField: Used to trigger validation of specified form elements. For example, formRef.value.validateField('username', (errorMessage) => { if (errorMessage) { // Validation failed } else { // Validation succeeded } }).

• submit：用于提交表单数据，需要指定一个回调函数，该函数在提交成功或失败时被调用。例如，formRef.value.submit((formData) => { // 表单提交成功 }, (error) => { // 表单提交失败 })。

这些是 el-form 常用的属性和方法，当然，还有其他属性和方法可以在需要时使用。在 Element Plus 的官方文档中，您可以找到更详细的文档和示例。

下面是一个简单的 el-form 示例，包括一个输入框和一个提交按钮：

<template>
  <el-form ref="form" :model="formData" :rules="rules">
    <el-form-item label="Username" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from &#39;vue&#39;
import { ElForm, ElFormItem, ElInput, ElButton } from &#39;element-plus&#39;

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const formData = ref({
      username: &#39;&#39;,
    })

    const rules = ref({
      username: [
        { required: true, message: &#39;Username is required&#39;, trigger: &#39;blur&#39; },
        { min: 3, max: 16, message: &#39;Length should be between 3 and 16&#39;, trigger: &#39;blur&#39; }
      ]
    })

    const submitForm = () => {
      formRef.value.validate(valid => {
        if (valid) {
          // Submit form data
        } else {
          console.log(&#39;Validation failed&#39;)
          return false
        }
      })
    }

    const formRef = ref(null)

    return {
      formData,
      rules,
      submitForm,
      formRef,
    }
  }
}
</script>

The above is the detailed content of How to use Vue3 Element Plus el-form form component. For more information, please follow other related articles on the PHP Chinese website!