Vue项目代码改进（五）—— 将侧边栏菜单改造为动态后，如何按需显示不同图标
将侧边栏菜单改造为动态后，目前侧边栏每项的小图标都相同
<el-aside class="aside" width="200px"><el-col :span="24"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="teal"text-color="#fff"active-text-color="#ffff33":unique-opened= true:router= true><el-submenu :index="item1.order.toString()" v-for="item1 in menus" :key="item1.id"><template><i class="el-icon-s-custom"></i><span>{{item1.authName}}</span></template><el-menu-item :index="item2.path" v-for="item2 in item1.children" :key="item2.id"><i class="el-icon-menu"></i><span>{{item2.authName}}</span></el-menu-item></el-submenu></el-menu></el-col>
</el-aside>
要实现如下效果，小图标 < i ></ i>的类名就不能写死
解决
将不同的icon的类名写进数组，v-for循环时一一渲染就好了。
data中，icon类名准备：
iconlist: ['el-icon-user', 'el-icon-s-tools', 'el-icon-s-goods', 'el-icon-s-order', 'el-icon-s-data']
<el-submenu :index="item1.order.toString()" v-for="(item1,i) in menus" :key="item1.id"><template slot="title"><i :class="iconlist[i]"></i><span>{{item1.authName}}</span></template>
</el-submenu>
修改后效果，搞掂
Vue项目代码改进（五）—— 将侧边栏菜单改造为动态后，如何按需显示不同图标相关推荐
- Vue项目代码改进（六）—— vue的mixins的使用
混入可以将不同组件的共同内容部分在一个混入对象中展示,然后通过在组件实例中混入这个对象,这样拥有这些属性的组件都可以调用 混入对象中的属性名跟组件中的属性名冲突时,以组件自身的为基准 举例:单文件组件 ...
- Vue项目代码改进（四）—— 在使用ElementUI时点击同一个路由，页面报错
这个不可描述的问题是:在使用ElementUI时点击同一个路由,页面报错. 错误代码如下: element-ui.common.js?ccbf:3339 NavigationDuplicated {_ ...
- Vue项目代码改进（三）—— Cookie、LocalStorage和SessionStorage的使用
存在问题: 如果在退出页面时,没有点击"退出"按钮,而是直接关闭页面,token并没有被清除,依然能通过访问http://localhost:8080/#/ 直接进入主页. 原因: ...
- Vue项目代码改进（二）—— element-UI的消息显示时间修改
Message 消息提示 Options duration 显示时间, 毫秒.设为 0 则不会自动关闭 - 默认值3000 全局重写 element 的message 消息提示,修改时间,在main. ...
- vue项目代码改进（一）login组件
Login登录组件 1. 新增登录头像(css样式回顾) 1)div.avatar 2)子绝父相定位,left-top- 3)border 4)placeholder 5)box-shadow box ...
- vue项目代码格式不统一怎么办？一招教你解决
vue项目代码风格统一 问题背景 方案分析 1.在package.json中增加prettier的依赖以及运行脚本 2.修改.eslintrc.js,去除所有vue-cli自动生成的规范,自定义插件及 ...
- 服务器上部署前端Vue项目代码
服务器上部署前端Vue项目代码 本人自己感觉部署前端代码比部署后端难,主要是我在部署的过程中遇到了各种报错
- vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法
vue项目实现从商品列表页跳转详情页后,返回列表页保持页面在原位置,且列表页刷新的方法 页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> ...
- 将Vue项目代码打包成桌面应用
参考 electron 官网 第一步: 安装Vue脚手架Vue CLI只能用最新版,建议在用官网最新命令行 npm install -g @vue/cli 第二步: 创建vue项目 vue creat ...
最新文章
- C语言随机字母生成,C++ 随机数字以及随机数字加字母生成的案例
- 关于微服务架构的思考
- 果园机器人能干什么_24* 果园机器人优秀教学实录
- 第十三周项目四-立体类族共有的抽象类
- Oracle的ONS创建,Oracle 10gR2 RAC Clusterware ONS服务的管理
- python读取大文件-python快速读取一个大文件内容(瞎猜)
- 冬季会增加某些疾病的发病风险吗？
- java 文件 迭代_C迭代文件和目录
- P1739 表达式括号匹配
- 物理数据模型(PDM)-概念数据模型 (CDM)-面向对象模型 (OOM):适用于已经设计好数据库表结构了。...
- C语言里最基础的关键字
- 2G的完整形式是什么？
- 用双边模式，让生意立刻火爆
- 分享一个debian系统优秀的镜像源
- [Noip2007]Core树网的核
- python中sort与sorted的区别_python排序函数sort()与sorted()的区别
- 2021年机修钳工（中级）及机修钳工（中级）复审模拟考试
- linux系统安装systemback,使用systemback制作Ubuntu自定义系统镜像和系统备份（抄）...
- delegation机制
- C语言snprintf函数
热门文章