1.1.4 • Published 4 years ago
@feizheng/react-ant-tree-select v1.1.4
react-ant-tree-select
Antd tree select wrapper for react.
installation
npm install -S @feizheng/react-ant-tree-select
update
npm update @feizheng/react-ant-tree-select
properties
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | false | - | The extended className for component. |
items | array | false | [] | Data source items(tree). |
template | func | false | - | The items template. |
itemsKey | union | false | 'children' | Items key(default: children). |
usage
import css
@import "~@feizheng/react-ant-tree-select/dist/style.scss"; // customize your styles: $react-ant-tree-select-options: ()
import js
import ReactAntTreeSelect from '@feizheng/react-ant-tree-select'; import ReactDOM from 'react-dom'; import React from 'react'; import { TreeSelect } from 'antd'; import './assets/style.scss'; class App extends React.Component { constructor(inProps) { super(inProps); this.state = { items: [ { label: '0-0', value: '0-0', children: [ { label: '0-0-0', value: '0-0-0', children: [ { label: '0-0-0-0', value: '0-0-0-0' }, { label: '0-0-0-1', value: '0-0-0-1' }, { label: '0-0-0-2', value: '0-0-0-2' } ] }, { label: '0-0-1', value: '0-0-1', children: [ { label: '0-0-1-0', value: '0-0-1-0' }, { label: '0-0-1-1', value: '0-0-1-1' }, { label: '0-0-1-2', value: '0-0-1-2' } ] }, { label: '0-0-2', value: '0-0-2' } ] }, { label: '0-1', value: '0-1', children: [ { label: '0-1-0-0', value: '0-1-0-0' }, { label: '0-1-0-1', value: '0-1-0-1' }, { label: '0-1-0-2', value: '0-1-0-2' } ] }, { label: '0-2', value: '0-2' } ] }; } template = (inData) => { if (inData && inData.length) { return inData.map((item) => { const { label, value, ...itemProps } = item; if (item.children) { return ( <TreeSelect.TreeNode title={label} key={value} value={value} {...itemProps}> {this.template(item.children)} </TreeSelect.TreeNode> ); } return <TreeSelect.TreeNode title={label} key={value} value={value} />; }); } return null; }; render() { return ( <div className="app-container"> <ReactAntTreeSelect style={{ width: 200 }} items={this.state.items} // template={this.template} /> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));