树形控件（Tree）

Element-UI 的树形控件用于展示具有层级关系的数据结构。它可以展开或折叠各个节点，以便用户查看或操作不同层级的数据。

提示

树形控件（Tree）组件官方文档：https://element.eleme.cn/#/zh-CN/component/tree (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-tree> 标签创建一个树形结构，通过 data 属性绑定树形数据，并通过 node-key、props 等属性配置树形控件的行为。

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

<script>
export default {
  data() {
    return {
      treeData: [ /* 树形数据 */ ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log('节点点击', data);
    }
  }
};
</script>

• data 绑定：data 属性绑定树形控件展示的数据，格式为数组。
• node-key：为每个节点指定一个唯一的标识属性，建议在树形结构复杂的情况下使用，便于操作。
• props：通过 props 属性配置树形控件的数据结构，例如指定节点标签、子节点等字段名。
• show-checkbox：是否展示复选框，默认为 false。
• default-expand-all：是否默认展开所有节点，默认为 false。
• 事件监听：通过 @node-click 等事件监听节点的交互行为。

Tree 属性

参数	说明	类型	可选值	默认值
data	展示的数据	array	—	—
empty-text	内容为空时展示的文本	string	—	—
node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	string	—	—
props	配置选项，具体配置参考下表	object	—	—
render-after-expand	是否在第一次展开某个树节点后才渲染其子节点	boolean	—	true
load	加载子树数据的方法，仅当 lazy 属性为 true 时生效	function(node, resolve)	—	—
render-content	树节点的内容区的渲染 Function	Function(h, { node, data, store })	—	—
highlight-current	是否高亮当前选中节点	boolean	—	false
default-expand-all	是否默认展开所有节点	boolean	—	false
expand-on-click-node	是否在点击节点时展开或收缩节点	boolean	—	true
check-on-click-node	是否在点击节点时选中节点	boolean	—	false
auto-expand-parent	展开子节点时是否自动展开父节点	boolean	—	true
default-expanded-keys	默认展开的节点的 key 的数组	array	—	—
show-checkbox	节点是否可被选择	boolean	—	false
check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法	boolean	—	false
default-checked-keys	默认勾选的节点的 key 的数组	array	—	—
current-node-key	当前选中的节点	string, number	—	—
filter-node-method	对树节点进行筛选时执行的方法，返回 true 表示节点可以显示，返回 false 则表示节点会被隐藏	Function(value, data, node)	—	—
accordion	是否每次只打开一个同级树节点	boolean	—	false
indent	相邻级节点间的水平缩进，单位为像素	number	—	16
icon-class	自定义树节点的图标	string	—	—
lazy	是否懒加载子节点，需与 load 方法结合使用	boolean	—	false
draggable	是否开启拖拽节点功能	boolean	—	false
allow-drag	判断节点能否被拖拽	Function(node)	—	—
allow-drop	拖拽时判定目标节点能否被放置。type 参数有三种情况：prev、inner 和 next，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后	Function(draggingNode, dropNode, type)	—	—

Tree Props 配置

通过 props 配置选项，控制树形控件的数据结构。props 是一个对象，包含以下字段：

参数	说明	类型	默认值
label	指定节点标签为节点对象的某个属性值	string, function(data, node)	—
children	指定子树为节点对象的某个属性值	string	—
disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)	—
isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	boolean, function(data, node)	—

Tree 方法

Tree 组件提供了多个方法，开发者可以通过这些方法控制树形结构的行为和状态。

方法名	说明	参数
filter	对树节点进行筛选操作	filter(value)
updateKeyChildren	通过 key 设置节点子元素，必须设置 node-key 属性	(key, data)
getCheckedNodes	返回当前被选中的节点所组成的数组（勾选节点）	(leafOnly, includeHalfChecked)
setCheckedNodes	设置当前勾选的节点，必须设置 node-key 属性	(nodes)
getCheckedKeys	返回当前被选中的节点的 key 所组成的数组	(leafOnly)
setCheckedKeys	通过 key 设置当前勾选的节点	(keys, leafOnly)
setChecked	通过 key/data 设置某个节点的勾选状态	(key/data, checked, deep)
getHalfCheckedNodes	返回当前半选中的节点所组成的数组	—
getHalfCheckedKeys	返回当前半选中的节点的 key 所组成的数组	—
getCurrentKey	获取当前选中的节点的 key	—
getCurrentNode	获取当前选中的节点的数据	—
setCurrentKey	通过 key 设置某个节点的当前选中状态	(key)
setCurrentNode	通过 node 设置某个节点的当前选中状态	(node)
getNode	根据 data 或 key 拿到 Tree 组件中的 node	(data)
remove	删除 Tree 中的一个节点	(data)
append	为 Tree 中的一个节点追加一个子节点	(data, parentNode)
insertBefore	为 Tree 的一个节点的前面增加一个节点	(data, refNode)
insertAfter	为 Tree 的一个节点的后面增加一个节点	(data, refNode)

