页面多个el-cascader,滚动卡顿

页面中有使用多个el-cascader,滚动的时候el-cascader的弹框一直在回流,导致页面很卡,使用:append-to-body="false"仍然避免不了回流

该回答引用chatgpt:

如果您在使用多个 el-cascader 组件时遇到了性能问题,可以尝试以下优化措施:

减少渲染节点数:在 el-cascader 组件的选项数据中,只渲染当前可见区域的节点,而不是全部节点。这可以通过将 lazy 属性设置为 true 来实现。此外,还可以通过对选项数据进行分页来减少渲染节点数。
节流滚动事件:在滚动事件处理程序中使用节流函数,以减少事件处理的次数。可以使用 lodash 库中的 throttle 函数来实现。
使用虚拟滚动:在滚动容器中使用虚拟滚动,以减少渲染节点数。可以使用 vue-virtual-scroll-list 库来实现。
如果以上措施无法解决性能问题,您可能需要考虑使用其他组件或自行编写组件来替代 el-cascader 组件。

  • 这篇博客: el-cascader实现服务器搜索中的 el-cascader实现服务器搜索 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读: