ElementUI 的 Tree 组件的基本使用实战教程

一、什么是 Tree 组件

Tree（树形控件）组件是一个支持层级结构的数据展示组件，用于内部节点展开和收起。Tree 组件很常见于诸如管理系统、导航等场景中。

使用 ElementUI 的 Tree 组件时，需要安装和引入 ElementUI 组件库。可以在 ElementUI 的官网上查看组件具体使用方法与样式。

二、Tree 组件的基本结构

ElementUI 的 Tree 组件基本结构由以下几个部分组成：

一个包含多个节点的树形结构；
每个节点包含一个标题（label）、子节点、节点状态等信息；
Tree 组件包含多个事件函数，如节点选中（node-click）、节点展开（node-expand）等。

三、如何使用 Tree 组件

1. 安装和引入 ElementUI 组件库

在使用 ElementUI 的 Tree 组件之前必须先安装和引入 ElementUI 组件库。

安装 ElementUI：

npm install element-ui --save

在项目入口文件中引入 ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 基本使用

以下是 Tree 组件的基本使用方法：

<el-tree :data="[{
  id: 1,
  label: 'node-1',
  children: [{
    id: 2,
    label: 'node-1-1'
  }]
}]">
</el-tree>

在上述示例中，定义了一个根节点，其中包含一个子节点。根节点和子节点分别都要包含一个 id 和 label 属性，表示节点的标识和名称。

3. 节点选中事件

当用户选中某个节点时，可以触发 Tree 的 node-click 事件：

<el-tree
  :data="treeData"
  @node-click="handleNodeClick">
</el-tree>

export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: 'node-1',
        children: [{
          id: 2,
          label: 'node-1-1'
        }]
      }]
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}

在上述示例中，使用 node-click 事件和 handleNodeClick 方法来对节点的选中事件进行处理。

4. 节点展开事件

当用户展开某个节点时，可以触发 Tree 的 node-expand 事件：

<el-tree
  :data="treeData"
  :expand-on-click-node="false"
  :default-expanded-keys="['1']"
  @node-expand="handleNodeExpand">
</el-tree>

export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: 'node-1',
        children: [{
          id: 2,
          label: 'node-1-1'
        }]
      }]
    }
  },
  methods: {
    handleNodeExpand(data, node, instance) {
      console.log(data, node, instance)
    }
  }
}

在上述示例中，使用 node-expand 事件和 handleNodeExpand 方法来对节点的展开事件进行处理。通过设置 expand-on-click-node 属性可以改变展开节点的方式。通过设置 default-expanded-keys 属性可以设置默认展开的节点。