问题

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>

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