这是一个创建于 81 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题,目前最主要的动态因素是不同模块影响不同的表单配置,最主要的就使用了 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
 |
1
lingxiaoli 81 天前
有些本末倒置 这里直接循环配置数组来做
|
 |
2
siguapajamas OP @lingxiaoli 是有考虑过直接数组循环,我的业务场景其实是有多层 v-for 循环以及不同的表单校验,例如手机号邮箱等等奇奇怪怪的校验的, 也是我的错没有表现出来...😫 但是即使是走数组循环,一次性填写的表单多了一样会卡顿
|
 |
3
paopjian 81 天前
提前用 computed 计算好要展示的组件列表,而不是现比较?
还有就是可交互组件太多的原因?试试 lazy 或者掘金搜一下大表单卡顿 |
|
4
siguapajamas OP @paopjian 这是多个配置项的其中之一,computed 也是跟随着依赖数据变化而变化把?我的模块或者其他配置项改变也会导致 computed 值改变,最终让 v-if 再次触发,感觉没啥差别前辈😱
|
|
5
siguapajamas OP @paopjian 可以看到我的 switchFn 传入了模块名的值和遍历的 item 所有值, 就是配置项数组是受到不同模块的影响,以及模块中某些配置项的影响,因此 computed 也是随着配置项的改变时刻在变
 |
 |
6
zhhbstudio 81 天前
不同模块的表单放在一个组件里了？
可以 computed 计算出一个 arr 然后 v-if="arr.includes('addres')",当前你每个 col 都执行一边 switchFn |
 |
7
hevi 81 天前
直接 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 80 天前
component 动态组件。规定好 json 配置规则，统一配置好基础表单项，如果有特定类别对应的特定 item ，使用 template 和 v-if 去增加，可以灵活处理，不然你类型多了，无数个 v-if
|
|
13
siguapajamas OP @AdminZ 是的目前就是类型很多 无数个 v-if 前人的代码我是不打算改了,之后我就是走 JSON 定好格式,然后循环渲染
|
 |
14
joytian 79 天前
你一个表单里有多少表单项会导致卡顿呢？解决思路：1 、减少页面上 dom 节点数量，滑到视口时才展示。2 、在展示之前先计算好哪些表单项是会被展示出来的，计算完了就不去操作了，修改表单项的值也不应该重新计算吧，除非是两个表单项之间有依赖关系的
|
Select Language