后台管理系统，页面input框过多，输入时有0.5秒延迟卡顿现象

Question

题目描述

以上是一个录入页面，有两列input框，正式环境上的长度最多会有200+的情况，开发的电脑配置高，所以不会存在卡顿的问题，但是使用者们的电脑配置内存为4G，所以输入会有0.5秒的延迟卡顿的情况

相关代码

<el-table-columnv-if\="this.autoNumber"prop\="autoValue"label\="码表读数"\>

    <templateslot-scope\="scope"\>

        <el-inputautocomplete\="off"v-if\="scope.row.resetValue"class\="resetRed"v-model\="scope.row.autoValue"disabled\></el-input\>

        <el-inputautocomplete\="off"v-if\="scope.row.handmade&&!scope.row.resetValue"v-model\="scope.row.autoValue"disabled\></el-input\>

        <el-inputautocomplete\="off"v-if\="!scope.row.handmade&&!scope.row.resetValue"v-model\="scope.row.autoValue" @change\="fillCopyValue(scope.row)"\></el-input\>

    </template\>

</el-table-column\>

<el-table-columnv-if\="this.handNumber"prop\="manualValue"label\="手工值"\>

    <templateslot-scope\="scope"\>

        <el-inputautocomplete\="off"v-if\="scope.row.resetValue"class\="resetRed"v-model\="scope.row.manualValue"disabled\></el-input\>

        <el-inputautocomplete\="off"v-if\="!scope.row.handmade&&!scope.row.resetValue"v-model\="scope.row.manualValue"disabled\></el-input\>

        <el-inputautocomplete\="off"v-if\="scope.row.handmade&&!scope.row.resetValue"v-model\="scope.row.manualValue" @change\="fillCopyValue(scope.row)"\></el-input\>

    </template\>

</el-table-column\>

async fillCopyValue(value){

let param={

    transferParam:'T/copy',

    autoValue:value.autoValue,

    id:value.id,

    infoId:value.copyInfoId,

    manualValue:value.manualValue,

};

let res=awaitpatchCopyInfoRecord(param);

if (res.code===200) {

        this.copyRemain--;

}

},

请求的时间也不长，input框就是很卡顿，愁坏了，各位大佬，给我一个思路就好，拜托拜托了

Answer 1

你这个场景有点复杂.
v-model+slot+el-table;
每一个都可能造成问题.
最省事也最合理的做法是楼上说的.点击编辑,在弹窗内输入.

一定要这么做的话,可以尝试把v-model改成手动维护.

<el-input :value="scope.row.autoValue" @input="e => onInput(scope.row, e)"/>

methods: {
    onInput(item, value) {
        // list即el-table绑定的data,key是item的唯一标示.
        const it = this.list.find(it => it.key===item.key);
        it.autoValue = value;
    }
}

这样使双向绑定变为了单向数据流,避免一些框架可能的性能问题.

Answer 2

【自己控制精确渲染操作】
根据行高度和滚动高度算一下，哪些行是不需要渲染的，只给一个定高的空行。

Answer 3

如果可以的话，我感觉还是按需显示的比较好。
比如：当你点击需要编辑的文字的时候，再显示input框；点击保存，请求数据，保存成功，再改变显示状态。