?基礎表單

<template><el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="100px"><el-form-item label="用戶名" prop="username"><el-input v-model="form.username" placeholder="請輸入用戶名" /></el-form-item><el-form-item label="郵箱" prop="email"><el-input v-model="form.email" placeholder="請輸入郵箱" /></el-form-item><el-form-item label="愛好"><!-- 注意: 愛好沒有 prop, 所以不會參與 el-form 的校驗 --><el-checkbox-group v-model="form.hobby"><el-checkbox label="讀書" /><el-checkbox label="音樂" /><el-checkbox label="電影" /></el-checkbox-group></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button><el-button @click="resetForm(ruleFormRef)">重置</el-button></el-form-item></el-form>
</template><script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'const ruleFormRef = ref() // 用于獲取 el-form 實例// 表單數據
const form = reactive({username: '',email: '',hobby: [] // 數組
})// 校驗規則
const rules = reactive({username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 3, max: 15, message: '長度在 3 到 15 個字符', trigger: 'blur' }],email: [{ required: true, message: '請輸入郵箱地址', trigger: 'blur' },{ type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }]
})// 提交表單
const submitForm = async (formEl) => {if (!formEl) return;try {// validate 返回 Promiseawait formEl.validate()ElMessage.success('提交成功!')console.log('表單數據:', form)} catch (error) {ElMessage.error('校驗失敗!')console.log('校驗失敗:', error)}
}// 重置表單
const resetForm = (formEl) => {if (!formEl) return;formEl.resetFields()
}
</script>

?行內表單 (Inline Form)

<template><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="用戶名"><el-input v-model="searchForm.username" placeholder="用戶名" /></el-form-item><el-form-item label="狀態"><el-select v-model="searchForm.status" placeholder="選擇狀態"><el-option label="全部" value="" /><el-option label="啟用" value="1" /><el-option label="禁用" value="0" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form>
</template><script setup>
import { reactive } from 'vue'const searchForm = reactive({username: '',status: ''
})const onSubmit = () => {console.log('查詢條件:', searchForm)
}
</script>

?標簽在上方的表單

<template><el-form :model="form" :rules="rules" label-position="top" label-width="100px"><el-form-item label="項目名稱" prop="projectName"><el-input v-model="form.projectName" /></el-form-item><el-form-item label="項目描述" prop="description"><el-input v-model="form.description" type="textarea" /></el-form-item><el-form-item><el-button type="primary">保存</el-button></el-form-item></el-form>
</template>

動態增減表單項

<template><el-form :model="dynamicForm" ref="dynamicFormRef"><el-form-itemv-for="(domain, index) in dynamicForm.domains":key="domain.key":label="index === 0 ? '域名' : ''" <!-- 只為第一個顯示標簽 -->:prop="'domains.' + index + '.value'":rules="{required: true, message: '域名不能為空', trigger: 'blur'}"><el-input v-model="domain.value" style="width: 300px; margin-right: 10px;" /><el-button @click.prevent="removeDomain(domain)">刪除</el-button></el-form-item><el-form-item><el-button @click="addDomain">新增域名</el-button><el-button type="primary" @click="submitDynamicForm(dynamicFormRef)">提交</el-button></el-form-item></el-form>
</template><script setup>
import { ref, reactive } from 'vue'const dynamicFormRef = ref()
const dynamicForm = reactive({domains: [{ value: '', key: Date.now() } // key 用于 v-for 的唯一性]
})const addDomain = () => {dynamicForm.domains.push({value: '',key: Date.now() + Math.random()})
}const removeDomain = (item) => {const index = dynamicForm.domains.indexOf(item)if (index !== -1) {dynamicForm.domains.splice(index, 1)}
}const submitDynamicForm = async (formEl) => {if (!formEl) return;try {await formEl.validate()ElMessage.success('提交成功!')console.log('動態表單數據:', dynamicForm.domains)} catch (error) {ElMessage.error('校驗失敗!')}
}
</script>

---

使用建議與最佳實踐

1. ref?是關鍵: 務必給?el-form?添加?ref，以便調用?validate,?resetFields?等方法。
2. prop?必須匹配?model:?el-form-item?的?prop?值必須是?model?對象中存在的屬性名，且路徑要正確（如嵌套對象用?user.name）。
3. 合理使用?trigger:?blur?適合必填和格式校驗，避免用戶輸入時頻繁報錯。change?適合實時性要求高的校驗（如密碼強度）。
4. resetFields?的陷阱: 它重置的是組件初始化時的?model?值。如果需要重置到一個特定的值（比如空對象?{}），可以在調用?resetFields()?后手動設置?model，或者使用?clearValidate()?和手動清空數據。
5. 異步校驗: 使用?asyncValidator?處理需要請求后端驗證的場景（如用戶名唯一性檢查）。注意防抖。
6. status-icon: 開啟后，用戶能更直觀地看到輸入狀態。
7. scroll-to-error: 對于長表單，開啟此功能能提升用戶體驗。
8. inline-message: 在空間緊湊的布局中，使用行內錯誤信息可以節省垂直空間。
9. 自定義錯誤信息: 使用?el-form-item?的?error?屬性或?slots?可以完全控制錯誤信息的顯示。
10. 組合使用:?el-form?可以與?el-row/el-col?結合，實現更復雜的響應式表單布局。

掌握 el-form 的數據綁定、校驗機制和布局控制，是高效開發 Vue + Element Plus 應用的基礎。它極大地簡化了表單處理的復雜性。