elementui tree树形控件做侧边导航栏

要使用 ElementUI 的 Tree 树形控件做侧边导航栏，可以按照以下步骤进行：

1. 安装 ElementUI 组件库：

npm install element-ui -S

2. 引入 Tree 组件：

import { Tree } from 'element-ui';

3. 在模板中使用 Tree 组件：

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

4. 在脚本中定义 treeData 和 treeProps 变量：

export default {
  data() {
    return {
      treeData: [
        {
          label: '首页',
          icon: 'el-icon-s-home',
          path: '/'
        },
        {
          label: '文章',
          icon: 'el-icon-document',
          children: [
            {
              label: 'JavaScript',
              path: '/article/javascript'
            },
            {
              label: 'Vue',
              path: '/article/vue'
            },
            {
              label: 'React',
              path: '/article/react'
            }
          ]
        },
        {
          label: '关于',
          icon: 'el-icon-info',
          path: '/about'
        }
      ],
      treeProps: {
        label: 'label',
        children: 'children',
        isLeaf: node => !node.children,
        icon: node => node.icon
      }
    };
  }
};

其中，treeData 是树形数据，treeProps 是 Tree 组件的属性配置。在这里，我们使用 label 属性作为节点显示文本，children 属性表示子节点，isLeaf 函数用于判断是否为叶子节点，icon 函数用于设置节点图标。

5. 根据 path 属性实现路由跳转：

export default {
  methods: {
    handleNodeClick(node) {
      if (node.path) {
        this.$router.push(node.path);
      }
    }
  }
};

在 Tree 组件上绑定 node-click 事件，当节点被点击时，判断是否有 path 属性，如果有则使用 Vue Router 进行路由跳转。

这样，我们就可以使用 ElementUI 的 Tree 组件快速实现一个侧边导航栏了。