admin 管理员组

文章数量: 1086019


2024年3月27日发(作者：修改字段长度的sql语句)

问题场景

身为一个表单表格工程师，自然日复一日的写着表单表格，本以为已经没啥难点的时候

转眼间就来了一个有意思的情况，在超大量数据绑定在vue的时候出现了表单操作起

来卡顿的情况。

这里先贴上本项目出现的情况演示的github上的地址，tag1.0.1

当在input输入数据的时候，连续输入会感觉明显的延迟。

那么，这到底是怎么回事？

代码

上述的表单数据项修改频繁由后端返回，于是在前端需要渲染从后端返回的68kb的

一个JSON数据串，包括所有配置表单项以及其可能的选项值，数据见这里

核心渲染是有这么一段

JavaScript

1

2formConfig":key="configIndex">

3

4

5

6

7

8

9

10

11

{{}}

class="basic-form-item"

v-for="(item,itemIndex)ems"

:key="itemIndex"

:prop=""

:label=""

:required="ed"

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

:rules="">

v-if="==='radio'"

v-model="formData[]">

v-for="(option,radioIndex)informOptions[Code]"

:key=""

:label=""

:disabled="ed">

{{}}

v-else-if="==='input'"

:class="{longInput:Input}"

:placeholder="older||'请输入'"

v-model="formData[]"

:label=""

:disabled="ed"

:maxlength="gth">

v-else-if="==='select'"

v-model="formData[]"

:disabled="ed"

:placeholder="older||'请选择'">

v-for="(option,optionsIndex)informOptions[Code]"

:key=""

:label=""

:value="">

这就是一个简单的双层遍历渲染所有表单配置项的模版代码，其中的formConfig正

是所有配置表单项，数据量极多。formOptions挂载了所有表单选项值，也是动辄几

千项。