在 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系結到表單元素，例如，<el-input v-model="formData.username"></el-input>，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 '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 = () => {
formRef.value.validate(valid => {
if (valid) {
// Submit form data
} else {
console.log('Validation failed')
return false
}
})
}
const formRef = ref(null)
return {
formData,
rules,
submitForm,
formRef,
}
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550705.html
標籤：其他
下一篇：返回列表