el-header添加menu
时间: 2023-08-05 12:09:52 浏览: 133
要在 `el-header` 中添加菜单,可以使用 `el-menu` 和 `el-menu-item` 组件来实现。以下是一个简单的示例代码:
```html
<template>
<el-header>
<el-menu mode="horizontal">
<el-menu-item index="1">菜单1</el-menu-item>
<el-menu-item index="2">菜单2</el-menu-item>
<el-menu-item index="3">菜单3</el-menu-item>
</el-menu>
</el-header>
</template>
```
在这个示例中,我们在 `el-header` 中嵌套了一个 `el-menu` 组件,并在 `el-menu` 中添加了三个 `el-menu-item` 组件。`mode="horizontal"` 属性使菜单水平排列,而 `index` 属性则用于标识每个菜单项。
你可以根据需求进一步自定义样式和功能。
相关问题
el-dropdown-menu的slot
el-dropdown-menu组件提供了两个默认的插槽:default和header。其中default插槽用于显示下拉菜单的内容,而header插槽用于显示下拉菜单的头部。除了这两个默认插槽,el-dropdown-menu组件还提供了一个名为`disabled`的插槽,用于在下拉菜单被禁用时显示的内容。如果需要在下拉菜单中添加自定义内容,也可以使用具名插槽的方式,在el-dropdown-menu组件中定义插槽,并在需要的地方使用该插槽。
<el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown @command="handleCommand" style="cursor:pointer"> <span>{{username}}</span><i class="el-icon-arrow-down" style="margin-left: 5px;"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item><span @click="goTo('/user')">个人信息</span></el-dropdown-item> <el-dropdown-item><span @click="goTo('')">退出登录</span></el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header>,这段代码里的{{username}}是获取当前用户名称,怎么和后端数据传递,请写出前端具体代码
前端需要向后端发送一个获取当前用户名称的请求,可以使用axios库来发送请求。具体代码如下:
```javascript
import axios from 'axios';
export default {
data() {
return {
username: ''
};
},
mounted() {
// 发送获取当前用户名称的请求
axios.get('/api/user/username')
.then(response => {
this.username = response.data.username;
})
.catch(error => {
console.log(error);
});
}
};
```
上面的代码中,我们使用axios发送一个GET请求,请求地址为`/api/user/username`,后端需要实现这个接口来返回当前用户的名称。当请求成功后,我们将返回的数据中的`username`赋值给组件的`username`属性,这样就可以在模板中使用`{{username}}`来显示当前用户的名称了。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> <el-row class="header"> <el-col :span="24"> 后台管理系统 注销 </el-col> </el-row> <el-row class="content"> <el-col :span="6" class="sidebar"> <el-menu :default-active="activeMenu" class="menu"> <el-menu-item index="1"> 首页 </el-menu-item> <el-menu-item index="/category"> 分类管理 <router-link to="/category"> <el-menu-item>分类管理</el-menu-item> </router-link> </el-menu-item> <el-menu-item index="3"> 系统设置 </el-menu-item> </el-menu> </el-col> <el-col :span="18" class="main"> <router-view ></router-view> </el-col> </el-row> <el-row class="footer"> <el-col :span="24"> 版权所有 © 2022 后台管理系统 </el-col> </el-row> </template>还是会跳到新页面
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)