el-tree数据量过大，造成浏览器卡死、崩溃

hibiscusxin2023-12-06 8:08

el-tree数据量过大，造成浏览器卡死、崩溃

场景：树形结构展示，数据超级多，超过万条，每次打开都会崩溃

我这里采用的是引入新的插件虚拟树，它是参照element-plus中TreeV2改造vue2.x版本虚拟化树形控件，不论你的数据量多大，虚拟树都能毫无压力地处理。

虚拟树传送门：https://sangtian152.github.io/virtual-tree/zh/demo/#attributes

前面下载引入这里就不多赘述了，都一样的。

具体代码如下：

html 复制代码

<vl-tree
         ref='tree'
         class='filter-tree'
         :props='defaultProps'
         :data='dataList'
         :height='430'
         show-checkbox
         :expand-on-click-node='false'
         :default-checked-keys='defaultChecked'
         :default-expanded-keys='defalutExpanded'
         :filter-methods='filterMethod'
         ></vl-tree>

别的都和el-tree差不多，不会用的可以点传送门去看看，里面属性方法都有的。

但是用这个还有一个问题就是，当数据量过大且都选中的时候，回显的时候会超级超级慢，而且还会崩溃，但是这个时候是由于回显的数据过多引起的。尝试了好多方法都不行，分时函数都用上了，虽然不崩溃了，但是超级慢。

后来的解决办法是：

回显的时候，调用后端接口，让后端只返回选中的父节点，让它自动关联选中子节点，暂时解决了这个问题。