如何在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-option
      v-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'

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值