vue 复杂且大量 el-form-item 表单结构优化问题请教

如题,目前最主要的动态因素是不同模块影响不同的表单配置,最主要的就使用了 switch case 返回不同的配置数组,再为每个表单取字符串名,如果 switch case"模块名"  return 的数组中包含这个字符串名,就是 v-if 为 true,但是随着数量越来越多,交互的条件越来越来多,让表单填写多了变得卡顿....  大佬们是否有别的实现思路,或者优化方法
```vue
<el-col
  v-if="
switchFn(item.configType, item).includes('address')
  "
>
  <el-form-item
:prop="`item.address`"
:rules="[
   {
      required: true,
      message: '必填项',
      trigger: 'blur'
   }]"
label="地址"
  >
<el-input v-model="item.address"/>
  </el-form-item>
</el-col>

lingxiaoli

有些本末倒置这里直接循环配置数组来做

paopjian

提前用 computed 计算好要展示的组件列表,而不是现比较?
还有就是可交互组件太多的原因?试试 lazy 或者掘金搜一下大表单卡顿

zhhbstudio

不同模块的表单放在一个组件里了？

可以 computed 计算出一个 arr 然后 v-if="arr.includes('addres')",当前你每个 col 都执行一边 switchFn

hevi

直接 computed 一个属性，然后 v-if="isAddress"

computed: {
isAddress(){
return item.configType === 'address';
}
}