cjd-parkball/src/components/layerTree/demo/basic.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
title: 层级树的基本用法
title_en: normal usage for layer tree component
category: 2
---
展示了一个层级树组件的基本用法
```jsx
import LayerTree from '../'

const moreLevelTpl = [
    {
      title: 'item1',
      key: 'item1',
    },
    {
      title: 'item2',
      key: 'item2',
      isDeletable: true,
    },
    {
      title: 'item3',
      key: 'item3',
    },
  ]

  const detailTpl = {
    layerLevel: 4,
    tpl: props => <div>{props[0]}</div>,
    tplData: ['hello'],
  }

class Demo extends React.Component {
  state = {
    layerTreeData: [
      [
        {
          title: 'a',
          key: 'a',
          isDeletable: true,
        },
        {
          title: 'b',
          key: 'b',
          isDeletable: true,
        },
        {
          title: 'c',
          key: 'c',
        },
        {
          title: 'a',
          key: 'a1',
        },
        {
          title: 'b',
          key: 'b1',
        },
        {
          title: 'c',
          key: 'c1',
        },
        {
          title: 'a',
          key: 'a2',
        },
        {
          title: 'b',
          key: 'b2',
        },
        {
          title: 'c',
          key: 'c2',
        },
      ],
    ]
  }

   onSelect = (et) => {
    const { layerTreeData } = this.state
    const { key, level, index } = et
    const tmpData = Object.create(layerTreeData)
    level === tmpData.length ? tmpData.push(moreLevelTpl.map(i => ({
      ...i,
      key: `${key[0]}-${i.key}`,
      title: `${key[0]}-${i.key}`,
    }))): tmpData.splice(level, 1, moreLevelTpl.map(i => ({
      ...i,
      key: `${key[0]}-${i.key}`,
      title: `${key[0]}-${i.key}`,
    })))
    this.setState({
      layerTreeData: tmpData
    })
  }

  onAdd = (et) => {
    const { layerTreeData } = this.state
    const { level, value } = et

    const tmpData = Object.create(layerTreeData)
    tmpData[level - 1].push({
      key: value || 'default',
      title: value || 'default',
    })
    this.setState({
      layerTreeData: tmpData
    })
  }

  onEdit = (et) => {
    const { layerTreeData } = this.state
    const { level, index, value } = et
    const tmpData = Object.create(layerTreeData)
    tmpData[level - 1][index].title = value || 'default'
    tmpData[level - 1][index].key = value || 'default'
    this.setState({
      layerTreeData: tmpData
    })
  }

  onDel = (et) => {
    const { layerTreeData } = this.state
    const { level, index } = et
    const tmpData = Object.create(layerTreeData)
    tmpData[level - 1].splice(index, 1)
    this.setState({
      layerTreeData: tmpData
    })
  }

  render () {
    const { layerTreeData } = this.state
    return <LayerTree
      layerTreeData={layerTreeData}
      detailTpl={detailTpl}
      onSelect={this.onSelect}
      onEdit={this.onEdit}
      onDel={this.onDel}
      onAdd={this.onAdd}
      detailWidth={300}
      layerTreeHeight={600}
    />
  }
}

ReactDOM.render(
  <Demo />,
  mountNode
)
```