vc-tree

支持海量数据的虚拟滚动树组件

This project is a virtual scroll tree component for Vue.js

Install

$ npm install vc-tree --save

Usage

main.js

import VcTree from "vc-tree";
import "vc-tree/lib/VcTree/tree.less";
Vue.use(VcTree);

Customize color

// less vars
@background-color-base: hsv(0, 0, 96%);
@primary-color: #ff9800; // 全局主色
@border-color-base: #d9d9d9; // 边框色
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@disabled-bg: @background-color-base; // 失效背景色

// vue.config.js
module.exports = {
  ...
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          "primary-color": "#1890ff",
           ...
        },
        javascriptEnabled: true
      }
    }
  }
  ...
};

Tree node example

[
  {
    key: "1",
    title: "1",
    children: [
      {
        key: "1-1",
        title: "1-1",
        children: [
          { 
            key: 21001, 
            title: "辽CME870", 
            disabled: true // 禁用选框,单击事件
          }
        ],
        selectable: false // 禁止单击title事件
      }
  }
]

Props

|参数|说明|类型|默认值| |:----|:----|:----|:----| |checkedKeys(v-model)|完全控制被选的节点|Array|-| |checkStrictly|父子节点取消关联|Boolean|false| |defaultCheckedKeys|默认选中的节点 (当设置 checkedKeys 时此设置无效)|Array|[]| |defaultExpandedKeys|默认展开的父节点(当设置 expandedKeys 时此设置无效)|Array|[]| |expandAllParents|默认展开全部父节点|Boolean|false| |expandedKeys|完全控制展开的父节点|Array|-| |filterKey|筛选节点, 只显示包含此关键字的节点|String,Number|-| |filterTreeNode|筛选节点函数, 返回值为true的时候展示节点|(node) => Boolean|() => true| |height|容器的高度|Number,String|400|

Methods

|名称|说明|参数|返回值| |:----|:----|:----|:----| |setData|设置树的数据 |data [Array]|-| |update|手动更新生成树|-|-|

调用方法:

1. 设置组件ref
2. this.$ref[refName].setData(treeData);