从零开始使用vue-easy-tree

目录

前言

版本

示例

---

前言

之前写了vue实现tree虚拟滚动的文章（vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree_Brad_chao的博客-CSDN博客_vue虚拟滚动树），但是发现有部分同学可能在引入组件时就出现一些问题。这篇文章描述下如何引入@wchbrad/vue-easy-tree组件。

版本

示例所用相关版本：
vue：v2.6.11

vue-cli：v4.5.9

node：v12.16.3

webpack：4.14.0

node-sass：4.14.1

sass-loader：8.0.2

示例

使用 vue create tree-demo 初始化一个demo：

1. 选择第一个[Vue 2...]：
2.  安装完成后切换到 tree-demo 目录下
3.  安装 @wchbrad/vue-easy-tree，使用命令 npm add @wchbrad/vue-easy-tree：
4.  安装sass-loader，命令：npm add sass-loader@8.0.2（有版本要求）；
5.  安装node-sass，命令：npm add node-sass@4.14.1（有版本要求）
6.  删除并改写 src\App.vue 成如下：

   <template>
     <div id="app">
       <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from "./components/HelloWorld.vue";
   
   export default {
     name: "App",
     components: {
       HelloWorld,
     },
   };
   </script>
   
   <style>
   html,
   body {
     margin: 0;
     padding: 0;
   }
   </style>
   

7. 示例这里使用局部引用，全局引入可以参考git文档，修改 src\components\HelloWorld.vue 成如下代码：

   <template>
     <div class="hello">
       <vue-easy-tree
         ref="veTree"
         node-key="id"
         height="calc(100vh - 30px)"
         :data="treeData"
         :props="props"
       ></vue-easy-tree>
     </div>
   </template>
   
   <script>
   import VueEasyTree from "@wchbrad/vue-easy-tree";
   // 样式文件，可以根据需要自定义样式或主题
   import "@wchbrad/vue-easy-tree/src/assets/index.scss";
   export default {
     name: "HelloWorld",
     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}`,
             });
           }
         }
       }
       this.treeData = data;
     },
   };
   </script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   </style>
   

8.  运行：npm run serve

最简单的demo完成，效果如下：