wchbrad / vue-easy-tree Goto Github PK

A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.

License: MIT License

HTML 0.19% JavaScript 49.50% Vue 30.38% SCSS 19.93%

tree vue2 lazyload virtualscroll checkbox

vue-easy-tree's Introduction

vue-easy-tree

English | 中文

Introduction

A tree component based on vue2.x that supports a small amount of data or a large amount of data, multiple functions, and virtual scrolling.

Based on the tree style and function extracted from element-ui(License:MIT), combined with vue-virtual-scroller(License:MIT) tree component.

v1.0 Feature List

Large data volume supports virtual scrolling
Display of basic tree data
Support checkbox selection
Support lazy loading
Expanded by default and selected by default
Disable node
Select nodes and obtain selected node information in a variety of ways
Support custom node content
Support node filtering
Support accordion mode under non-virtual scrolling
Support node drag and drop when non-lazy loading

Features

Support virtual scrolling
Not only supports tree-shaped data display with large amounts of data, but also supports data manipulation and modification

Install

npm install @wchbrad/vue-easy-tree

yarn add @wchbrad/vue-easy-tree

Mount

mount with global

Import in the main.js file:

import Vue from "vue";
import VueEasyTree from "@wchbrad/vue-easy-tree";
// Style file, you can customize the style or theme according to your needs
import "@wchbrad/vue-easy-tree/src/assets/index.scss"

Vue.use(VueEasyTree)

mount with component

Import in the component：

import VueEasyTree from "@wchbrad/vue-easy-tree";
// Style file, you can customize the style or theme according to your needs
import "@wchbrad/vue-easy-tree/src/assets/index.scss"

export default {
  components: {
    VueEasyTree
  }
}

Usage:

⚠️ When using virtual scrolling, node-key must be set

<template>
  <div class="ve-tree" style="height:calc(100vh - 20px)">
  <!-- Just remove the height parameter when not using virtual scrolling -->
    <vue-easy-tree
      ref="veTree"
      node-key="id"
      height="calc(100vh - 20px)"
      :data="treeData"
      :props="props"
    ></vue-easy-tree>
  </div>
</template>

<script>
export default {
  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>

Change SCSS variables in the project

By creating a new style file, such as: ve-tree-var.scss, write the following content：

/* Change theme color variable */
$--color-primary: #ea5404;

/* Change the icon font path variable, required */
$--font-path: "~@wchbrad/vue-easy-tree/src/assets/fonts";

@import "@wchbrad/vue-easy-tree/src/assets/index.scss";

⚠️ It should be noted that it is necessary to override the font path variable, and assign it to the relative path where the icon icon in @wchbrad/vue-easy-tree is located.

Then directly import the above style files in main.js：

import Vue from 'vue'
import VueEasyTree from "@wchbrad/vue-easy-tree";
import "./css/ve-tree-var.scss"

Vue.use(VueEasyTree)

Other properties and methods

From element-ui official document
When you need to use virtual scrolling, just add the height property, such as:

<vue-easy-tree :data="data" height="calc(100vh - 20px)" :props="defaultProps" @node-click="handleNodeClick"></vue-easy-tree>

Quick view of examples and api

License

MIT

vue-easy-tree's People

Contributors

Stargazers

Watchers

vue-easy-tree's Issues

鼠标来回滚动，tree 每条数据的transform: translateY 计算有误

items有重复数据,数据显示去重了totalSize并未更改导致多出一行空白

启用虚拟滚动，自动滚动到选中的节点位置

启用虚拟滚动后，div中只有当前可视范围内的20几条数据，该如何通过外部点击使一个节点选中并且滚动到这个节点处呢？

大数据量的数据回显问题，父级没有半选的状态

          这个还有点小问题，父级没有半选的状态。

Originally posted by @oubohua in #43 (comment)

开启虚拟滚动时，懒加载需要增加node-key么？

开启虚拟滚动时，懒加载我这边测试有问题

<template>
  <div class="ve-tree" style="height:calc(100vh - 20px)">
    <vue-easy-tree
      ref="veTree"
      node-key="id"
      height="calc(100vh - 20px)"
      :props="props"
      lazy
      :load="loadNode"
    ></vue-easy-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "children"
      },
      treeData: []
    };
  },
  created() {

  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region' }]);
      }
      if (node.level > 1) return resolve([]);

      this.getChildrenData(resolve)      
    },
    getChildrenData(resolve) {
      setTimeout(() => {
        const data = [
          {
            name: Math.random(),
          },
          {
            name: Math.random(),
          },
          {
            name: Math.random(),
          },
          {
            name: Math.random(),
          },                     
        ]

        resolve(data)
      }, 1000)
    }    
  }
};
</script>

<style>
</style>

:render-after-expand="false"设置无效

如题，设置:render-after-expand="false"后，点击父节点，子节点并未触发 @check-change

从隐藏到显示，虚拟列表不生效

我把vue-easy-tree和el-select组合了一下，做成了树型的下拉框组件，展开下拉框的时候虚拟列表不生效，布局也不正确，要不要考虑解决一下这种从隐藏到显示的问题，例如可以向外暴露一个重新渲染的函数

在出现滚动条后，向上滚动过程会突然全部收起所有的节点

项目描述： 我原来使用el-tree的updateKeyChildren来实现类似点击某节点后再动态加载该节点下的数据，并没有采用el-tree组件的lazy+load的形式去懒加载，后来某些节点下面会有上万条数据导致页面卡死后，尝试使用vue-easy-tree的虚拟滚动来解决问题
问题描述： 再直接替换el-tree为vue-easy-tree时，没有任何报错，每个节点都能顺利展开，尤其是上万条节点也能顺利显示，但是当出现滚动条时，只要向上滚动至接近顶部时，所有展开的节点会全部收起。

能否加入item-size props来让开发者传入,现在是写死的有些样式受到限制

代码里面每行行高写死了是否写成props来供开发者修改

不能使用height: 100%定义高度

提示报错：Error in v-on handler: "Error: Rendered items limit reached"

It seems the scroller element isn't scrolling, so it tries to render all the items at once. Scroller: <div class="vue-recycle-scroller ready direction-vertical" style="height: 100%; overflow-y: auto; scroll-behavior: smooth;">…
vue-virtual-scroller.esm.js?e508:619 Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.

发现子节点超过2000多好像就会报这样的错，然后数据就只会加载一半