bee-tree-select v0.0.8

bee-tree-select

bee-tree-select 是树型选择控件，当select下拉框选项为树形结构时会用到该组件。例如层级之间的产品、学科系统、分类目录等等。

依赖

• react >= 15.3.0
• react-dom >= 15.3.0
• prop-types >= 15.6.0

使用方法

组件引入

先进行下载TreeSelect包

npm install --save bee-tree-select

组件调用

import React, { Component } from 'react';
import TreeSelect,{TreeNode} from 'bee-tree-select';
class Demo1 extends Component {
    state = {
    value: undefined,
  }
  onChange = (value) => {
    console.log(arguments);
    this.setState({ value });
  }
  render () {
    return (

            <TreeSelect
            showSearch
            style={{ width: 300 }}
            value={this.state.value}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="Please select"
            allowClear
            treeDefaultExpandAll
            onChange={this.onChange}
            >
                <TreeNode value="parent 1" title="parent 1" key="0-1">
                  <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
                    <TreeNode value="leaf1" title="my leaf" key="random" />
                    <TreeNode value="leaf2" title="your leaf" key="random1" />
                  </TreeNode>
                  <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
                    <TreeNode value="sss" key="random3" />
                  </TreeNode>
                </TreeNode>
            </TreeSelect>

    )
  }
}

样式引入

• 可以使用link引入dist目录下tree.css

<link rel="stylesheet" href="./node_modules/build/bee-tree-select.css">

• 可以在js中import样式

import "./node_modules/src/TreeSelect.scss"
//或是
import "./node_modules/build/bee-tree-select.css"

API

Tree props

TreeNode props

建议使用 treeData 来代替 TreeNode，免去手工构造麻烦

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-tree-select
$ cd bee-tree-select
$ npm install
$ npm run dev