vue-huge-tree v1.0.4

vue-huge-tree

当数据量很大时, 树形图渲染会异常卡顿, 用户体验极差

本组件有效的解决了这个问题, 渲染速度比普通树形图提高 N 倍

海量数据建议不要放到 data 里，vue 依赖收集会导致内存占用过多。所以此插件没有使用 props 传递海量数据，而是通过 setData(data) 方法

安装

npm i vue-huge-tree

引入

import VueHugeTree from 'vue-huge-tree';
import 'vue-huge-tree/dist/vue-huge-tree.css'

使用

<template>
  <vue-huge-tree
    ref="huge-tree"
    show-checkbox
    show-search-bar
    show-node-count
    :default-checked-keys="checkedKeys"
    @check="onClickCheckbox"
    @click-label="onClickLabel"
    @check-change="onChange"
  ></vue-huge-tree>
</template>

<script>
import VueHugeTree from 'vue-huge-tree';
import 'vue-huge-tree/dist/vue-huge-tree.css';

export default {
  components: {
    VueHugeTree,
  },
  data() {
    return {
      checkedKeys: [],
      treeData: [
        {
          label: '测试0',
          id: '0',
          parentKey: null,
          children: [
            {
              label: '测试0-0',
              id: '0-0',
              parentKey: '0',
              children: [
                {
                  label: '测试0-0-0',
                  id: '0-0-0',
                  parentKey: '0-0',
                  children: null
                },
                {
                  label: '测试0-0-1',
                  id: '0-0-1',
                  parentKey: '0-0',
                  children: null
                }
              ]
            },
            {
              label: '测试0-1',
              id: '0-1',
              parentKey: '0',
              disabled: true,
              children: [
                {
                  label: '测试0-1-0',
                  id: '0-1-0',
                  parentKey: '0-1',
                  disabled: true,
                  children: null
                },
                {
                  label: '测试0-1-1',
                  id: '0-1-1',
                  parentKey: '0-1',
                  disabled: true,
                  children: null
                }
              ]
            }
          ]
        },
        {
          label: '测试1',
          id: '1',
          parentKey: null,
          children: null
        }
      ]
    };
  },
  mounted() {
    this.getTreeData();
  },
  methods: {
    getTreeData() {
      this.$refs['huge-tree'].setData(this.treeData);
      this.checkedKeys = ['0-0-0', '0-1-1'];
    },
    onClickCheckbox(node) {
      console.log(node);
    },
    onClickLabel(node) {
      console.log(node);
    },
    onChange(checkedKeys, checkedNodes) {
      console.log(checkedKeys, checkedNodes);
    }
  }
};
</script>

Attributes

Methods

Events

Scoped Slot

数据结构

节点结构