后台管理左侧菜单栏图标设置

最新推荐文章于 2025-10-11 11:20:24 发布

原创最新推荐文章于 2025-10-11 11:20:24 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何通过修改菜单项模板的i标签类名，实现后台管理左侧菜单栏图标的设置。为了实现这一功能，需要引入第三方字体图标库，并在数据中创建iconsObj对象，根据菜单ID动态绑定图标类名。

通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置，我们需要在项目中使用第三方字体图标
在数据中添加一个iconsObj：

//template中：
<i :class="iconsObj[item.id]"></i>
 //js的data中定义
iconsObj: {
        '125':'iconfont icon-user',
        '103':'iconfont icon-tijikongjian',
        '101':'iconfont icon-shangpin',
        '102':'iconfont icon-danju',
        '145':'iconfont icon-baobiao'
      }