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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

如题,目前最主要的动态因素是不同模块影响不同的表单配置,最主要的就使用了 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>

14 条回复 • 2024-10-10 13:29:29 +08:00

lingxiaoli

30 天前

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

siguapajamas

30 天前

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

paopjian

30 天前

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

siguapajamas

30 天前

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

siguapajamas

30 天前

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

zhhbstudio

30 天前

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

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

hevi

30 天前

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

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

siguapajamas

30 天前

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

siguapajamas

30 天前

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

siguapajamas

30 天前

@zhhbstudio 额...莫名其妙多一个

表情....请忽略,并不是我的本意

siguapajamas

30 天前

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

AdminZ

30 天前

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

siguapajamas

30 天前

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

joytian

29 天前

你一个表单里有多少表单项会导致卡顿呢？解决思路：1 、减少页面上 dom 节点数量，滑到视口时才展示。2 、在展示之前先计算好哪些表单项是会被展示出来的，计算完了就不去操作了，修改表单项的值也不应该重新计算吧，除非是两个表单项之间有依赖关系的