Vue3 Element Plus el-form表單元件怎麼使用

在 Element Plus 中，el-form 是一個表單元件，用於建立表單以便使用者填寫和提交資料。它提供了許多內建的驗證規則和驗證方法，使表單驗證更加容易。

使用 el-form 元件，您可以將表單控制項組織在一起，並對表單進行驗證，以確保提交的資料符合預期的格式和要求。此元件具有以下特性：

• 支援內建的驗證規則和自訂驗證函數。

• 可以透過設定 model 屬性將表單資料綁定到表單元件上。

• 支援表單驗證前和驗證後的回呼函數。

• 提供了一些常見的表單控件，如輸入方塊、下拉方塊、單選方塊、複選框等。

在功能和用法上，el-form 元件在 Element Plus 和 ElementUI 中是相似的，但是在一些細節上有一些變化。

以下是Element Plus 和ElementUI 中 el-form 元件的一些主要變更：

• 引入方式：ElementUI 使用 Vue. use(ElementUI) 的方式引入元件，而Element Plus 使用 import 導入元件。例如，在Vue 3 中使用Element Plus，我們需要這樣導入 el-form 元件：

import { ElForm } from 'element-plus'

• 樣式：Element Plus 使用新的預設主題和樣式，不同於ElementUI 的預設主題和樣式。您可以使用 Element Plus 提供的主題樣式或自訂主題樣式。

• 表單驗證：在 Element Plus 中，表單驗證透過 this.$refs.form.validate() 方法執行。而在 ElementUI 中，表單驗證是透過 this.$refs.form.validate((valid) => {}) 方法執行。這是因為在 Element Plus 中，表單驗證的回呼函數是一個可選參數。

• 表單控制項：Element Plus 中新增了一些新的表單控件，如 TimePicker、DatePicker、TreeSelect等。而在 ElementUI 中，這些表單控制項是在 el-date-picker、el-time-picker、el-cascader 等元件中提供的。

• 翻譯：Element Plus 支援更多的語言翻譯，並且可以透過自訂翻譯物件來支援更多的語言。而在 ElementUI 中，只有預設的語言翻譯和幾個語言包可用。

總之，Element Plus 是 ElementUI 的升級版，提供了更多的表單控制項和功能，同時也改進了一些細節和樣式。雖然兩者之間有一些變化，但是如果您已經熟悉了 ElementUI 的 el-form 組件，那麼您將很快地適應 Element Plus 的使用。

el-form 是Element Plus 中的表單元件，以下是 el-form 常用的屬性與方法：

常用屬性

• model：用於綁定表單資料對象，可以使用 v-model 綁定到表單元素。例如，9a32171e43b239262404303a4d3823903950f2ccdbe6d532f43d14c598b37daa。

• rules：用於設定表單驗證規則。規則是一個數組，其中每個物件表示一個驗證規則。例如，rules: { username: [ { required: true, message: '請輸入使用者名稱', trigger: 'blur' } ] }。

• label-width：用來設定表單元素的標籤寬度。

• label-position：用於設定表單元素標籤的位置，可選值有 'right'、'left '、'top'、'bottom'。

• inline：用於設定是否為行內表單。

• disabled：用於設定是否停用表單。

常用方法

• validate：用於觸發表單驗證，如果驗證成功，執行回呼函數並傳遞 true，否則傳遞 false。例如，formRef.value.validate((valid) => { if (valid) { // 表單驗證成功 } else { // 表單驗證失敗 } })。

• resetFields：用於重置表單資料和驗證狀態。

• clearValidate：用於清除表單驗證狀態。

• validateField：用於觸發指定表單元素的驗證。例如，formRef.value.validateField('username', (errorMessage) => { if (errorMessage) { // 驗證失敗 } else { // 驗證成功 } })。

• 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>

以上是Vue3 Element Plus el-form表單元件怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！