Tree树形控件

何时使用

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

代码演示

绑定数据源

绑定数据源。

import { DataSet, Tree } from 'choerodon-ui/pro';
function nodeRenderer({ record }) {
  return record.get('text');
}
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree.mock',
    autoQuery: true,
    parentField: 'parentId',
    expandField: 'expand',
    idField: 'id',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'expand', type: 'boolean' },
      { name: 'parentId', type: 'number' },
    ],
    events: {
      select: ({ record, dataSet }) => console.log('select', record, dataSet),
      unSelect: ({ record, dataSet }) => console.log('unSelect', record, dataSet),
    },
  });
  render() {
    return (
      <Tree
        dataSet={this.ds}
        checkable
        renderer={nodeRenderer}
      />
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

API

Tree props

更多案列和属性请参考 Tree。