如何将获取到的数据图标循环渲染到对应的菜单栏上?

作者站长头像
站长
· 阅读数 10

UI:

<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
              <template slot="title">
                <i v-for="item in iconsObj" :class="item" :key="item.index"></i> 
                <span>{{ item.authName }}</span>
              </template>

data:

menuList: [],
iconsObj: ['el-icon-solid', 'el-icon-check', 'el-icon-s-shop', 'el-icon-s-order', 'el-icon-s-marketing'],

渲染出的效果:如何将获取到的数据图标循环渲染到对应的菜单栏上?

目标:图标依次渲染到对应的菜单栏,而不是全部渲染到每栏上。

回复
1个回答
avatar
test
2024-07-02
<el-submenu :index="item.id + ''" v-for="item, index in menuList" :key="item.id">
  <template slot="title">
    <i :class="iconsObj[index]"></i> 
    <span>{{ item.authName }}</span>
  </template>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容