element-plus使用弹窗里面有个el-tree大量数据会导致dom渲染缓慢问题。第一次打开弹窗很慢半天才打开

复制代码
<el-dialog v-model="drawerVisible" :destroy-on-close="true" size="450px" ><el-tree-select
  v-model="drawerProps"
  :data="areaData"
  check-strictly
  :render-after-expand="false"
  show-checkbox
/>
</el-dialog>
复制代码
import areaData from "@/assets/json/area.json"

这个是我本地的一个josn文件也不是很大131k。但是打开这个弹窗的时候,第一次打开会超级的慢。后面就好了。

感觉是弹窗里面的内容加载,在加载完之后才会显示弹窗,所以弹窗第一次打开的时候就非常的慢。

开始想到要用懒加载,点击一个层级展开一个。但是这样效果不太好。我使用这个主要是希望每个层级都可以选择,而不是只能选子节点。

花了好久最后才发现原来改一个参数就可以了。

最后就改了:render-after-expand="false"这个false改成true就好了。

相关推荐
玫城1 天前
[ VUE ] 封装通用数组校验组件,el-input内使用
前端·javascript·vue.js
南半球与北海道#1 天前
前端打印(三联纸票据打印)
前端·vue.js·打印
董世昌411 天前
深入浅出 JavaScript 常用事件:从原理到实战的全维度解析
前端
满栀5851 天前
分页插件制作
开发语言·前端·javascript·jquery
qq_406176141 天前
深入剖析JavaScript原型与原型链:从底层机制到实战应用
开发语言·前端·javascript·原型模式
开开心心_Every1 天前
免费窗口置顶小工具:支持多窗口置顶操作
服务器·前端·学习·macos·edge·powerpoint·phpstorm
闲蛋小超人笑嘻嘻1 天前
Vue 插槽:从基础到进阶
前端·javascript·vue.js
梦6502 天前
Vue2 与 Vue3 对比 + 核心差异
前端·vue.js
tiandyoin2 天前
给 MHTML 添加滚动条.mhtml
前端·chrome·html·mhtml
遗憾随她而去.2 天前
前端大文件上传(切片并发/断点续传/秒传/WebWorker 计算Hash) 含完整代码
前端