Vue中如何动态渲染Element UI组件并绑定响应式equipment对象

针对你当前的需求，下面分两部分完善逻辑：修复双向绑定、实现组件动态增删。

一、修复双向绑定逻辑 #

当前RenderString组件仅传递了字段路径字符串，未实现响应式取值和更新逻辑。修改组件如下：

<script>
import { h } from 'vue'

// 根据路径获取对象属性值
const getValueByPath = (obj, path) => {
  return path.split('.').reduce((current, key) => current?.[key], obj)
}

// 根据路径设置对象属性值
const setValueByPath = (obj, path, value) => {
  const keys = path.split('.')
  const lastKey = keys.pop()
  const target = keys.reduce((current, key) => {
    if (!current[key]) current[key] = {}
    return current[key]
  }, obj)
  target[lastKey] = value
}

export default {
  props: {
    inputHtml: {
      type: String,
      required: true,
    },
    equipment: {
      type: Object,
      required: true,
    },
  },
  render(props) {
    const { inputHtml, equipment } = props
    // 解析组件标签
    const tag = inputHtml.split('v-')[0].replace('<', '').trim()
    // 解析绑定字段路径（从v-model中提取）
    const fieldPath = inputHtml.split('v-model="equipment.')[1]?.split('"')[0].trim()
    if (!fieldPath) return null

    // 获取当前字段的响应式值
    const currentValue = getValueByPath(equipment, fieldPath)

    return h(tag, {
      modelValue: currentValue,
      // 监听组件更新事件，同步修改equipment对象
      'onUpdate:modelValue': (newValue) => {
        setValueByPath(equipment, fieldPath, newValue)
      },
      // 可根据组件类型添加默认属性（比如给输入框加占位符）
      ...(tag === 'el-input' ? { placeholder: `请输入${fieldPath}` } : {}),
    })
  },
}
</script>

同时修改父组件模板，传入equipment对象，并调整v-for的key（避免重复组件冲突）：

<div v-for="(item, index) in inputState.allInputFields" :key="index">
  <el-button size="small" type="danger" @click="removeInputField(index)">删除</el-button>
  <RenderString :input-html="item.inputtype" :equipment="equipment" />
</div>
<el-button type="primary" @click="addInputField">添加组件</el-button>

二、实现组件动态增删逻辑 #

在父组件中添加增删方法，维护allInputFields数组和对应的equipment字段：

Vue3 Composition API 示例 #

import { reactive } from 'vue'

export default {
  setup() {
    // 响应式equipment对象
    const equipment = reactive({
      active: false,
      description: '',
      division: '',
      modifiedBy: ''
    })

    // 存储所有要渲染的组件配置
    const inputState = reactive({
      allInputFields: [
        { inputtype: '<el-switch v-model="equipment.active" />' },
        { inputtype: '<el-input v-model="equipment.description" />' },
        { inputtype: '<el-input v-model="equipment.division" />' },
        { inputtype: '<el-input v-model="equipment.modifiedBy" />' }
      ]
    })

    // 添加新组件（示例默认添加el-input，绑定到equipment的新字段）
    const addInputField = () => {
      const newFieldName = `field${inputState.allInputFields.length + 1}`
      // 初始化equipment的新字段
      equipment[newFieldName] = ''
      inputState.allInputFields.push({
        inputtype: `<el-input v-model="equipment.${newFieldName}" />`
      })
    }

    // 删除指定索引的组件，同步删除equipment对应字段
    const removeInputField = (index) => {
      const item = inputState.allInputFields[index]
      const fieldPath = item.inputtype.split('v-model="equipment.')[1]?.split('"')[0].trim()
      if (fieldPath) {
        delete equipment[fieldPath]
      }
      inputState.allInputFields.splice(index, 1)
    }

    return {
      equipment,
      inputState,
      addInputField,
      removeInputField
    }
  }
}

Vue2 Options API 示例 #

export default {
  data() {
    return {
      equipment: {
        active: false,
        description: '',
        division: '',
        modifiedBy: ''
      },
      inputState: {
        allInputFields: [
          { inputtype: '<el-switch v-model="equipment.active" />' },
          { inputtype: '<el-input v-model="equipment.description" />' },
          { inputtype: '<el-input v-model="equipment.division" />' },
          { inputtype: '<el-input v-model="equipment.modifiedBy" />' }
        ]
      }
    }
  },
  methods: {
    addInputField() {
      const newFieldName = `field${this.inputState.allInputFields.length + 1}`
      this.equipment[newFieldName] = ''
      this.inputState.allInputFields.push({
        inputtype: `<el-input v-model="equipment.${newFieldName}" />`
      })
    },
    removeInputField(index) {
      const item = this.inputState.allInputFields[index]
      const fieldPath = item.inputtype.split('v-model="equipment.')[1]?.split('"')[0].trim()
      if (fieldPath) {
        delete this.equipment[fieldPath]
      }
      this.inputState.allInputFields.splice(index, 1)
    }
  }
}

注意事项 #

1. 若需要支持更复杂的组件（如el-select带下拉选项），可扩展inputHtml的解析逻辑，提取并传递额外属性。
2. 若组件可能重复，建议给allInputFields的每个item添加唯一id，替代index作为v-for的key，避免渲染异常。

内容的提问来源于stack exchange，提问作者Nenad Kalicanin