一、在项目中引入阿里云icon图标

进入：阿里图标官网
随便选择一个图标库
选择自己想要的图标（可以搜索）

4. 添加到购物车

5. 进入购物车，下载代码

6. 下载解压后只留以下五个文件，其他的都删了

7. 把上边五个文件拷贝到项目中src的assets文件下

8. 在main.js里面引入iconfont.css

9. 在iconfont.css中修改图标名字、大小和颜色

二、在data中定义icon图标列表

三、在下拉框中显示icon图标

<el-form-item label="触发图标" required><el-select clearable v-model="addruleform.icon" placeholder="请选择触发图标"><el-option v-for="item in iconList" :key="item.value" :value="item.value"><i :class="item.label"></i></el-option></el-select><span><i :class="this.addruleform.icon"></i></span>
</el-form-item>

效果：

四、在列表中显示icon图标

从数据库查询图标列表显示，数据库存的icon：

<el-table-column label="规则图标"><template slot-scope="scope"><i :class="scope.row.icon"></i></template>
</el-table-column>

效果：

五、在el-cascader中显示icon图标

<el-form-item><el-form-item label="设备组" prop="topList"><el-cascadersize="mini"placeholder="关键字搜索"style="width:250px"clearablefilterable:options="macGroupList"v-model="newMacForm.macGroupSysNoList":props="defaultPropsType"><template slot-scope="{ node, data }"><span><iv-if="data.type == 1"style="color: #348fe2"class="el-icon-menu"/><iv-else-if="data.type == 2"style="color: #348fe2"class="el-icon-s-unfold"/><iv-else-if="data.type == 3"style="color: #348fe2"class="el-icon-s-platform"/></span><span>{{ data.macGroupName}}</span></template>
</el-cascader>
</el-form-item>

vue在列表和下拉框中显示icon图标相关推荐

layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
layui修改框中等下拉框取值问题_layui下拉框不显示的问题
1.先检查有没有引入layui.js 2.然后看有没有被包住, 3.查看是否有以下代码 layui.use('form', function(){ var form = layui.form; }) ...
Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> < ...
两个下拉框相关联ajax,触发第二个下拉框以显示基于从第一个下拉框中选择的值的值ajax...
我有两个引导程序下拉框.当我们点击另一个下拉菜单时,其中一个会根据用户选择的国家显示来自数据库的所有国家名称,另一个下拉菜单应该选择状态. 当我点击一个下拉菜单时,我做了一个ajax请求来显示国家名称 ...
JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明获取select下拉框中的第一个值 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DT ...
获取数据库内容放入下拉框中
获取数据库里的数据放入下拉框中,使下拉框显示的内容是数据库里的内容功能分析: 设计并实现数据库插入相关数据在登陆页面点击注册按钮时跳到Servlet中在Servlet中连接数据库查询内容放入 ...
avue下拉框中属性可以显示，但不能选中
1.avue下拉框中属性可以显示,但不能选中追其原因,我对表单分组了,下拉框放在了group组内的column组里面,导致层数过多,产生死循环的bug 2.解决方法: 取消分组,把所有的属性放到co ...
抖音下拉框中的下拉词是怎么出来的？
疑问:抖音下拉框中的下拉词是怎么出来的? 抖音下拉词展示设想抖音下拉设想验证抖音下拉词出现思路总结抖音下拉词展示设想昔年认为,抖音下拉词框中的下拉词出现与否,是根据关注热度去生成的,如果某一个 ...
【解决方案】win7计算机屏保的下拉框中，无照片选项，不能设置自定义图片
手动增加计算机屏保问题描述解决方案问题描述发现在有的计算机中,想设置自定义的屏保照片时,在屏保下拉框中没有"照片的选项",导致无法选择本地照片作为屏保程序.即缺少如下标红选 ...

vue在列表和下拉框中显示icon图标

vue在列表和下拉框中显示icon图标

一、在项目中引入阿里云icon图标

二、在data中定义icon图标列表

三、在下拉框中显示icon图标

四、在列表中显示icon图标

五、在el-cascader中显示icon图标

vue在列表和下拉框中显示icon图标相关推荐

最新文章

热门文章

vue在列表和下拉框中显示icon图标

vue在列表和下拉框中显示icon图标

一、 在项目中引入阿里云icon图标

二、 在data中定义icon图标列表

三、 在下拉框中显示icon图标

四、 在列表中显示icon图标

五、 在el-cascader中显示icon图标

vue在列表和下拉框中显示icon图标相关推荐

最新文章

热门文章

一、在项目中引入阿里云icon图标

二、在data中定义icon图标列表

三、在下拉框中显示icon图标

四、在列表中显示icon图标

五、在el-cascader中显示icon图标