【vue+element-ui】为v-for渲染出来的每一项添加各自的图标样式

最新推荐文章于 2024-07-31 19:52:19 发布

qq_41800649

最新推荐文章于 2024-07-31 19:52:19 发布

阅读量2.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41800649/article/details/106506949

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

在data中添加一个对象menu，用于存储id与class类名的对应关系

 menuIcon: {
        125: "iconfont icon-yonghuguanli",
        103: "iconfont icon-quanxianguanli",
        101: "iconfont icon-shangpinguanli",
        102: "iconfont icon-dingdanguanli",
        145: "iconfont icon-shujutongji",
      },

在v-for循环出来的每一项上通过:class="menuIcon[item.id]"应用相应的class

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_41800649

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue+element-ui实现表格编辑的三种实现方式

10-17

在使用Vue.js框架结合Element UI组件库开发Web应用时，表格编辑功能的实现是经常遇到的需求之一。本文介绍了使用vue与element-ui实现表格编辑的三种不同方式，具体包括表格内部显示和编辑切换、通过弹出另外的表格...

element-ui的navMenu使用v-for循环渲染不同子标签(el-menu-item和el-submenu)

最新发布

weixin_55049839的博客

07-31

307

官网找到icon图标使用说明，并安装。2. 把需要用到的图标正确导入。4.在template使用。

Vue3动态引入Element-plus icon图标

a1071626267的博客

12-14

2775

Vue3动态引入Element-plus icon图标

vue3.0项目实战系列文章 - 菜单的实现及icon组件封装

BMG-Princess

08-15

2999

vue3.0项目实战系列文章 - 菜单的实现及组件封装图标是动态变化的，需要二次封装组件实现写法与vue2有所区别

vue+elementui v-for 循环卡片列表

lrbtony的博客

01-08

8862

for循环实现循环卡片样式

基于python3+vue+Element-ui开发的CMDB 资产管理系统

12-17

【基于Python3+Vue+Element-UI开发的CMDB资产管理系统详解】 CMDB（Configuration Management Database，配置管理数据库）是IT服务管理中的重要组成部分，它主要用于记录和管理组织内部的各种IT资源及其相互关系。...

vue+Element-UI 前端框架

02-15

在“vue+Element-UI”这个项目中，Vue.js 被用来作为基础框架，Element-UI 则是基于 Vue 的一套成熟的UI组件库，提供了丰富的界面元素和交互设计，使得开发者可以快速搭建企业级的后台管理系统。 1. **Vue.js**：...

vue + typescript + element-ui 支持 markdown 渲染的博客前台展示-Vue.js开发

05-27

此项目是基于 Vue 全家桶 + TypeScript + Element-UI 技术栈的简洁时尚博客网站。简介此项目是基于 Vue 全家桶 + TypeScript + Element-UI 技术栈的简洁时尚博客网站。项目详情请猛戳该文章： Vue + TypeScript +...

vue+element-ui动态生成多级表头的方法

10-18

`el-table-column`组件用于渲染表头，`v-for`循环遍历每一级的表头，并通过`:label`、`:prop`等属性设置表头的显示文本和数据绑定。 `tabledata01`是表格的数据源，用于填充表格的实际内容。`:span-method`属性可能...

elementUI使用v-for创建无限级导航栏—— 递归组件

qq_30351747的博客

05-04

3487

elementUI使用v-for创建无限级导航栏—— 递归组件直接copy，不需要墨迹说明：根据返回的数据动态循环渲染菜单，是否具有子级目录递归创建所有目录并具有复用性，动态绑定相关属性；解决步骤： 1、使用element组件（具体步骤不在赘述） 2、先创建公共组件（1）在第一级菜单循环过程中，如判断出当前菜单存在着子级菜单，渲染出当前菜单，并将当前菜单的子级属性（例如：child：[数组]），利用子组件传参的方式，传给我们现在正在封装的组件（俗称：无限套娃）。递归组件封装 MenuTree.v

vue中对v-for循环出的新节点动态添加class

lijincheng77266的博客

10-08

1万+

不废话直接上代码(仅展示一个例子具体使用视情况而定) 上图是页面结构，第四行为三元运算符，将item.id==3作为判断条件，为true则设置class1的样式，否则设置class2的样式。上图是数据上图是样式以下是效果图 ...

vue v html el menu,vue下element如果实现菜单el-menu多级循环

weixin_39802784的博客

06-25

1408

在一个v-for循环里面显示不同的图标

m0_51933554的博客

10-21

735

在一个v-for循环里面给不同的item加上不同的图标

vue+ivew中使用自定义图标

nanrochelle的博客

06-07

515

vue+ivew中使用自定义图标

添加阿里巴巴矢量图标

Dream

11-19

632

增加阿里巴巴矢量图修改前缀上述图中重点就是前缀以及Font Family 下载关键文件 iconfont.css @font-face {font-family: "scmFontFamily"; src: url('iconfont.eot?t=1574155673020'); /* IE9 */ src: url('iconfont.eot?t=15741556730...

v-for如何循环iconfont图标

YodgeGGG的博客

11-25

2866

v-for如何循环iconfont图标先上个效果图关于iconfont如何添加至项目大家可以自行搜索下，很简单，通常我们引用iconfont图标的方式是复制代码然后直接引用，但是在v-for循环的数据中，直接写入循环出的内容就是一堆字符串，那么怎么解决呢，大家打开iconfont.css看下 .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-fon

vue获取循环列表并添加图片

Fang格子的博客

04-03

5151

因为我要实现的是选中之后，获取列表里面之前客户填入的资料信息这个信息是根据id获取显示的，所以我将单选时获取资料id 因为要把资料id的name显示出来所以我通过调详情的接口将对应的资料name获取到添加定义的数组materialDetail内并在方法后设置清空，不然用户单选后再换的话就会累积添加。最后再通过表格显示出来但同时要能添加图片，所以我加了一个item.url，这样才能与数据...