软件工程师必备的树控件之选

多选、复选、穿梭框之日常总结

软件工程师的日常工作中少不了要与各种各样的UI控件打交道，其中树形控件就是一种非常常用的控件。树形控件可以用于展示各种具有父子关系的数据，例如文件系统、组织结构等。在Element中，就提供了一个非常好用的树形控件——el-tree。

el-tree不仅提供了常用的基本功能，还支持多选、复选、穿梭框等多种模式。这些模式可以帮助我们更方便地对数据进行操作。

多选

多选模式允许用户选择多个节点。要启用多选模式，只需要将el-tree的props.multiple属性设置为true即可。

<el-tree :data="data" :props="defaultProps" :multiple="true"></el-tree>

复选

复选模式允许用户选择多个节点，但与多选模式不同的是，复选模式允许用户选择父节点，同时也会选中其所有的子节点。要启用复选模式，只需要将el-tree的props.show-checkbox属性设置为true即可。

<el-tree :data="data" :props="defaultProps" :show-checkbox="true"></el-tree>

穿梭框

穿梭框模式允许用户在两个树形控件之间进行数据的拖拽操作。要启用穿梭框模式，只需要将el-tree的props.transfer属性设置为true即可。

<el-tree :data="data" :props="defaultProps" :transfer="true"></el-tree>

父子无关的tree(ps:无半选，全选等默认操作)

拿到这个需求就是用官方通用el-tree加根据其类型回调其图标方法，使用插槽，首先为了满足需求，需要给el-tree进行绑定一个自定义方法来控制其是否应该使用默认方法，如果不需要就调用自定义方法，如果需要就使用默认方法。

<el-tree :data="data" :props="defaultProps" :show-checkbox="true" default-expand-all @node-click="handleNodeClick"></el-tree>

handleNodeClick(data, node, component) {
  if (data.icon) {
    component.store.setCheckedKeys([node.data.id]);
  } else {
    this.defaultCheckedKeys = [node.data.id];
    this.tree.setCheckedKeys(this.defaultCheckedKeys);
  }
}

在实际使用中，我们可以根据自己的业务需求来选择使用哪种模式。el-tree的这些模式非常灵活，可以满足我们各种各样的需求。