当前位置: 首页 > news >正文

如何在element ui中el-select的选择项目中添加自定义图标

<el-select v-model="value" placeholder="请选择"><template slot="prefix"><div style="margin-top: 4px"><svg v-if="value == 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" version="1.1"><title>编组 7备份 15</title><g id="0430" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="创建策略" transform="translate(-316, -616)"><g id="编组-17备份-5" transform="translate(307, 610)"><g id="编组-7备份-15" transform="translate(9, 6)"><rect id="矩形" x="0" y="0" width="19.9895151" height="19.9895151"/><g id="编组-6" transform="translate(1.9948, 1.9948)"><circle id="椭圆形" fill="#50B48D" cx="8" cy="8" r="8"/><path d="M4,9.2673614 L4,4.46884666 L5.29503555,4.46884666 L5.295,7.97184666 L12,7.97232585 L12,9.2673614 L4,9.2673614 Z" id="形状结合" fill="#FFFFFF" transform="translate(8, 6.8681) rotate(-45) translate(-8, -6.8681)"/></g></g></g></g></g></svg>	 <svg v-if="value == 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" version="1.1"><title>编组 7备份 17</title><g id="0430" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="创建策略" transform="translate(-316, -686)"><g id="编组-17备份-7" transform="translate(307, 680)"><g id="编组-46备份" transform="translate(9, 6)"><g id="编组-7备份-17" transform="translate(0, 0)"><rect id="矩形" x="0" y="0" width="19.9895151" height="19.9895151"/><g id="编组-6" transform="translate(1.9948, 1.9948)"><circle id="椭圆形" fill="#D24343" cx="8" cy="8" r="8"/><path d="M8.73223414,4 L8.732,7.267 L12,7.26776586 L12,8.73223414 L8.732,8.732 L8.73223414,12 L7.26776586,12 L7.267,8.732 L4,8.73223414 L4,7.26776586 L7.267,7.267 L7.26776586,4 L8.73223414,4 Z" id="形状结合" fill="#FFFFFF" transform="translate(8, 8) rotate(45) translate(-8, -8)"/></g></g></g></g></g></g></svg>  </div></template><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"><template><div style="display:flex;align-items:center"><svg v-if="item.value == 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" version="1.1"><title>编组 7备份 15</title><g id="0430" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="创建策略" transform="translate(-316, -616)"><g id="编组-17备份-5" transform="translate(307, 610)"><g id="编组-7备份-15" transform="translate(9, 6)"><rect id="矩形" x="0" y="0" width="19.9895151" height="19.9895151"/><g id="编组-6" transform="translate(1.9948, 1.9948)"><circle id="椭圆形" fill="#50B48D" cx="8" cy="8" r="8"/><path d="M4,9.2673614 L4,4.46884666 L5.29503555,4.46884666 L5.295,7.97184666 L12,7.97232585 L12,9.2673614 L4,9.2673614 Z" id="形状结合" fill="#FFFFFF" transform="translate(8, 6.8681) rotate(-45) translate(-8, -6.8681)"/></g></g></g></g></g></svg>	 <svg v-if="item.value == 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" version="1.1"><title>编组 7备份 17</title><g id="0430" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="创建策略" transform="translate(-316, -686)"><g id="编组-17备份-7" transform="translate(307, 680)"><g id="编组-46备份" transform="translate(9, 6)"><g id="编组-7备份-17" transform="translate(0, 0)"><rect id="矩形" x="0" y="0" width="19.9895151" height="19.9895151"/><g id="编组-6" transform="translate(1.9948, 1.9948)"><circle id="椭圆形" fill="#D24343" cx="8" cy="8" r="8"/><path d="M8.73223414,4 L8.732,7.267 L12,7.26776586 L12,8.73223414 L8.732,8.732 L8.73223414,12 L7.26776586,12 L7.267,8.732 L4,8.73223414 L4,7.26776586 L7.267,7.267 L7.26776586,4 L8.73223414,4 Z" id="形状结合" fill="#FFFFFF" transform="translate(8, 8) rotate(45) translate(-8, -8)"/></g></g></g></g></g></g></svg>  <div>{{item.label}}</div></div></template></el-option></el-select>options: [{value: '1',label: '允许'}, {value: '2',label: '拒绝'}],value: '1'

在这里插入图片描述

在这里插入图片描述

相关文章:

  • ABC 353
  • 建立java项目
  • 【电商接口】如何通过小红书订单API实现高效电商数据管理?
  • MQTT报文介绍
  • 怎么把cursor(Cursor/ollama)安装到指定路径
  • Python图像处理全攻略:从基础到前沿技术深度剖析
  • Java 中 LRU 缓存机制详解与实践​
  • Linux操作系统:信号
  • 【Spring Boot】配置实战指南:Properties与YML的深度对比与最佳实践
  • C语言---内存函数
  • 【亲测有效】Ubuntu22.04安装黑屏重启进入系统卡死
  • AI赋能R-Meta分析核心技术:从热点挖掘到高级模型
  • openlayer:07点击实现切换图层之addLayer
  • 【leetcode】70. 爬楼梯
  • Java 参数值传递机制
  • 采用线性优化改进评估配电网的灵活性范围
  • docker-compose使用详解
  • Unity中SRP Batcher使用整理
  • BeamDojo: Learning Agile Humanoid Locomotion on Sparse Footholds
  • 【深度估计 Depth Estimation】数据集介绍
  • 杭州设计企业网站高端公司/兰州搜索引擎优化
  • 免费 网站源码/免费二级域名注册申请
  • 诸暨哪些公司可以制作网站/优化设计