目录
前言
之前写了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:
- 选择第一个[Vue 2...]:
- 安装完成后切换到 tree-demo 目录下
- 安装 @wchbrad/vue-easy-tree,使用命令 npm add @wchbrad/vue-easy-tree:
- 安装sass-loader,命令:npm add sass-loader@8.0.2(有版本要求);
- 安装node-sass,命令:npm add node-sass@4.14.1(有版本要求)
- 删除并改写 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>
- 示例这里使用局部引用,全局引入可以参考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>
- 运行:npm run serve
最简单的demo完成,效果如下: