inputTable控件性能问题 #16435
Description
描述问题：
使用inputTale控件，设置了10来个字段，加载200多行数据后存在以下问题：
1、向下拖动竖向滚动条，滚动到100笔后数据出现灰色蒙层，要等几秒中才能看到数据
2、编辑表格中的数据，录入完一个输入框后，将光标定位到其它输出框会出现卡顿
截图或视频：
如何复现（请务必完整填写下面内容）：
-
你是如何使用 amis 的？
通过爱速搭平台 -
amis 版本是什么？请先在最新 beta 版本测试问题是否存在
最近版本也存在这个问题 -
粘贴有问题的完整
amis schema代码：
{
"type": "input-table",
"name": "table",
"label": "",
"virtualThreshold": 100,
"columns": [
{
"label": "序号",
"name": "serialNum",
"id": "u:c609e5f2b91a",
"type": "static",
"width": 20
},
{
"id": "u:252fb870ea1b",
"label": "物料名称",
"name": "materialName",
"quickEdit": {
"type": "input-text",
"name": "materialName",
"id": "u:0aabca6f153a",
"editorState": "default",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"placeholder": "-",
"className": "w-40"
},
{
"name": "manufacturerModel",
"id": "u:e2ff0573d57f",
"label": "制造商型号",
"required": true,
"quickEdit": {
"type": "input-text",
"name": "manufacturerModel",
"id": "u:21a5bef97045",
"classNameExpr": "<%= data.manufacturerModel == '' || data.manufacturerModel == undefined ? 'bg-danger' : '' %>",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"min-width": 100,
"placeholder": "-",
"className": "w-40"
},
{
"name": "specification",
"label": "规格",
"required": true,
"quickEdit": {
"type": "input-text",
"name": "specification",
"id": "u:966fc6e2896d",
"classNameExpr": "<%= data.specification == '' || data.specification == undefined ? 'bg-danger' : '' %>",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:96d19a95d0d0",
"min-width": 100,
"placeholder": "-",
"className": "w-40"
},
{
"name": "manufacturer",
"label": "制造商",
"quickEdit": {
"type": "input-text",
"name": "manufacturer",
"id": "u:376e2fed21ba",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:d56d011031f9",
"width": "",
"placeholder": "-",
"className": "w-40"
},
{
"label": "封装",
"name": "encapsulation",
"required": true,
"quickEdit": {
"type": "input-text",
"name": "encapsulation",
"id": "u:59d9384f7509",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:311e08e33b6c",
"min-width": 50,
"placeholder": "-",
"className": "w-40"
},
{
"name": "amount",
"label": "用量",
"quickEdit": {
"type": "input-number",
"name": "amount",
"id": "u:e8edf9c2483c",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:74b7b96bd125",
"min-width": 40,
"placeholder": "-",
"className": "w-12"
},
{
"name": "parseAmount",
"label": "解析用量",
"quickEdit": {
"type": "input-number",
"name": "parseAmount",
"id": "u:e8edf9c2123s",
"classNameExpr": "<%= (data.amount != undefined && data.amount != '' && data.amount != data.parseAmount) || data.parseAmount == undefined || data.parseAmount == '' ? 'bg-danger' : '' %>",
"keyboard": true,
"step": 1,
"editorState": "default",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:74b7b96bd456",
"min-width": 50,
"placeholder": "-",
"className": "w-18"
},
{
"name": "bitNum",
"label": "位号",
"quickEdit": {
"type": "input-text",
"name": "bitNum",
"id": "u:7da621388442",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:41168d6dde65",
"min-width": 300,
"placeholder": "-",
"className": "word-break w-96"
},
{
"name": "remark",
"label": "备注",
"quickEdit": {
"type": "input-text",
"name": "remark",
"id": "u:277ec98f887f",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:8fd3365b3414",
"width": "",
"placeholder": "-",
"className": "w-64"
},
{
"name": "materialType",
"quickEdit": {
"type": "input-text",
"name": "materialType",
"id": "u:fd80c6cb664e",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
}
},
"label": "物料类别",
"id": "u:ade89afdb53f"
},
{
"name": "pinsNum",
"label": "引脚数",
"quickEdit": {
"type": "input-number",
"name": "pinsNum",
"id": "u:ffa4ee404d3b",
"classNameExpr": "<%= data.pinsNum == '' || data.pinsNum == undefined ? 'bg-danger' : '' %>",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:e3e5fde7ea77",
"placeholder": "-",
"className": "w-16"
},
{
"name": "processingItem",
"label": "加工项",
"quickEdit": {
"type": "select",
"name": "processingItem",
"id": "u:fa21ad81be21",
"options": [
{
"label": "SMD",
"value": "SMD"
},
{
"label": "THT",
"value": "THT"
}
],
"mode": "horizontal",
"horizontal": {
"leftFixed": "sm"
},
"inline": true
},
"id": "u:06b1d1970933",
"type": "text",
"required": true,
"width": "",
"placeholder": "-",
"className": "w-30"
},
{
"name": "processingSonItem",
"label": "加工子项",
"quickEdit": {
"type": "select",
"name": "processingSonItem",
"id": "u:fa21ad81be22",
"options": [
{
"label": "SMD",
"value": "SMD",
"hiddenOn": "${processingItem=='THT'?true:false}"
},
{
"label": "后焊",
"value": "afterWeld",
"hiddenOn": "${processingItem=='SMD'?true:false}"
},
{
"label": "压接",
"value": "pressureDocking",
"hiddenOn": "${processingItem=='SMD'?true:false}"
},
{
"label": "插件",
"value": "plugin",
"hiddenOn": "${processingItem=='SMD'?true:false}"
},
{
"label": "组装",
"value": "assemble",
"hiddenOn": "${processingItem=='SMD'?true:false}"
}
],
"mode": "popOver",
"selectFirst": false,
"hidden": false,
"disabled": false,
"value": "${IF(processingItem=='SMD','SMD','afterWeld')}",
"multiple": false,
"className": "no-border"
},
"id": "u:06b1d1970934",
"type": "text",
"required": true,
"placeholder": "-",
"toggled": true
},
{
"name": "point",
"label": "点数",
"quickEdit": {
"type": "input-number",
"name": "point",
"id": "u:8bec20d44fd6",
"classNameExpr": "<%= data.point == '' || data.point == undefined ? 'bg-danger' : '' %>",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
},
"mode": "popOver"
},
"id": "u:5472003c147a",
"placeholder": "-",
"className": "w-16"
},
{
"label": "内部物料编号",
"name": "innerMaterialCode",
"quickEdit": {
"type": "input-text",
"name": "innerMaterialCode",
"id": "u:6c0d6039a923",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
}
},
"id": "u:58510d2ab78c"
},
{
"label": "客户物料编号",
"name": "customerMaterialCode",
"quickEdit": {
"type": "input-text",
"name": "customerMaterialCode",
"id": "u:1c2bb5c8eacb",
"themeCss": {
"inputControlClassName": {
"border:default": {
"top-border-style": "var(--borders-style-1)",
"left-border-style": "var(--borders-style-1)",
"right-border-style": "var(--borders-style-1)",
"bottom-border-style": "var(--borders-style-1)"
}
}
}
},
"id": "u:fc31f1aab234"
}
],
"id": "u:232c2a17d593",
"removable": true,
"showIndex": false,
"columnsTogglable": false,
"size": "full",
"canAccessSuperData": true,
"autoFillHeight": true,
"affixHeader": true,
"minLength": 1,
"editable": false,
"mode": "normal",
"strictMode": false,
"toolbarClassName": "",
"affixOffsetBottom": 1,
"needConfirm": false,
"addable": false
}
- 操作步骤
导入Excel文件，后端接口返回数据，人工在inputTable表格中编辑数据