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

[siguapajamas]

如题,目前最主要的动态因素是不同模块影响不同的表单配置,最主要的就使用了 switch case 返回不同的配置数组,再为每个表单取字符串名,如果 switch case"模块名" return 的数组中包含这个字符串名,就是 v-if 为 true,但是随着数量越来越多,交互的条件越来越来多,让表单填写多了变得卡顿.... 大佬们是否有别的实现思路,或者优化方法

<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]

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

[siguapajamas]

@lingxiaoli 是有考虑过直接数组循环,我的业务场景其实是有多层 v-for 循环以及不同的表单校验,例如手机号邮箱等等奇奇怪怪的校验的, 也是我的错没有表现出来...😫 但是即使是走数组循环,一次性填写的表单多了一样会卡顿

[paopjian]

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

[siguapajamas]

@paopjian 这是多个配置项的其中之一,computed 也是跟随着依赖数据变化而变化把?我的模块或者其他配置项改变也会导致 computed 值改变,最终让 v-if 再次触发,感觉没啥差别前辈😱

[siguapajamas]

@paopjian 可以看到我的 switchFn 传入了模块名的值和遍历的 item 所有值, 就是配置项数组是受到不同模块的影响,以及模块中某些配置项的影响,因此 computed 也是随着配置项的改变时刻在变

[zhhbstudio]

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

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

[hevi]

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

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

[siguapajamas]

@zhhbstudio 是的前人的代码是所有的模块都揉在一个组件里面,4k+的代码行数 并且这种做法只要当前只要配置项一遍就会自动全部重新执行一遍 col 的 switchFn 导致效率变低
@hevi 好的 我会在新的类似的大量表单结构里面尝试使用这种方法,实际上我现在正在做.....只是不太想沿用前任的方法,于是上 v 社问问

[siguapajamas]

@hevi 额.....我又细看了一下,你可能理解错我的意思了,实际上这样的表单有无数个[无语] switchFn 会根据传入的值判断返回的数组例如['addres','aaa','bbb','ccc']等等,传入不同的会传出不同的数组,然后用 includes 来做判断,按照你那样我需要写无数个了.....

[siguapajamas]

@zhhbstudio 额...莫名其妙多一个 表情....请忽略,并不是我的本意

[siguapajamas]

@hevi 额...莫名其妙多一个 表情....请忽略,并不是我的本意

[AdminZ]

component 动态组件。规定好 json 配置规则，统一配置好基础表单项，如果有特定类别对应的特定 item ，使用 template 和 v-if 去增加，可以灵活处理，不然你类型多了，无数个 v-if

[siguapajamas]

@AdminZ 是的目前就是类型很多 无数个 v-if 前人的代码我是不打算改了,之后我就是走 JSON 定好格式,然后循环渲染