el-tree数据量过大导致页面卡顿

问题：el-tree等树形结构，当数据量非常大，渲染会很慢

解决方案:

懒加载
方法：设置lazy属性为true，当点击父级节点时，再通过load方法加载子列表。
优点：使用简单。
缺点：不能做回显，无法展开全部节点。

虚拟列表
方法：使用插件或者自己实现一个虚拟列表（推荐：https://sangtian152.github.io/virtual-tree/zh/demo/）
优点：不论数据多少，都可以实现快速加载。
缺点：暂未发现。

 

虚拟列表使用流程：
1、安装插件

npm install @sangtian152/virtual-tree

2、在main.js中引入组件

import VlTree from '@sangtian152/virtual-tree';
import "@sangtian152/virtual-tree/lib/vl-tree.css";
Vue.use(VlTree);

3、使用

<template>
    <vl-tree
      ref="treeForm"
      :height="600"
      :show-checkbox="true"
      :check-strictly="true"
      :node-key="'treeId'"
      :data="treedata"
      :props="deprops"
      :default-expanded-keys="defaultExpand"
      :default-checked-keys="defaultChecked"
      :filter-method="filterNode"
      @check="handleNodeClick">
    </vl-tree>
</template>

<script>
export default {
    data() {
        return {
            deprops: { // 默认配置
                value: 'treeId', // treeId 为节点id，唯一值
                label: 'nodeName',
                children: 'childList',
            },
            treedata: [], // 数据
            defaultExpand: [], // 默认展开节点
            defaultChecked: [] // 默认选中节点，用于回显
        }
    },
    methods: {
        // 搜索
        filterNode(value, data) {
          if (!value) return true
          return data.nodeName.indexOf(value) !== -1
        },
        // 选中节点
        handleNodeClick(node, list) {
          console.log(node, list) // 处理选中节点
        }
      }
}
</script>

 

 

以上解决方案已实践，可以满足需求，如有更好的方案，请留言告知，万分感谢~