將側邊欄菜單改造為動態后，目前側邊欄每項的小圖標都相同

<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

總結

以上是生活随笔為你收集整理的Vue项目代码改进（五）—— 将侧边栏菜单改造为动态后，如何按需显示不同图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。