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

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

1. 引入 ElementUI 库和样式表：

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

Vue.use(ElementUI)

2. 在组件中使用 Tree 组件，并配置相关属性：

<template>
  <div>
    <el-tree :data="treeData" :default-expanded-keys="[1]" :highlight-current="true" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '导航1',
          children: [
            {
              id: 2,
              label: '子导航1'
            },
            {
              id: 3,
              label: '子导航2'
            }
          ]
        },
        {
          id: 4,
          label: '导航2',
          children: [
            {
              id: 5,
              label: '子导航3'
            },
            {
              id: 6,
              label: '子导航4'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

在上述代码中，我们使用了 Tree 组件，并传入了 treeData 数组作为数据源。其中，每个元素代表一个导航项，包含 id 和 label 两个属性，children 属性是一个数组，表示该导航项的子导航项。我们还配置了 default-expanded-keys 属性，表示默认展开的节点，highlight-current 属性表示高亮当前选中节点的效果。

3. 样式设置

根据需求，可以对 Tree 组件的样式进行自定义设置，例如设置宽度和高度，以及背景色等。

.el-tree {
  width: 200px;
  height: 100%;
  background-color: #f4f4f4;
}

通过以上步骤，就可以使用 ElementUI 中的 Tree 组件作为侧边导航栏了。