Javascript Vue:元素响应太慢，无法响应dragover事件

我有一个页面基本上有两部分：左栏和右栏（更大的区域）。右列包含大约1500行（组件），每行包含5个div as单元。我曾经在这两列的父元素上绑定dragover事件。每次触发dragover事件时，都会出现一个覆盖div并覆盖整个窗口区域。示例如下：

Javascript

let行={
道具：['item']，
模板：`
{{item.value1}
{{item.value2}
{{item.value3}
{{item.value4}
{{item.value5}}
};
新Vue({
el:'家长'，
组成部分：{
“行”：行
},
模板：`
拖放文件
`,
数据：{
行：[……]，
覆盖：假
},
方法：{
展示覆盖图（e）{
e、 预防默认值（）；
this.overlay=true；
}
}
});

虽然滚动列表有点滞后，但代码运行正常。但是，当我将文件拖到右栏区域上时，只需几秒钟即可显示覆盖，而拖到左栏只需不到一秒钟

HTML

删除

e.preventDefault（）功能；这导致延迟
您提到您有1500行。我不确定这是否导致渲染工作延迟。1500是一个相当大的数字。嗨，汝贞庄，我想你是对的。当我看到你的评论时进行测试时，叠加响应越快，行数越少。所以我现在必须考虑如何显示我的行。如果你想得到建议，可以使用无限滚动。在本例中，无限滚动与业务逻辑不匹配，因此我将进行分页。这两种方式都有效。祝你一切顺利！