Tree 事件

Tree 组件中发生的交互行为

可以通过事件来捕捉和处理。以下是常用的事件列表：

事件名称	说明	回调参数
node-click	节点被点击时触发	共三个参数：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-contextmenu	节点被鼠标右键点击时触发	共四个参数：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
check-change	节点选中状态发生变化时触发	共三个参数：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check	复选框被点击时触发	共两个参数：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象
current-change	当前选中节点变化时触发	共两个参数：当前节点的数据，当前节点的 Node 对象
node-expand	节点被展开时触发	共三个参数：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse	节点被关闭时触发	共三个参数：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-drag-start	节点开始拖拽时触发	共两个参数：被拖拽节点对应的 Node、event
node-drag-enter	拖拽进入其他节点时触发	共三个参数：被拖拽节点对应的 Node、所进入节点对应的 Node、event
node-drag-leave	拖拽离开某个节点时触发	共三个参数：被拖拽节点对应的 Node、所离开节点对应的 Node、event
node-drag-over	拖拽节点时触发（类似浏览器的 mouseover 事件）	共三个参数：被拖拽节点对应的 Node、当前进入节点对应的 Node、event
node-drag-end	拖拽结束时（可能未成功）触发	共四个参数：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
node-drop	拖拽成功完成时触发	共四个参数：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event

Tree Scoped Slot

名称	说明
—	自定义树节点的内容，参数为 { node, data }

2. 树形控件常用示例

1. 简单的树形结构

关键点：通过 data 属性直接传入层级结构的数据，label 字段作为节点的展示文本。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    node-key="id">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

• 结构层级：通过嵌套 children 数组定义不同层级的节点。
• 展示文本：通过 label 字段展示节点的文本内容。
• 

2. 树形控件带有复选框

关键点：通过 show-checkbox 属性开启节点的复选框功能。

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    default-expand-all>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [ /* 树形数据 */ ]
    };
  }
};
</script>

• 复选框：每个节点前都会显示一个复选框，允许用户选择多个节点。
• 默认展开：通过 default-expand-all 属性默认展开所有节点。

3. 懒加载子节点

关键点：通过 lazy 和 load 属性实现子节点的懒加载。

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    lazy
    :load="loadNode">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [ /* 根节点数据 */ ]
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        resolve([
          { label: '根节点 1', id: 1 },
          { label: '根节点 2', id: 2 }
        ]);
      } else {
        setTimeout(() => {
          resolve([
            { label: `子节点 ${node.id}-1`, id: `${node.id}-1` },
            { label: `子节点 ${node.id}-2`, id: `${node.id}-2` }
          ]);
        }, 1000);
      }
    }
  }
};
</script>

• 懒加载：只有当节点第一次被展开时，才会触发 load 函数加载其子节点。
• 异步加载：load 函数可以包含异步请求，如从服务器加载数据。
• 

4. 自定义节点内容

关键点：通过 render-content 属性自定义树节点的展示内容。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :render-content="renderContent">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [ /* 树形数据 */ ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    renderContent(h, { node, data }) {
      return (
        <span>
          <span>{data.label}</span>
          <el-button
            style="margin-left: 10px;"
            size="mini"
            onClick={() => this.handleNodeClick(data)}>
            操作
          </el-button>
        </span>
      );
    },
    handleNodeClick(data) {
      this.$message.info(`点击了 ${data.label}`);
    }
  }
};
</script>

• 自定义内容：通过 render-content 使用 Vue 的 render 函数自定义节点内容。
• 操作按钮：在节点中添加操作按钮，点击按钮时触发自定义事件。

5. 拖拽节点

