15.树形虚拟列表实现（支持10000+以上的数据）el-tree（1万+数据页面卡死）

1.问题使用el-tree渲染的树形结构，当数据超过一万条以上的时候页面卡死

2.解决方法：

使用vue-easy-tree来实现树形虚拟列表，注意：vue-easy-tree需要设置高度

3.代码如下

<template>
    <div class="ve-tree" style="height:calc(100vh - 20px)">
    <!-- 不使用虚拟滚动时只需去掉height参数即可 -->
      <vue-easy-tree
        ref="veTree"
        node-key="id"
        show-checkbox
        height="calc(100vh - 20px)"
        :data="treeData"
        :props="props"
      ></vue-easy-tree>
    </div>
  </template>
   
  <script>
  
import VueEasyTree from "@wchbrad/vue-easy-tree";
// 样式文件，可以根据需要自定义样式或主题（使用这个样式需要装sass-loader以及node-sass）
import "@wchbrad/vue-easy-tree/src/assets/index.scss"

  export default {
   
    components: {
   
        VueEasyTree
    },
    data() {
   
      return {
   
        props: {
   
          label: "name",
          children: "children"
        },
        treeData: []
      };
    },
   
    created() {
   
      const data = [],
        root = 8,
        children = 3,
        base = 1000;
      for (let i = 0; i < root; i++) {
   
        data.push({
   
          id: `${
     i}`,
          name: `test-${
     i}`,
          children: []
        });
        for (let j = 0; j < children; j++) {
   
          data[i].children.push({
   
            id: `${
     i}-${
     j}`,
            name: `test-${
     i}-${
     j}`,
            children: []
          });
          for (let k = 0; k < base; k++) {
   
            data[i].children[j].children.push({
   
              id: `${
     i}-${
     j}-${
     k}`,
              name: `test-${
     i}-${
     j}-${
     k}`
            });
          }
        }
      }