### 封装 `el-form` 组件 在 Vue 2 中对 `el-form` 进行二次封装能够提高代码的可维护性和重用性。通过创建一个新的自定义组件来包裹原始的 `el-form`，可以在多个地方轻松应用一致的行为和样式。 #### 定义新的表单组件 为了实现这一点，首先需要创建一个新的 Vue 组件文件，比如命名为 `MyForm.vue`： ```html <template> <el-form :model="formData" :rules="formRules"> <!-- 动态渲染字段 --> <div v-for="(field, index) in fields" :key="index"> <el-form-item :label="field.label" :prop="field.prop"> <component :is="field.component" v-bind.sync="formData[field.prop]" @input="$emit('update', formData)" /> </el-form-item> </div> <slot></slot> <!-- 插槽用于额外的内容 --> </el-form> </template> <script> export default { name: 'MyForm', props: ['fields'], data() { return { formData: {}, formRules: {} }; }, created() { this.initializeFormData(); this.setValidationRules(); }, methods: { initializeFormData() { const initialData = {}; this.fields.forEach(field => (initialData[field.prop] = field.default || "")); Object.assign(this.formData, initialData); }, setValidationRules() { let rules = {}; this.fields.map((item) => { if(item.rules){ rules[item.prop]= item.rules; } }); this.formRules=rules; } } }; </script> ``` 上述代码展示了如何构建一个基础版的 `MyForm` 组件[^1]。该组件接收一个名为 `fields` 的属性数组作为配置项，其中每个对象描述了要显示的一个输入控件的信息，包括标签名 (`label`)、数据键 (`prop`) 和关联的验证规则(`rules`)等参数。 #### 使用新组件 当准备好这个自定义组件之后，在其他页面或模块里就可以像这样引入并使用它了: ```html <my-form :fields="customFields"></my-form> ``` 同时还需要提供相应的字段定义给 `customFields` 变量，例如： ```javascript data(){ return{ customFields:[ { label:'用户名', prop:'username', component:'el-input'}, { label:'密码', prop:'password', component:'el-input', type:"password"}, // 更多字段... ] } } ``` 这种做法不仅使得界面布局更加简洁明了，而且也方便后期调整统一风格或是增加全局性的功能特性[^2]。