如何基于JSON数据在BootstrapVue中动态生成select/checkbox等表单字段？

解决思路 #

要实现动态适配多JSON结构的表单渲染，你需要先统一JSON配置的字段规范，再通过条件判断/动态组件的方式匹配对应的表单组件，具体实现步骤如下：

步骤1：统一JSON配置规范 #

给每个字段配置项新增type字段明确组件类型，可选值可自定义：

• 输入框类：text/number/password/email等，对应<b-form-input>
• 选择框类：select，对应<b-form-select>
• 复选框类：checkbox，对应<b-form-checkbox>

调整后的test.json示例：

[
    {
        "number": "1111",
        "key": "key1",
        "label": "Input 1",
        "type": "text",
        "value": ""
    },
    {
        "number": "2222",
        "key": "key2",
        "label": "Input 2",
        "type": "text",
        "value": ""
    },
    {
        "number": "3333",
        "key": "key3",
        "label": "Input 3",
        "type": "number",
        "value": ""
    },
    {
        "number": "4444",
        "key": "key4",
        "label": "Select Input",
        "type": "select",
        "options": [
            { "text": "Value 1", "value": "value1" },
            { "text": "Value 2", "value": "value2" },
            { "text": "Value 3", "value": "value3" },
            { "text": "Value 4", "value": "value" }
          ],
        "value": ""
    },
    {
        "number": "5555",
        "key": "key5",
        "label": "是否同意协议",
        "type": "checkbox",
        "value": false
    }
]

步骤2：实现组件渲染 #

方案1：v-if条件判断（适合组件类型少的场景）

直接在模板中通过type判断渲染对应组件，逻辑简单直观：

<template>
  <div v-for="item in testJSON" :key="item.key">
    <label class="mt-2">{{item.label}}</label>
    <!-- 输入框类组件 -->
    <b-form-input 
      v-if="['text','number','password','email'].includes(item.type)"
      :type="item.type" 
      v-model="item.value"
    ></b-form-input>
    <!-- 选择框组件 -->
    <b-form-select 
      v-else-if="item.type === 'select'"
      v-model="item.value"
      :options="item.options"
    ></b-form-select>
    <!-- 复选框组件 -->
    <b-form-checkbox
      v-else-if="item.type === 'checkbox'"
      v-model="item.value"
    ></b-form-checkbox>
  </div>
</template>

<script>
import test from './json/test.json'
export default {
  name: 'Test',
  data() {
    return {
      testJSON: test,
    }
  }
}
</script>

方案2：动态组件（适合组件类型多、需适配多JSON的场景）

通过组件映射表+动态props实现更高扩展性，后续新增组件只需更新映射关系，无需修改模板：

<template>
  <div v-for="item in testJSON" :key="item.key">
    <label class="mt-2">{{item.label}}</label>
    <component 
      :is="componentMap[item.type]" 
      v-model="item.value"
      v-bind="getComponentProps(item)"
    />
  </div>
</template>

<script>
import test from './json/test.json'
export default {
  name: 'Test',
  data() {
    return {
      testJSON: test,
      // 组件类型和BootstrapVue组件名的映射表
      componentMap: {
        text: 'BFormInput',
        number: 'BFormInput',
        password: 'BFormInput',
        email: 'BFormInput',
        select: 'BFormSelect',
        checkbox: 'BFormCheckbox'
      }
    }
  },
  methods: {
    // 动态返回对应组件需要的props
    getComponentProps(item) {
      const baseProps = {}
      switch(item.type) {
        case 'text':
        case 'number':
        case 'password':
        case 'email':
          baseProps.type = item.type
          break
        case 'select':
          baseProps.options = item.options
          break
      }
      return baseProps
    }
  }
}
</script>

两种方案都可以满足多JSON适配需求，只要不同JSON的字段配置都遵循你定义的type规范即可。

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