这是一个创建于 429 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题,目前最主要的动态因素是不同模块影响不同的表单配置,最主要的就使用了 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> | 1 lingxiaoli 2024-10-09 10:25:46 +08:00 有些本末倒置 这里直接循环配置数组来做 |
 | 2 siguapajamas OP @lingxiaoli 是有考虑过直接数组循环,我的业务场景其实是有多层 v-for 循环以及不同的表单校验,例如手机号邮箱等等奇奇怪怪的校验的, 也是我的错没有表现出来... 但是即使是走数组循环,一次性填写的表单多了一样会卡顿 |
 | 3 paopjian 2024-10-09 10:49:59 +08:00 提前用 computed 计算好要展示的组件列表,而不是现比较? 还有就是可交互组件太多的原因?试试 lazy 或者掘金搜一下大表单卡顿 |
| 4 siguapajamas OP @paopjian 这是多个配置项的其中之一,computed 也是跟随着依赖数据变化而变化把?我的模块或者其他配置项改变也会导致 computed 值改变,最终让 v-if 再次触发,感觉没啥差别前辈 |
| 5 siguapajamas OP @paopjian 可以看到我的 switchFn 传入了模块名的值和遍历的 item 所有值, 就是配置项数组是受到不同模块的影响,以及模块中某些配置项的影响,因此 computed 也是随着配置项的改变时刻在变  |
 | 6 zhhbstudio 2024-10-09 11:12:13 +08:00 不同模块的表单放在个组件里了？ 可以 computed 计算出一个 arr 然后 v-if="arr.includes('addres')",当前你每个 col 都执行一边 switchFn |
 | 7 hevi 2024-10-09 11:15:28 +08:00 直接 computed 一个属性，然后 v-if="isAddress" computed: { isAddress(){ return item.cOnfigType=== 'address'; } } |
| 8 siguapajamas OP @zhhbstudio 是的前人的代码是所有的模块都揉在一个组件里面,4k+的代码行数 并且这种做法只要当前只要配置项一遍就会自动全部重新执行一遍 col 的 switchFn 导致效率变低 @hevi 好的 我会在新的类似的大量表单结构里面尝试使用这种方法,实际上我现在正在做.....只是不太想沿用前任的方法,于是上 v 社问问  |
| 9 siguapajamas OP @hevi 额.....我又细看了一下,你可能理解错我的意思了,实际上这样的表单有无数个[无语] switchFn 会根据传入的值判断返回的数组例如['addres','aaa','bbb','ccc']等等,传入不同的会传出不同的数组,然后用 includes 来做判断,按照你那样我需要写无数个了..... |
| 10 siguapajamas OP @zhhbstudio 额...莫名其妙多一个  表情....请忽略,并不是我的本意 |
| 11 siguapajamas OP @hevi 额...莫名其妙多一个 表情....请忽略,并不是我的本意 |
 | 12 AdminZ 2024-10-09 14:02:26 +08:00 component 动态组件。规定好 json 配置规则，统一配置好基础表单项，如果有特定类别对应的特定 item ，使用 template 和 v-if 去增加，可以灵活处理，不然你类型多了，无数个 v-if |
| 13 siguapajamas OP @AdminZ 是的目前就是类型很多 无数个 v-if 前人的代码我是不打算改了,之后我就是走 JSON 定好格式,然后循环渲染 |
 | 14 joytian 2024-10-10 13:29:29 +08:00 你一个表单里有多少表单项会导致卡顿呢？解决思路：1 、减少页面上 dom 节点数量，滑到视口时才展示。2 、在展示之前先计算好哪些表单项是会被展示出来的，计算完了就不去操作了，修改表单项的值也不应该重新计算吧，除非是两个表单项之间有依赖关系的 |
Select Language