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

树形组件(Tree)是Element-React中用于展示层级结构数据的重要组件，它能够清晰地呈现父子节点关系，并提供丰富的交互功能。本文将详细介绍Tree组件的各种用法和特性。

基本用法

Tree组件最基本的功能是展示层级数据。使用时需要提供一个符合特定结构的数据源：

constructor(props) {
  super(props);
  this.state = {
    data: [{
      label: '一级节点1',
      children: [{
        label: '二级节点1-1',
        children: [{
          label: '三级节点1-1-1'
        }]
      }]
    }],
    options: {
      children: 'children',
      label: 'label'
    }
  }
}

render() {
  return (
    <Tree
      data={this.state.data}
      options={this.state.options}
    />
  )
}

在这个例子中，我们定义了一个三层级的树结构，并通过options属性指定了数据中表示子节点和标签的字段名。

可选择节点

Tree组件支持节点选择功能，通过设置isShowCheckbox属性为true可以显示复选框：

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

当用户勾选或取消勾选节点时，会触发onCheckChange事件，返回当前节点数据、选中状态以及不确定状态。

懒加载节点

对于大数据量的树结构，可以使用懒加载来优化性能：

<Tree
  data={regions}
  options={options}
  lazy={true}
  load={this.loadNode.bind(this)}
/>

需要实现load方法，当用户展开未加载的节点时会调用该方法：

loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: '区域1' }, { name: '区域2' }]);
  }
  if (node.level > 3) return resolve([]);

  setTimeout(() => {
    resolve([{
      name: '区域' + this.count++
    }]);
  }, 500);
}

默认展开与默认选中

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

<Tree
  data={data}
  options={options}
  isShowCheckbox={true}
  nodeKey="id"
  defaultExpandedKeys={[2, 3]}
  defaultCheckedKeys={[5]}
/>

注意：使用这些功能时需要指定nodeKey属性，它的值应该是数据中唯一标识节点的字段名。

自定义节点内容

Tree组件允许完全自定义节点的渲染内容：

renderContent(nodeModel, data, store) {
  return (
    <span>
      <span>{data.label}</span>
      <Button onClick={() => this.append(store, data)}>添加</Button>
      <Button onClick={() => this.remove(store, data)}>删除</Button>
    </span>
  );
}

render() {
  return (
    <Tree
      data={data}
      options={options}
      renderContent={this.renderContent.bind(this)}
    />
  )
}

节点过滤

Tree组件支持基于关键词的节点过滤功能：

<Tree
  ref={e => this.tree = e}
  data={data}
  options={options}
  filterNodeMethod={(value, data) => {
    return data.label.indexOf(value) !== -1;
  }}
/>

// 调用过滤方法
this.tree.filter('关键词');

手风琴模式

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

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

组件API详解

属性

属性名	说明	类型	可选值	默认值
data	树形数据	Array	-	-
nodeKey	节点唯一标识字段名	String	-	-
options	配置选项	Object	-	{label: 'label', children: 'children'}
isShowCheckbox	是否显示复选框	Boolean	-	false
defaultExpandAll	是否默认展开所有节点	Boolean	-	false
filterNodeMethod	节点过滤方法	Function	-	-
accordion	是否开启手风琴模式	Boolean	-	false

方法

方法名	说明	参数
filter	过滤树节点	过滤关键词
getCheckedNodes	获取选中的节点	(leafOnly) 是否只包含叶子节点
setCheckedNodes	设置选中节点	节点数组
getCheckedKeys	获取选中节点的key	(leafOnly) 是否只包含叶子节点
setCheckedKeys	通过key设置选中节点	(keys, leafOnly) key数组和是否只包含叶子节点

事件

事件名	说明	参数
onNodeClicked	节点点击事件	(节点数据, 节点实例)
onCheckChange	选中状态变化事件	(节点数据, 是否选中, 不确定状态)
onNodeExpand	节点展开事件	(节点数据, 节点模型, 节点实例)
onNodeCollapse	节点收起事件	(节点数据, 节点模型, 节点实例)

最佳实践

1. 大数据量优化：当数据量较大时，建议使用懒加载模式，避免一次性加载所有数据。

2. 唯一标识：始终设置nodeKey属性，它是许多功能(如默认展开、默认选中等)的基础。

3. 自定义内容：利用renderContent属性可以创建功能丰富的树节点，如添加操作按钮等。

4. 性能考虑：避免在renderContent方法中进行复杂计算或频繁的状态更新。

通过合理使用Tree组件的各种特性，可以构建出功能强大且用户体验良好的层级结构展示界面。