elmentui 修改form表单某一个元素.不触发form表单渲染

antd的Form组件默认会在页面加载时自动触发表单的onValuesChange方法，导致输入框被自动聚焦。如果需要避免这种情况，可以通过设置Form组件的initialValues属性为表单的初始值，或者通过设置shouldUpdate属性为false来避免自动触发onValuesChange方法。具体的代码示例如下： ``` <Form initialValues={{ name: '', age: '' }} onValuesChange={(changedValues, allValues) => { console.log('onValuesChange', changedValues, allValues); }} shouldUpdate={false} > <Form.Item name="name" label="姓名"> <Input /> </Form.Item> <Form.Item name="age" label="年龄"> <Input /> </Form.Item> </Form> ``` 在这个例子中，我们通过设置initialValues属性为{name: '', age: ''}，来避免Form组件在页面加载时自动触发onValuesChange方法。如果想要在表单值发生变化时触发onValuesChange方法，可以手动修改表单的值。同时，我们还将shouldUpdate属性设置为false，来避免表单在每次值变化时都重新渲染，提高表单性能。

### Vue2 中使用 ElementUI 创建动态表单 在 Vue2 和 ElementUI 的组合中，创建动态表单可以通过绑定数据模型并利用 `v-for` 指令来实现。以下是详细的说明以及示例代码。 #### 数据结构设计 为了支持动态增删字段的功能，通常会定义一个数组类型的变量用于存储表单项的数据。每项可以是一个对象，包含具体的输入值和其他属性。 ```javascript data() { return { dynamicForm: { fields: [ { key: 'field1', value: '', type: 'input' }, { key: 'field2', value: false, type: 'switch' } ] } }; } ``` 上述代码展示了如何初始化一个简单的动态表单数据结构[^1]。其中 `fields` 是一个数组，每一项代表一个表单项，具有不同的类型（如 input 或 switch）。 --- #### 表单渲染逻辑 通过 `v-for` 遍历 `dynamicForm.fields` 数组，并根据每个项目的 `type` 属性决定渲染哪种控件。 ```vue <template> <el-form :model="dynamicForm"> <div v-for="(item, index) in dynamicForm.fields" :key="index"> <!-- 渲染 Input 类型 --> <el-form-item label="输入框" v-if="item.type === 'input'"> <el-input v-model="item.value"></el-input> </el-form-item> <!-- 渲染 Switch 类型 --> <el-form-item label="开关" v-else-if="item.type === 'switch'"> <el-switch v-model="item.value"></el-switch> </el-form-item> <!-- 可扩展其他类型 --> </div> <!-- 添加按钮 --> <el-button @click="addField">新增字段</el-button> <!-- 提交按钮 --> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> ``` 此模板部分实现了基于 `dynamicForm.fields` 的动态渲染功能[^4]。当点击“新增字段”按钮时，调用方法向该数组追加新项目；而提交操作则可触发后续处理逻辑。 --- #### 方法实现 下面提供两个主要函数：一个是用来增加新的表单项，另一个负责收集最终的表单数据供服务器端接收。 ```javascript methods: { addField() { const newKey = `field${this.dynamicForm.fields.length + 1}`; this.dynamicForm.fields.push({ key: newKey, value: '', type: 'input' }); }, submitForm() { console.log('提交的数据:', JSON.stringify(this.dynamicForm)); } } ``` 这里需要注意的是每次添加的新条目都应该具备唯一标识符以便区分不同记录[^3]。 --- #### 完整案例总结 综上所述，在 Vue2 结合 ElementUI 构建动态表单的过程中，关键是合理规划好内部状态管理机制——即怎样表示当前存在的各个子部件及其关联参数；其次是灵活运用框架所提供的组件完成界面搭建工作[^2]。 ```html <!-- HTML 文件 --> <div id="app"> <form-component></form-component> </div> <script> // JavaScript (Vue 组件) Vue.component('form-component', { template: '#form-template', data() { return { dynamicForm: { fields: [{ key: 'name', value: '', type: 'input' }] } }; }, methods: { addField() { let nextIndex = this.dynamicForm.fields.length; this.dynamicForm.fields.push({ key: `custom_${nextIndex}`, value: '', type: 'input' }); }, submitForm() { alert(JSON.stringify(this.dynamicForm)); } } }); new Vue({ el: '#app' }); </script> <template id="form-template"> <section> <el-form :model="dynamicForm"> <div v-for="(item, idx) of dynamicForm.fields" :key="idx"> <component :is="'el-' + item.type" v-bind="{ modelValue: item.value }" v-on:update:model-value="val => item.value = val" ></component> </div> <button @click.prevent="addField">Add Field</button> <button @click.prevent="submitForm">Submit Form</button> </el-form> </section> </template> ``` 以上便是完整的解决方案展示。 ---