Vuetify内联编辑场景下如何按条件动态渲染组件替代硬编码索引判断

核心思路是将表单项的渲染规则全部收敛到配置数据中，彻底删除硬编码的索引判断逻辑，后续新增/修改表单项仅需调整配置即可，无需改动模板代码，天然支持动态扩展。

步骤1：改造list的tableValue配置项 #

给每个表单项新增type（对应渲染的组件类型）、bindKey（对应v-model绑定的字段名）、componentProps（组件需要透传的属性，比如下拉选项、占位符等）、rules（校验规则）字段，改造后示例如下：

list:  [
  {
    name: this.$t('general'),
    icon: 'mdi-folder-multiple-outline',
    tableValue: [
      {
        label: 'Email',
        value: this.systemAndTenantConfig.systemconfiguration.email,
        icon: 'mdi-pencil',
        // 新增配置字段
        type: 'text-field', // 对应v-text-field
        bindKey: 'email', // 对应systemconfiguration下的字段名
        rules: this.$_emailValidation, // 校验规则
        componentProps: {
          label: this.$t('email')
        }
      },
      {
        label: '时区',
        value: this.systemAndTenantConfig.systemconfiguration.timezone,
        icon: 'mdi-pencil',
        type: 'autocomplete', // 对应v-autocomplete
        bindKey: 'timezone',
        componentProps: {
          label: this.$t('timezone'),
          items: this.listOfTimeZones,
          itemText: 'displayname',
          itemValue: 'standardname'
        }
      },
      {
        label: '公司地址',
        value: this.systemAndTenantConfig.systemconfiguration.companyaddress,
        icon: 'mdi-pencil',
        type: 'textarea', // 对应v-textarea
        bindKey: 'companyaddress',
        componentProps: {
          label: this.$t('companyAddress')
        }
      }
    ]
  }
]

步骤2：替换模板中硬编码的表单项为动态组件 #

删除所有判断index === xx && secondIndex === xx的分支，改用Vue的动态组件<component>根据配置的type自动渲染对应组件，模板优化后片段如下：

<td>
  <p v-if="!(indexValue === index && secondIndexValue === secondIndex && show)">{{record.value}}</p>
  <v-col 
    cols="12" 
    lg="12" 
    v-if="indexValue === index && secondIndexValue === secondIndex && show"
  >
    <!-- 动态渲染对应组件 -->
    <component
      :is="`v-${record.type}`"
      dense
      hide-details
      outlined
      v-model="systemAndTenantConfig.systemconfiguration[record.bindKey]"
      v-bind="record.componentProps"
      :rules="record.rules || []"
    ></component>
  </v-col>
</td>

优化后优势 #

• 彻底删除硬编码逻辑，后续新增表单项仅需在tableValue中新增符合格式的配置项即可，无需修改模板
• 配置可从后端接口动态返回，完全支持动态扩展的业务场景
• 统一维护表单项规则，避免模板冗余代码

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