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

相关推荐
草字7 分钟前
uniapp 悬浮按钮支持可拖拽。可移动。
前端·javascript·uni-app
一位搞嵌入式的 genius10 分钟前
Vue实例挂载:从原理到项目实践的全维度解析
前端·javascript·vue.js·前端框架
cindershade15 分钟前
Vue 3 Keep-Alive 深度实践:从原理到最佳实践
vue.js·vue-router
waeng_luo16 分钟前
[鸿蒙2025领航者闯关] 表单验证与用户输入处理最佳实践
开发语言·前端·鸿蒙·鸿蒙2025领航者闯关·鸿蒙6实战·开发者年度总结
0思必得021 分钟前
[Web自动化] 开发者工具应用(Application)面板
运维·前端·python·自动化·web自动化·开发者工具
m0_7400437321 分钟前
Vue Router中获取路由参数d两种方式:$route.query和$route.params
前端·javascript·vue.js
风止何安啊23 分钟前
Event Loop 教你高效 “划水”:JS 单线程的“摸鱼”指南
前端·javascript·面试
@菜菜_达33 分钟前
goldenLayout布局
前端·javascript
Shirley~~34 分钟前
vite的tersor在lib库模式下不生效问题
javascript·vue.js·ecmascript
小飞侠在吗34 分钟前
vue 生命周期
前端·javascript·vue.js