demo背景：页面上新增字段（接口返回），根据新增字段的类型来匹配相应的输入框，比如int匹配数字输入框，String匹配字符类型输入框，data匹配时间输入框...

新增字段

javascript">                <el-form-item label="字段名" label-width="80px"><el-selectv-model="condition.fieldName"placeholder="请选择"@change="updateFieldType(condition.fieldName, index)"> <!-- 传递 index --><el-option v-if="reportFields.length > 0" v-for="item in reportFields":key="item.id":label="item.name":value="item.fieldName"></el-option></el-select></el-form-item>

输入框采取v-if匹配

javascript">                   <el-form-item label="输入数值" label-width="100px"><el-input-numberv-if="condition.field_type === 'int'"v-model="condition.value"/><el-inputv-else-if="condition.field_type === 'string'"v-model="condition.value"/><el-date-pickerv-else-if="condition.field_type === 'date'"v-model="condition.value"/><el-time-pickerv-else-if="condition.field_type === 'time'"v-model="condition.value"/><el-inputv-elsev-model="condition.value"placeholder="请输入值"/></el-form-item>

选择字段后会触发更新字段类型的方法

javascript"> // 更新选中字段的类型updateFieldType(fieldName, index) {console.log('更新选中的字段类型:', fieldName)const selectedField = this.reportFields.find(item => item.fieldName === fieldName)if (selectedField) {
// 更新对应条件的 fieldTypethis.conditions[index].field_type = selectedField.field_type }console.log('更新完后的字段类型:', this.conditions[index].field_type)}

-------------------------------------------------优化-------------------------------------------------------------------------

组件使用 ：is 属性

javascript"><component   :is="getComponent(condition.field_type)"  v-model="condition.value"  
/>  

获取组件的方法如下

javascript">// todo 根据fieldType选择条件输入数值的组件getComponent(field_type) {console.log('现在的字段类型' + field_type)switch (field_type) {case 'int':return 'el-input-number'case 'string':return 'el-input'case 'date':return 'el-date-picker'case 'time':return 'el-time-picker'default:return 'el-input'}