elementui tree树形控件做左侧导航栏
时间: 2023-09-02 08:05:41 浏览: 68
ElementUI 的 tree 树形控件可以用来实现左侧导航栏,以下是一个简单的实现例子:
HTML:
```
<template>
<el-tree
:data="treeData"
:default-expand-all="true"
:highlight-current="true"
@node-click="handleNodeClick"
></el-tree>
</template>
```
JS:
```
<script>
export default {
data() {
return {
treeData: [
{
label: '首页',
icon: 'el-icon-menu',
path: '/',
},
{
label: '用户管理',
icon: 'el-icon-user',
children: [
{
label: '用户列表',
path: '/user/list',
},
{
label: '添加用户',
path: '/user/add',
},
],
},
{
label: '订单管理',
icon: 'el-icon-s-order',
children: [
{
label: '订单列表',
path: '/order/list',
},
{
label: '添加订单',
path: '/order/add',
},
],
},
],
};
},
methods: {
handleNodeClick(data) {
this.$router.push(data.path);
},
},
};
</script>
```
在这个例子中,我们使用了 ElementUI 的 tree 组件,并通过传入的 treeData 数组来渲染树形菜单。每个菜单项都有一个 label 属性表示显示的文本,一个 icon 属性表示显示的图标,和一个 path 属性表示点击后跳转的路径。当用户在菜单项上点击时,我们通过监听 node-click 事件来获取当前点击的菜单项的数据,并通过 $router.push 方法跳转到对应的路由页面。