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

相关推荐
Mintopia7 小时前
前端卡顿的真相:不是你代码慢,是你阻塞了
前端
kyriewen7 小时前
可选链 `?.`——再也不用写一长串 `&&` 了!
前端·javascript·ecmascript 6
Mintopia7 小时前
别再乱加缓存:一套判断"该不该缓存"的方法
前端
Leisureconfused7 小时前
【记录】Node版本兼容性问题及解决
前端·vue.js·npm·node.js
Highcharts.js7 小时前
React 应用中的图表选择:Highcharts vs Apache ECharts 深度对比
前端·javascript·react.js·echarts·highcharts·可视化图表·企业级图表
腹黑天蝎座7 小时前
如何实现自定义的虚拟列表
前端·react.js
用户350144817927 小时前
继承和原型链:js如何实现继承
前端
Bernard02157 小时前
给普通人的 AI 黑话翻译手册:一文看懂 LLM、RAG、Agent 到底是什么
前端·后端
恋猫de小郭7 小时前
JetBrains Amper 0.10 ,期待它未来替代 Gradle
android·前端·flutter