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

|参数|说明|类型|可选值|默认值| |-|-|-|-|-| |empty-text|内容为空的时候展示的文本|string|—|'暂无数据'| |node-key|每个树节点用来作为唯一标识的属性, 整棵树应该是唯一的|string|—|'id'| |highlight-current|是否高亮当前选中节点|boolean|true|false| |expand-level|节点展开的层级|number|-1: 展开所有节点;1: 展开第一层 (最外层);2: 展开第二层;...|-1| |indent|相邻级节点间的水平缩进，单位为像素|number|—|16| |show-node-count|显示节点对应的数据量|boolean|true|false| |show-search-bar|显示搜索框, 多个关键字之间用英文逗号分隔|||| |placeholder|搜索框的占位文本|string|—|请输入关键字, 多个关键字之间用英文逗号分隔| |default-expanded-keys|默认展开的节点的 key 的数组|array|—|—| |loading|是否显示数据加载时的状态|boolean|true|false| |loading-text|数据加载状态时提示的文字|string|—|'loading...'| |checked-action|点击 label 选中模式|string|'none': 不选中;'click': 单击选中;'dblclick': 双击选中|'none'| |show-checkbox|节点是否可被选择|boolean|true|false| |show-checkbox-leaf-only|是否仅叶子节点展示 checkbox, show-checkbox 为 true 时有效|boolean|true|false| |default-checked-keys|默认勾选的节点的 key 的数组 (需要 setData 之后赋值)|||| |check-strictly|在显示复选框的情况下，是否严格的遵循父子不互相关联的做法|boolean|true|false|

Methods

|方法名称|说明|参数| |-|-|-| |setData|导入数据结构|object[]| | setCheckedKeys | 通过 keys 设置目前勾选的节点|勾选节点的 key 的数组| | setCheckedNodes | 设置目前勾选的节点|勾选节点数据的数组| | getCheckedKeys | 若节点可被选择, 则返回目前被选中的节点的 key 所组成的数组|—| | getCheckedNodes | 若节点可被选择, 则返回目前被选中的节点所组成的数组|—| | clearChecked | 清空所有已选中的节点|—| | setExpand | 设置目前展开的节点|展开节点的 key 的数组| | showCheckedOnly | 只展示选中的项, 此方法会置空过滤条件 | (isOnlyInCheckedSearch): 是否只在选中的节点里进行筛选, 默认 true | | restore | 对 showCheckedOnly 之后进行恢复 | —| | update | 手动更新选中状态| —| | clear | 清空内存占用| —|

Events

| 事件名称| 说明| 回调参数| | - | - | - | | check-change| 选中状态变化触发|(checkedKeys, checkedNodes) 共两个参数, 依次为: 已选节点的 key 列表; 已选节点列表| | check |当复选框被点击的时候触发|当前节点| | click-label|节点 label 被点击时的回调|当前节点|

Scoped Slot

|name|说明| |-|-| |—|自定义树节点的内容, 例: <template v-slot="node">{{ node }}</template> 参数详情 | |search-bar| 自定义搜索框的内容, 例: <template v-slot:search-bar>xxx</template>| |loading| 自定义加载中 slot, 例: <template v-slot:loading>加载中...</template>|

数据结构

|属性|说明|类型|可选值|默认值| |-|-|-|-|-| |label|节点标签|string|—|—| |id|节点唯一标识 (属性名受 node-key 影响, 默认为"id")|||| |parentKey|父节点的 key (根节点必须为 null)|string | number|—|—| |disabled|设置禁用状态|boolean|true|false| |children|节点子元素|array|—|—|

节点结构

|属性|说明|类型| |-|-|-| |label|节点标签|string| |disabled|禁用状态|boolean| |id|节点唯一标识 (属性名受 node-key 影响, 默认为"id")|string | number| |parentKey|父节点的 key (根节点必须为 null)|string | number| |children|节点子元素|array| |checked|勾选状态|boolean| |hideCheckbox|隐藏选择框|boolean| |indeterminate|节点的子树中是否是部分选中|boolean| |isLeaf|是否为叶子节点|boolean| |path|节点位置|array| |isExpand|是否展开|boolean| |hidden|是否隐藏|boolean| |leafCount|后代元素数量|number|