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>

在这里插入图片描述

修改后效果，搞掂 😃

附：router.js

/** @Author: your name* @Date: 2019-11-06 22:41:40* @LastEditTime: 2019-12-01 17:14:16* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \Vue.jsc:\编程\vuepro\mymall\src\router\index.js*/
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login/login.vue'
import Home from '@/components/home/home.vue'
import Users from '@/components/users/users.vue'
import Right from '@/components/rights/right.vue'
import Role from '@/components/rights/role.vue'
import GoodsList from '@/components/goods/goodslist.vue'
import GoodsAdd from '@/components/goods/goodsadd.vue'
import Cateparams from '@/components/goods/cateparams.vue'
import Goodscate from '@/components/goods/goodscate.vue'
import Order from '@/components/order/order.vue'
import Report from '@/components/report/report.vue'
import { Message } from 'element-ui'
Vue.use(Router)const router = new Router({routes: [{ name: 'login',path: '/login',component: Login},{ name: 'home',path: '/',component: Home,children: [{name: 'users',path: 'users',component: Users},{ name: 'right',path: 'rights',component: Right},{ name: 'role',path: 'roles',component: Role},{ name: 'goodslists',path: 'goods',component: GoodsList},{ name: 'goodsadd',path: 'goodsadd',component: GoodsAdd},{ name: 'params',path: 'params',component: Cateparams},{ name: 'categories',path: 'categories',component: Goodscate},{ name: 'order',path: 'orders',component: Order},{ name: 'report',path: 'reports',component: Report}]}]
})
router.beforeEach((to, from, next) => {// ...if (to.path === '/login') {next()} else {const token = localStorage.getItem('token')if (!token) {router.push({name: 'login'})Message.warning('请登录')return}next()}
})
export default router