vue-virtual-tree

介绍

一款基于vue2.x，同时支持少量数据或大量数据、多种功能和虚拟滚动（支持固定节点高度和动态节点高度）的树组件。

基于element-ui(License:MIT)中抽取的tree样式和功能，结合vue-virtual-scroller(License:MIT)所做的树组件。

v1.0 功能列表

- 大数据量支持虚拟滚动（支持固定节点高度和动态节点高度）
- 基本树形数据的展示
- 支持checkbox选择
- 支持懒加载
- 默认展开和默认选中
- 禁用节点
- 通过多种方式选中节点和获取选中的节点信息
- 支持自定义节点内容
- 支持节点过滤
- 非虚拟滚动下，支持手风琴模式
- 非懒加载时，支持节点拖拽

特点

- 支持虚拟滚动
- 不仅支持大数据量的树形数据展示，还支持数据的操作和更改
- 不仅支持固定高度的子item的虚拟滚动，还支持子item动态高度的虚拟滚动

安装

``
npm install @gaplin/vue-virtual-tree
`

或

`
yarn add @gaplin/vue-virtual-tree
`

$3

安装sass-loader，命令：npm add sass-loader@8.0.2

安装node-sass，命令：npm add node-sass@4.14.1




引入

$3

在 main.js 文件中引入：

`JS
import Vue from "vue";
import VueVirtualTree from "@gaplin/vue-virtual-tree";
// 样式文件，可以根据需要自定义样式或主题
import "@gaplin/vue-virtual-tree/src/assets/index.scss"

Vue.use(VueVirtualTree)
`

$3

在组件中引入：

`JS
import VueVirtualTree from "@gaplin/vue-virtual-tree";
// 样式文件，可以根据需要自定义样式或主题
import "@gaplin/vue-virtual-tree/src/assets/index.scss"

export default {
components: {
VueVirtualTree
}
}
`

使用:

:warning: 在使用虚拟滚动时，必须设置 node-key。

`html


`

在项目中改变 SCSS 变量


通过新建一个样式文件，如：ve-tree-var.scss，写入以下内容：

`JS
/ 改变主题色变量 /
$--color-primary: #ea5404;

/ 改变 icon 字体路径变量，必需 /
$--font-path: "~@gaplin/vue-virtual-tree/src/assets/fonts";

@import "@gaplin/vue-virtual-tree/src/assets/index.scss";
`
:warning: 需要注意的是，覆盖字体路径变量是必需的，将其赋值为 @gaplin/vue-virtual-tree 中 icon 图标所在的相对路径即可。

然后在 main.js 中直接引入以上样式文件即可：
`JS
import Vue from 'vue'
import VueVirtualTree from "@gaplin/vue-virtual-tree";
import "./css/ve-tree-var.scss"

Vue.use(VueVirtualTree)
`




其它属性和方法

来自element-ui 官方文档

需要使用虚拟滚动时，增加 height 属性即可，如：
`html




``