Vuetify动态创建表单radio类型字段渲染异常问题咨询

问题答复 #

1. 是否支持仅通过v-text-field的:type属性动态生成所有类型表单字段？ #

不支持。
v-text-field的定位是文本输入类组件，它的type属性仅支持原生文本输入相关的类型，比如text、password、number、email、tel这类交互形态为输入框、输出值为文本的类型。radio属于选择类控件，交互逻辑、DOM结构和文本输入完全不同，不在v-text-field的支持范围内，仅传type="radio"不可能渲染出正常可用的单选按钮。

2. radio及其他表单类型是否需要单独引入对应专属组件实现？ #

是。
Vuetify对不同交互形态的表单控件做了独立拆分，不存在一个通用组件靠修改type就能覆盖所有表单类型的用法，除了你已经单独处理的select需要用v-select之外，常见类型对应的组件如下：

• 单选组：v-radio-group嵌套v-radio，和v-select一样接收选项列表、绑定选中值
• 多选复选框组：v-checkbox-group嵌套v-checkbox
• 多行文本输入：v-textarea
• 文件上传：v-file-input
• 开关控件：v-switch
• 日期/时间选择：对应v-date-picker/v-time-picker，或封装了选择器的输入组件

修正后的动态表单实现参考 #

你可以把现有代码按类型分支补全，针对radio类型加独立渲染逻辑，示例代码如下：

<v-col cols="12" md="4" v-for="(leadObj, i) in lead.data" :key="i" >
  <!-- 文本类输入：仅把属于文本输入的类型放在v-text-field分支 -->
  <v-col v-if="['text', 'password', 'number', 'email', 'tel', 'url'].includes(leadObj.inputType)">
     <v-text-field
        v-model="leadObj.comment"
        :type="leadObj.inputType"
        :counter="50"
        :label="leadObj.field"   
        :required="leadObj.required === 'required'"
      ></v-text-field>
   </v-col>
  <!-- 下拉选择分支 -->
  <v-col v-else-if="leadObj.inputType ==='select'">
        <v-select
           v-model="leadObj.comment"
           :items="leadObj.jsonData"
           item-text="name"
           item-value="value"
           :label="leadObj.field"
           :required="leadObj.required === 'required'"
         ></v-select>
  </v-col>
  <!-- 单选按钮分支 -->
  <v-col v-else-if="leadObj.inputType === 'radio'">
    <v-radio-group 
      v-model="leadObj.comment" 
      :label="leadObj.field" 
      :required="leadObj.required === 'required'"
    >
      <v-radio
        v-for="opt in leadObj.jsonData"
        :key="opt.id"
        :label="opt.name"
        :value="opt.value"
      ></v-radio>
    </v-radio-group>
  </v-col>
</v-col>

后续如果要加checkbox、textarea等其他类型，按照同样的方式加v-else-if分支、引入对应组件即可。

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