关键点：通过 draggable 属性开启节点的拖拽功能，并配置 allow-drop 和 allow-drag 控制拖拽行为。

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    draggable
    :allow-drag="allowDrag"
    :allow-drop="allowDrop"
    @node-drop="handleDrop">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [ /* 树形数据 */ ]
    };
  },
  methods: {
    allowDrag(node) {
      return true; // 允许所有节点被拖拽
    },
    allowDrop(draggingNode, dropNode, type) {
      return type !== 'inner'; // 禁止拖拽到其他节点内部
    },
    handleDrop(draggingNode, dropNode, type) {
      console.log(`拖拽 ${draggingNode.label} 到 ${dropNode.label} 的 ${type} 位置`);
    }
  }
};
</script>

• 拖拽功能：通过 draggable 属性开启拖拽功能。
• 控制拖拽行为：通过 allow-drag 和 allow-drop 方法精确控制哪些节点可以被拖拽、拖拽到哪些位置。
• 拖拽事件：通过 node-drop 事件监听节点拖拽完成后的行为。

总结

• 灵活的属性配置：通过 props、node-key 等属性可以自定义树形结构的数据和行为。
• 丰富的事件处理：支持 node-click、check-change 等多种事件，方便在用户交互时执行自定义逻辑。
• 多样的展现形式：支持懒加载、自定义节点内容、节点拖拽等功能，满足不同场景下的树形结构展示需求。

3. 树形控件使用场景

1. 文件管理系统

• 场景描述: 在文件管理系统中，文件和文件夹通常具有嵌套关系。Tree 组件可以很好地展示文件夹层级结构，用户可以通过点击展开或折叠文件夹，查看其中的文件。
• 示例:
  • 显示文件结构: 用户可以在左侧导航栏看到整个文件系统的层次结构。
  • 操作文件或文件夹: 用户可以在树形控件中对文件或文件夹进行重命名、删除、移动等操作。

2. 权限管理

• 场景描述: 在权限管理系统中，不同角色可能拥有不同的权限。Tree 组件可以展示权限的层级结构，方便管理员为角色分配权限。
• 示例:
  • 权限配置: 管理员可以通过树形控件选择某个角色的具体权限，支持权限的批量选择和反选。
  • 查看权限层级: 可以清晰展示系统中的权限层级，方便理解和管理。

3. 组织架构图

• 场景描述: 在企业管理系统中，通常需要展示组织结构，显示部门与员工之间的层级关系。Tree 组件可以展示从公司到部门，再到员工的层级关系。
• 示例:
  • 查看部门和员工信息: 用户可以通过树形控件查看各个部门和部门下的员工。
  • 组织架构管理: 管理员可以在树形控件中添加、删除或移动部门和员工。

4. 产品分类展示

• 场景描述: 在电商平台中，商品通常按照类别进行分类。Tree 组件可以用于展示产品的类别结构，方便用户浏览和选择。
• 示例:
  • 产品筛选: 用户可以通过点击树形控件中的类别，快速找到感兴趣的商品。
  • 分类管理: 平台管理员可以通过树形控件管理产品的分类，进行新增、删除或修改操作。

5. 配置管理

• 场景描述: 在配置管理系统中，通常需要展示复杂的配置项和它们之间的依赖关系。Tree 组件可以用于展示这些配置项的层次结构，帮助用户理解配置项之间的关系。
• 示例:
  • 查看配置项: 用户可以通过树形控件查看系统中各配置项的层级关系。
  • 配置项的操作: 可以在树形控件中对配置项进行查看、编辑、删除等操作。

6. 文件管理系统示例

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

<script>
export default {
  data() {
    return {
      // 文件夹和文件的数据结构
      fileTree: [
        {
          id: 1,
          label: '根文件夹',
          children: [
            {
              id: 2,
              label: '子文件夹 1',
              children: [
                { id: 3, label: '文件 1-1' },
                { id: 4, label: '文件 1-2' }
              ]
            },
            {
              id: 5,
              label: '子文件夹 2',
              children: [
                { id: 6, label: '文件 2-1' },
                { id: 7, label: '文件 2-2' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(nodeData, node, self) {
      console.log('你点击了节点:', nodeData.label);
    }
  }
};
</script>

• 文件管理: 这个示例展示了一个简单的文件管理系统，用户可以通过点击节点来选择文件或文件夹。
• 层级结构清晰: 使用 Tree 组件可以清晰地展示文件和文件夹的层次关系。