菜单栏结构和数据是通过v-for循环实现的,但图表不能一致,解决办法如下:
采用第三方自定义图标库
1.在data中定义图表对象
data() {
return {
// 左侧菜单数据
menulist: [],
//前面125等key值是item.id,icondont是基类,
iconobj: {
125: "iconfont icon-user",
103: "iconfont icon-tijikongjian",
101: "iconfont icon-shangpin",
102: "iconfont icon-danju",
145: "iconfont icon-baobiao",
},
};
2.在菜单的图标区域,让图标类名自动生成
<!-- 图标 -->
<i :class="iconobj[item.id]"></i>