Vue3 Element Plus el-form form component example detailed explanation

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

useel-formComponents, you can organize form controls together and verify forms to ensure that the submitted data meets the expected format and requirements. This component has the following characteristics:

• Supports built-in verification rules and custom verification functions.
• You can set itmodelProperties bind form data to form components.
• Supports callback functions before and after form verification.
• Some common form controls are provided, such as input boxes, drop-down boxes, radio boxes, check boxes, etc.

In terms of functions and usage,el-formComponents are similar in Element Plus and ElementUI, but there are some changes in some details.

The following are Element Plus and ElementUIel-formSome major changes to the component:

• Introduce method: Use ElementUI(ElementUI)Introduce components in a way, while Element Plus usesimportImport components. For example, using Element Plus in Vue 3, we need to import it like thisel-formComponents:

import { ElForm } from 'element-plus'

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

• Form Verification: In Element Plus, form verification passesthis.$()Method execution. In ElementUI, form verification passesthis.$((valid) => {})Method execution. This is because in Element Plus, the form validation callback function is an optional parameter.

• Form control: Some new form controls have been added to Element Plus, such asTimePicker、DatePicker、TreeSelectwait. And in ElementUI, these form controls areel-date-picker、el-time-picker、el-cascaderetc. provided in components.

• Translation: Element Plus supports more language translation and can support more languages ​​through custom 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 features, while also improving some details and styles. Although there are some changes between the two, if you are already familiar with ElementUI'sel-formComponents, then you will quickly adapt to the use of Element Plus.

el-formIt is a form component in Element Plus, the following isel-formCommon properties and methods:

Common properties

• model: Used to bind form data objects, can be usedv-modelBind to form element. For example,<el-input v-model=""></el-input>。
• rules: Used to set form validation rules. A rule is an array where each object represents a validation rule. For example,rules: { username: [ { required: true, message: 'Please enter the username', trigger: 'blur' } ] }。
• label-width: Used to set the label width of the form element.
• label-position: Used to set the position of form element labels, optional values ​​include'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 it.true, otherwise passfalse. For example,((valid) => { if (valid) { // Form verification succeeded } else { // Form verification failed } })。
• resetFields: Used to reset form data and verify status.
• clearValidate: Used to clear form verification status.
• validateField: Used to trigger verification of specified form elements. For example,('username', (errorMessage) => { if (errorMessage) { // Verification failed } else { // Verification succeeded } })。
• submit: Used to submit form data, you need to specify a callback function that is called when the submission is successful or failed. For example,((formData) => { // Form submission was successful }, (error) => { // Form submission failed })。

These areel-formCommonly used properties and methods, of course, there are other properties and methods that can be used when needed. In the official documentation of Element Plus, you can find more detailed documentation and examples.

Here is a simple oneel-formExample, including an input box and a submit button:

<template>
  <el-form ref="form" :model="formData" :rules="rules">
    <el-form-item label="Username" prop="username">
      <el-input v-model=""></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 'vue'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const formData = ref({
      username: '',
    })

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

    const submitForm = () => {
      (valid => {
        if (valid) {
          // Submit form data
        } else {
          ('Validation failed')
          return false
        }
      })
    }

    const formRef = ref(null)

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

This is the end of this article about the Vue3 Element Plus el-form form component. For more related contents of the Vue3 Element Plus el-form form component, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!

Latest Comments