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就好了。

相关推荐
0思必得013 小时前
[Web自动化] 爬虫实例(获取时光网某个年度电影数据)
前端·爬虫·python·selenium·自动化
Devlive 开源社区13 小时前
技术日报|React视频工具Remotion三连冠日增1374星破3万,Apple Silicon语音库mlx-audio爆火登榜第二
前端·react.js·前端框架
m0_7482299913 小时前
Vue3高效学习路线全攻略
前端·javascript·vue.js
谢尔登14 小时前
React架构演变
前端·react.js·架构
木辰風14 小时前
vue在IE浏览器下父页面向子页面传输对象时数据丢失
前端·javascript·html
小雨青年14 小时前
Cursor 项目实战:AI播客策划助手(四)—— 产品发布与交付收尾
前端·人工智能
麻辣翅尖14 小时前
【vue】基于 pdf.js 实现 pdf 文件预览
vue.js·pdf.js
@呵呵14 小时前
上传图片裁剪
开发语言·javascript·vue.js
晚霞的不甘14 小时前
Flutter for OpenHarmony《淘淘购物》主页点击跳转功能详解:从 UI 响应到页面导航的完整实现
前端·flutter·ui·搜索引擎·前端框架·交互
cooldream200914 小时前
前端技术架构详解:Vue 3 + TypeScript + Vite 在具身 AI 系统中的实践
前端·架构·typescript