2021-10-29

背景：

我们在工作中常常会遇到成千上万的数据，而在使用element-ui树形控件的时候，由于数据量过大，会导致页面卡顿甚至卡死的现象。

优化方案：

          针对数据量过大的优化我们通常会采用分页查询，或者采用点击当前节点再去查询下一级的数据。在采用点击当前节点再去查询子级的数据的情况下我们可能会遇到这样一种情况，就是子级的数据可能就有上万条。这里我们就可以使用以下方案来解决页面卡顿的问题。

这里引用：https://segmentfault.com/q/1010000038447910?utm_source=tag-newest

          作者二次封装的el-tree组件，原理是用vue-virtual-scroll-list插件，将树形多级dom转化为同级dom。此插件是一个虚拟滚动插件，原理是传入一个固定渲染指定的dom数量，比如传入渲染100个dom，页面中的元素一直都会是100个，然后通过scroll-list滚动时插件替换页面的数据，而不是往里添加数据，这样就不会卡死

先拉取下面的组件代码：https://gitee.com/strivelei/element/tree/dev/packages/tree/src

          将整个tree文件夹放到你项目所在的components公共组件下，然后用法和el-tree一样，先引用资源，然后注册组件：

import tree from '@components/tree/src/tree.vue'

Vue.component('mTree', tree)

然后使用：

 

注意事项

需要注意的是我们在使用二次封装的z-tree组件时需要下载vue-virtual-scroll-list依赖，并且在封装的组件中的tree.vue文件里面virtual-list组件要添加高度，如果设定100%的话，需要父组件添加固定高度；vue-virtual-scroll-list组件的参数可以查看官方文档；

                  :data-key="getNodeKey"

                  :data-sources="visibleList"

                  :data-component="itemComponent"

                  :keeps="80"

                  :extra-props="{

        renderAfterExpand,

        showCheckbox,

        renderContent,

        props,

        onNodeExpand: handleNodeExpand

      }"

    />