smart-tree-dbb

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

Usage no npm install needed!

<script type="module">
  import smartTreeDbb from 'https://cdn.skypack.dev/smart-tree-dbb';
</script>

README

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: 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.