Element React 树形控件(Tree)使用指南

树形控件(Tree)是Element React组件库中用于展示层级结构数据的重要组件，它能够清晰地展示父子节点关系，并支持展开、折叠、选择等交互操作。本文将全面介绍Tree组件的使用方法，帮助开发者快速掌握这一实用组件。

基础用法

最基本的树形结构展示只需要提供数据即可：

<Tree
  data={treeData}
  options={{
    children: 'children',
    label: 'label'
  }}
/>

其中data是树形数据源，options用于指定数据中表示子节点和标签的字段名。

可选择树

通过设置isShowCheckbox属性可以启用节点选择功能：

<Tree
  data={treeData}
  options={options}
  isShowCheckbox={true}
  onCheckChange={(data, checked) => {
    console.log('选中状态变化:', data, checked)
  }}
/>

懒加载模式

对于大数据量的树形结构，可以使用懒加载模式，只在展开节点时才加载子节点数据：

<Tree
  data={topLevelData}
  options={options}
  lazy={true}
  load={(node, resolve) => {
    // 根据node信息异步获取子节点数据
    fetchChildren(node.id).then(children => {
      resolve(children)
    })
  }}
/>

默认展开与选中

可以通过以下属性设置默认展开和选中的节点：

<Tree
  data={treeData}
  options={options}
  nodeKey="id"
  defaultExpandedKeys={[1, 2]}
  defaultCheckedKeys={[5]}
/>

注意：使用defaultCheckedKeys时必须设置nodeKey属性，它指定了节点的唯一标识字段。

自定义节点内容

通过renderContent属性可以完全自定义节点的渲染内容：

renderContent(nodeModel, data, store) {
  return (
    <div>
      <span>{data.label}</span>
      <Button onClick={() => this.appendNode(store, data)}>添加</Button>
    </div>
  )
}

<Tree
  data={treeData}
  renderContent={this.renderContent}
/>

节点过滤

Tree组件支持通过关键字过滤节点：

<Input 
  placeholder="输入关键字过滤"
  onChange={(text) => this.tree.filter(text)}
/>

<Tree
  ref={(tree) => this.tree = tree}
  data={treeData}
  filterNodeMethod={(value, data) => {
    return data.label.includes(value)
  }}
/>

手风琴模式

设置accordion属性可以开启手风琴模式，同一层级每次只能展开一个节点：

<Tree
  data={treeData}
  accordion={true}
/>

常用API方法

Tree组件提供了丰富的API方法来控制树的状态：

• filter(value) - 过滤树节点
• getCheckedNodes() - 获取选中的节点
• setCheckedNodes(nodes) - 设置选中的节点
• getCheckedKeys() - 获取选中的节点keys
• setCheckedKeys(keys) - 通过keys设置选中的节点

事件处理

Tree组件提供了多个事件回调：

• onNodeClicked - 节点点击事件
• onCheckChange - 节点选中状态变化
• onCurrentChange - 当前选中节点变化
• onNodeExpand - 节点展开事件
• onNodeCollapse - 节点折叠事件

最佳实践

1. 对于大数据量的树，务必使用懒加载模式
2. 需要操作节点状态时，必须设置nodeKey属性
3. 自定义节点内容时，注意保持样式一致性
4. 过滤功能可以结合防抖优化性能

通过本文的介绍，相信您已经掌握了Element React中Tree组件的核心用法。树形控件在文件系统、组织架构、分类目录等场景中都有广泛应用，合理使用可以大大提升用户体验。