el-tree数据量过大,造成浏览器卡死、崩溃
场景:树形结构展示,数据超级多,超过万条,每次打开都会崩溃
我这里采用的是引入新的插件虚拟树,它是参照element-plus 中TreeV2改造vue2.x版本虚拟化树形控件,不论你的数据量多大,虚拟树都能毫无压力地处理。
虚拟树传送门:https://sangtian152.github.io/virtual-tree/zh/demo/#attributes
前面下载引入这里就不多赘述了,都一样的。
具体代码如下:
<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差不多,不会用的可以点传送门去看看,里面属性方法都有的。
但是用这个还有一个问题就是,当数据量过大且都选中的时候,回显的时候会超级超级慢,而且还会崩溃,但是这个时候是由于回显的数据过多引起的。尝试了好多方法都不行,分时函数都用上了,虽然不崩溃了,但是超级慢。
后来的解决办法是:
回显的时候,调用后端接口,让后端只返回选中的父节点,让它自动关联选中子节点,暂时解决了这个问题。