【Vue element-admin 如何给侧边栏添加 Badge 计数标记 】
一、需求功能
需求说明：给 element-admin 的侧边菜单栏或及子菜单栏添加计数标记 el-badge
- 需求视图如下：
二、实现思路
- 结合 icon 图标渲染的思路，通过在layout 的 item.vue 中使用 vnodes.push 方法实现对
<el-badge />的渲染。- 在通过 Vuex 的状态管理将菜单栏需要的数据转递过来
- 过滤不需要的菜单栏
- layout目录结构
三、 具体实现步骤
1.渲染 <el-badge /> ：src\layout\components\Sidebar\Item.vue
<script>
export default {props: {icon: {type: String,default: ''},title: {type: String,default: ''}},render(h, context) {const { icon, title } = context.propsconst vnodes = []// icon图标if (icon) {```过滤```vnodes.push(<svg-icon icon-class={icon} />)}// 侧边菜单栏标题if (title) {vnodes.push(<span slot='title'>{(title)}</span>)}return vnodes}
}
</script>
2.状态管理 Store 参数获取
- Store – commit
通过 element-admin 的 permission.js 权限文件实现参数的 commit （根据自己项目的具体菜单权限，灵活变通）
···
// 找到项目的 menu 权限、在逻辑中添加接口请求、并提交给store// 我的申请
const { applyData} = await request({ url, data})
store.commit('SET_MYAPPLYTOTAL', applyData.length)// 我的审核
const { approveData} = await request({ url, data})
store.commit('SET_AUDIOTOTAL', approveData.length)···
- Store – mutations
接收commit 参数，并给定义的 state 参数赋值
const state = {audioTotal: 0, // 审核myApplyTotal: 0// 申请
}const mutations = {SET_AUDIOTOTAL(state, data) {state.audioTotal = data},SET_MYAPPLYTOTAL(state, data) {state.myApplyTotal = data}
}
3.在渲染文件item.vue 中使用 store 参数
<script>
import store from '@/store'
export default {name: 'MenuItem',functional: true,props: {icon: {type: String,default: ''},title: {type: String,default: ''}},render(h, context) {const { icon, title } = context.propsconst vnodes = []if (title) {if (title === '我的审核') {vnodes.push(<span slot='title'>{title}<el-badge value={store.state.user.audioTotal} /></span>)}```其他菜单过滤同理```else {vnodes.push(<span slot='title'>{title}</span>)}}return vnodes}
}
</script>结语
初心：希望我的方案能给你一点思路
期盼：如果你有更好的解决方法，期盼你能分享到评论区
【Vue element-admin 如何给侧边栏添加 Badge 计数标记 】相关推荐
- Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
- vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
- vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
- Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...
- 后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后 点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
- Vue Element Admin 用mock模块模拟数据
步骤简单 一 在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
- vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
- vue element 实现table的自动添加列
前提 由于每个同学的考试的科目可能不一样,但是老师统计的时候需要获取到每个同学的科目分数.结果如下 后端返回的数据格式如下 [{"id":1,"sid":&qu ...
- Vue + Element UI——侧边栏LOGO设计DEMO
GitHub https://github.com/PanJiaChen/vue-element-admin DEMO https://panjiachen.github.io/vue-element ...
最新文章
- 迁移学习简介（transfer learning）
- minimum-depth-of-binary-tree (搜索)
- 评估模型如何建立_建立和评估分类ML模型
- C#:解决WCF中服务引用 自动生成代码不全的问题。
- PMP项目管理认证体系
- SQL server2008 安装教程
- 关于IP转换器无法正常启动的问题
- CentOs7中安装python模块psycopg2，报错Error: pg_config executable not found.
- 路由器重温——BGP路由-1
- 5月语言排行榜：R 跌出前二十，Python 紧咬 C++
- Unity-黑暗之魂复刻-翻滚、后跳功能
- cv2.warpAffine 参数详解
- elasticsearch的.security-7索引崩溃恢复笔记
- c语言菜单 键盘,三、Windows键盘快捷键—启用菜单项
- Android Instant App 介绍
- 巨控PLC远程下载调试最新方案
- 昆明话呢四级考试试题
- linux 时区设置 美国西部,Linux下修改系统时区
- SQL Server 2012 修改数据库属性
- TCPUDP相关介绍