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

相关推荐
白中白121385 分钟前
Vue系列-1
前端·javascript·vue.js
dorisrv7 分钟前
Next.js 16 自定义 SVG Icon 组件实现方案 🎨
前端
用户新30 分钟前
五万字沥血事件 深度学习 事件 循环 事件传播 异步 脱离新手区 成为事件达人
前端·javascript·事件·event loop
计算机学姐35 分钟前
基于Python的B站数据分析及可视化系统【2026最新】
开发语言·vue.js·python·信息可视化·数据挖掘·数据分析·推荐算法
w2sfot39 分钟前
JS代码压缩
前端·javascript·html
码途潇潇1 小时前
从组件点击事件到业务统一入口:一次前端操作链的完整解耦实践
前端
import_random1 小时前
[python]miniconda(安装)
前端
云梦谭1 小时前
AI 生成的FreeSWITCH 呼出流程深度分析freeswitch-1.10.12.-release
java·前端·php
秃了才能变得更强1 小时前
React Native小技巧
前端
一只爱吃糖的小羊1 小时前
React 19 vs Vue 3:深度对比与选型指南
前端·vue.js·react.js