TreeView 树形结构组件

优质
小牛编辑
128浏览
2023-12-01

树形结构组件。

Usage

全部引入

import { TreeView } from 'beeshell';

按需引入

import { TreeView } from 'beeshell/dist/components/TreeView';

Examples

image

Code

详细 Code

```js import { TreeView } from 'beeshell';

const nestedData = [ { label: '北京', id: 'beijing', children: [ { label: '朝阳区', id: 'chaoyangqu', children: [{ label: '百子湾', id: 'baiziwan' }] }, { label: '海淀区', id: 'haidianqu' } ] } ]

const flattenedData = [ { label: '北京', id: 'beijing' }, { label: '朝阳区', id: 'chaoyangqu', pId: 'beijing' }, { label: '百子湾', id: 'baiziwan', pId: 'chaoyangqu' }, { label: '海淀区', id: 'haidianqu', pId: 'beijing' } ]

{ console.log(item) }} />

{ console.log(item) }} />

API

Props

NameTypeRequiredDefaultDescription
styleViewStylefalse{}按钮样式
activeIconReactElementfalse激活状态图标
unActiveIconReactElementfalse未激活状态图标
dataany[]false[]数据源,支持嵌套和扁平的树形结构
dataStructureTypestringfalse'nested'数据结构类型,支持 'nested' 'flattened'
fieldKeysanyfalse{}数据项的 key 自定义,包括 idKey pIdKey childrenKey activeKey
onPressFunctionfalsenull点击某项回调,参数为点击项