vue2动态切换组件（demo）

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

新增字段

                <el-form-item label="字段名" label-width="80px">
                    <el-select
                      v-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匹配

                   <el-form-item label="输入数值" label-width="100px">
                    <el-input-number
                      v-if="condition.field_type === 'int'"
                      v-model="condition.value"
                    />

                    <el-input
                      v-else-if="condition.field_type === 'string'"
                      v-model="condition.value"
                    />

                    <el-date-picker
                      v-else-if="condition.field_type === 'date'"
                      v-model="condition.value"
                    />

                    <el-time-picker
                      v-else-if="condition.field_type === 'time'"
                      v-model="condition.value"
                    />
                    <el-input
                      v-else
                      v-model="condition.value"
                      placeholder="请输入值"
                    />
                  </el-form-item>

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

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

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

组件使用 ：is 属性

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

获取组件的方法如下

// 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'
      }