smart-tree

smart-tree

这个库的使用方法跟element-ui里面的el-tree组件类似，所以你可以先了解该组件的使用方法，这里主要介绍额外的功能。

This library is used like el-tree from element-ui, so please read its README before using this library. And in this place we olny introduce the diffrence function.

License

MIT License

Install

npm install -S smart-tree

Quick Start

import Vue from 'vue'
import SmartTree from 'smart-tree'
import 'smart-tree/dist/smart-tree.css'

Vue.use(SmartTree)

/**
 * smart-tree组件的容器必须要有固定尺寸，这是因为它需要计算可视区域。
 *
 * The container size of smart-tree component should be affirmatoryly, because we must calculate the size
 * of visiable area.
 */
<app>
    <div style='width:200px;height:100px'>
        <smart-tree></smart-tree>
    </div>
</app>

Current Attributes & Functions

ATTRIBUTES:

data

props

deltaY

defaultExpandLevel

indent

nodeHeight

emptyText

simple

HOOKS:

filterNodeMethod

FUNCTIONS:

filter(value: string): void

updateSize(): void

Usage

There are several attributes and functions:

• simple
• deltaY
• nodeHeight
• updateSize(): void

simple: boolean

simple一般与data属性配合使用，表示data的结构类型。不携带为false，表示data为树型数据结构（element-ui的结构）；携带时为true，此时data类型为数组，每个元素根据id和pId属性标识树型关系。

The simple attribute generally used with data, it means that data format is a array.

const data = [
    {
        label: 'item1',
        id: 1
    }, {
        label: 'item2',
        id: 2,
        pId: 1
    }, {
        label: 'item3',
        id: 3,
        pId: 2
    }
]

相当于

is equivalent to

const data = [
    {
        label: 'item1',
        children: [{
            label: 'item2',
            children: [{
                label: 'item3'
            }]
        }]
    }
]

deltaY: number

deltaY表示鼠标滚轮滚动的幅度，单位为像素。

deltaY means mousewheel delta in vertical bar.

nodeHeight: number

nodeHeight表示每个树节点的高度。

nodeHeight is heigth of tree node.

updateSize (): void

当树的容器大小改变时，可以调用该方法更新显示区域内容。因为容器的大小改变通常是已知的行为，这里并不使用低效的事件监听方式。

You can apply this function when tree container size changed.