element-plus 表单

### 关于 Element-Plus 表单组件的使用指南 Element-Plus 是 Vue 3 的一个现代化 UI 组件库，提供了丰富的表单组件来帮助开发者快速构建交互式的用户界面。以下是有关如何使用 Element-Plus 表单组件的一些核心概念和示例。 #### 1. 基本结构 `<el-form>` 是用于创建表单的主要容器组件，它支持嵌套多个 `<el-form-item>` 子组件，每个子组件代表表单项的一部分。通过 `model` 属性绑定数据对象，可以实现双向数据绑定[^2]。 ```vue <template> <el-form :model="form"> <el-form-item label="用户名"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' } }; }, methods: { onSubmit() { console.log('提交的数据:', this.form); } } }; </script> ``` #### 2. 验证功能 为了确保输入的有效性，可以通过设置 `rules` 来定义验证规则，并将其传递给 `<el-form>` 的 `rules` 属性。当触发校验时（例如点击按钮），调用 `validate()` 方法即可完成验证逻辑[^3]。 ```vue <template> <el-form :model="form" :rules="rules" ref="ruleFormRef"> <el-form-item label="邮箱地址" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button> </el-form-item> </el-form> </template> <script> import { ElMessage } from 'element-plus'; export default { data() { const validateEmail = (rule, value, callback) => { if (!value || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) { callback(new Error('请输入有效的电子邮件')); } else { callback(); } }; return { form: { email: '' }, rules: { email: [{ validator: validateEmail, trigger: 'blur' }] } }; }, setup() { let ruleFormRef = null; return { ruleFormRef }; }, methods: { submitForm(formEl) { if (!formEl) return; formEl.validate((valid) => { if (valid) { ElMessage.success('验证成功'); } else { ElMessage.error('验证失败'); } }); } } }; </script> ``` #### 3. 动态增删字段 如果需要动态管理表单中的字段数量，则可以在绑定的对象中维护数组类型的属性并结合循环渲染列表项[^4]。 ```vue <template> <el-form :model="dynamicFields"> <div v-for="(item, index) in dynamicFields.items" :key="index"> <el-form-item :label="'项目名称 #' + (index + 1)"> <el-input v-model="item.name"></el-input> <el-button @click.prevent="removeField(index)">删除</el-button> </el-form-item> </div> <el-form-item> <el-button @click="addField">新增一项</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { dynamicFields: { items: [ { name: '' } ] } }; }, methods: { addField() { this.dynamicFields.items.push({ name: '' }); }, removeField(index) { if (this.dynamicFields.items.length > 1) { this.dynamicFields.items.splice(index, 1); } } } }; </script> ``` ---