阿里低代码平台组件动态渲染不生效怎么办？

珂簪提问于 2026-02-10 11:30:34 阅读 23

框架

在阿里低代码平台开发表单时，我想根据后端返回的字段类型动态生成不同组件，比如输入框和下拉框交替出现。按照文档用了v-for循环渲染组件列表，但页面只显示了第一个组件，后面的全没了，控制台也没报错，搞不懂为啥没反应。

尝试过把组件注册写在循环外部和内部，数据是通过API正常获取到的数组。比如这样写：


<template>
  <a-form :model="formData">
    <div v-for="(field, index) in fields" :key="index">
      <!-- 这里根据type字段切换组件 -->
      <a-input v-if="field.type === 'input'" v-model="formData[field.key]"/>
      <a-select v-else-if="field.type === 'select'" v-model="formData[field.key]">
        <a-select-option v-for="option in field.options" :value="option.value">{{option.label}}</a-select-option>
      </a-select>
    </div>
  </a-form>
</template>

但实际页面上只显示第一个输入框，后面的下拉框完全没出现，数据数组里确实有多个不同类型的字段对象。是不是低代码平台对动态组件有特殊限制？

我来解答赞 6 收藏

反馈

1 条解答

若曦 Dev Lv1

key别用index，改成field.key或者唯一字段，index变动会复用dom导致渲染异常。你这个写法在低代码平台里组件销毁不干净，换key就搞定。

<div v-for="field in fields" :key="field.key">

  <a-input v-if="field.type === 'input'" v-model="formData[field.key]"/>

  <a-select v-else-if="field.type === 'select'" v-model="formData[field.key]">

    <a-select-option v-for="option in field.options" :value="option.value">{{option.label}}</a-select-option>

  </a-select>

</div>

2026-02-10 11:31