ElementUI中Tree组件使用案例讲解

下面是ElementUI中Tree组件使用的完整攻略。

1. Tree组件介绍

Tree组件是ElementUI中用来展示树形数据结构的组件。它可以帮助我们方便地展示复杂的数据，简化用户的交互流程。

2. Tree组件的基本使用

使用Tree组件的前提是需要安装ElementUI库，可以通过以下命令安装：

npm install element-ui -S

安装完成后，在需要使用Tree组件的页面中引入即可。假设我们需要在 HomePage.vue 中展示一棵树形结构，则可以按照以下代码进行引用：

<template>
  <div>
    <el-tree :data="treeData"
             :props="defaultProps">
    </el-tree>
  </div>
</template>

<script>
import {ElTree} from 'element-ui'

export default {
  components: {
    ElTree
  },
  data() {
    return {
      treeData: [ // 树形数据结构，可以根据需求自行修改
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        },
        {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }
      ],
      defaultProps: { // 设置每个节点所需要的默认属性
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

这样一来，我们就能看到一个简单的树形结构了。其中 data 属性用来指定我们要展示的数据，而 defaultProps 属性则用来设置每个节点所需要的默认属性。

3. Tree组件的高级用法

除了基本用法之外，Tree组件还提供了许多高级用法，下面举两个例子进行说明。

3.1 动态加载数据

假设我们需要通过异步请求来加载树形数据，那么可以按照以下代码进行实现：

<template>
  <div>
    <el-tree :data="treeData"
             :props="defaultProps"
             :load="loadTreeData">
    </el-tree>
  </div>
</template>

<script>
import {ElTree} from 'element-ui'

export default {
  components: {
    ElTree
  },
  data() {
    return {
      treeData: [], // 通过异步请求加载得到的树形数据
      defaultProps: { // 设置每个节点所需要的默认属性
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    loadTreeData(node, resolve) { // node代表当前节点，resolve代表成功后的回调函数
      if (node.level === 0) { // 根据级别判断是否需要异步加载数据
        // 通过异步请求得到数据
        setTimeout(() => {
          this.treeData = [{
            label: '一级 1',
            id: 1,
            children: []
          }, {
            label: '一级 2',
            id: 2,
            children: []
          }]
          // 执行回调函数，并传入需要展示的数据
          resolve(this.treeData)
        }, 1000) // 延迟1s模拟请求
      } else if (node.level === 1) {
        // 通过异步请求得到数据
        setTimeout(() => {
          let pid = node.data.id
          this.treeData = [{
            label: '二级 1-1',
            id: pid * 10 + 1,
            children: []
          }, {
            label: '二级 1-2',
            id: pid * 10 + 2,
            children: []
          }]
          // 执行回调函数，并传入需要展示的数据
          resolve(this.treeData)
        }, 1000) // 延迟1s模拟请求
      } else {
        // 通过异步请求得到数据
        setTimeout(() => {
          let pid = node.data.id
          this.treeData = [{
            label: '三级 1-1-1',
            id: pid * 10 + 1
          }, {
            label: '三级 1-1-2',
            id: pid * 10 + 2
          }]
          // 执行回调函数，并传入需要展示的数据
          resolve(this.treeData)
        }, 1000) // 延迟1s模拟请求
      }
    }
  }
}
</script>

在 loadTreeData 方法中，我们根据当前节点的级别判断是否需要异步加载数据，并通过回调函数 resolve 返回需要展示的数据。这样一来，我们就能通过异步请求来动态加载数据了。

3.2 自定义节点模板

通过自定义节点模板，我们可以更加灵活地控制每个节点的展示方式。以下是一个简单的例子：

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

<script>
import {ElTree} from 'element-ui'

export default {
  components: {
    ElTree
  },
  data() {
    return {
      treeData: [ // 树形数据结构，可以根据需求自行修改
        {
          label: '一级 1',
          icon: 'el-icon-info',
          children: [{
            label: '二级 1-1',
            isLeaf: true, // 设置为叶子节点
            icon: 'el-icon-warning',
            data: {
              url: 'http://www.example.com' // 自定义数据
            }
          }]
        },
        {
          label: '一级 2',
          icon: 'el-icon-success',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }
      ],
      defaultProps: { // 设置每个节点所需要的默认属性
        children: 'children',
        label: 'label',
        isLeaf: 'isLeaf',
        data: 'data'
      }
    }
  },
  methods: {
    renderTreeNode(h, {node, data, store}) { // h代表createElement，node代表当前节点，store代表Store对象
      let icon = ""
      if (data.icon) { // 如果当前节点有自定义图标，则使用自定义图标
        icon = (<i class={data.icon}></i>)
      }
      return (
        <span class="node-content">
          <span>{node.label}</span>
          {icon}
          <a v-if={data.url} href={data.url} target="_blank">跳转</a>
        </span>
      )
    }
  }
}
</script>

在 renderTreeNode 方法中，我们使用 createElement 函数自定义了节点的展示方式。这样一来，我们就能灵活地控制每个节点的展示了。

结语

以上是ElementUI中Tree组件的基本使用和高级用法。通过这些知识，我们可以方便地展示复杂的树形数据结构，并提供更好的用户体验。