快速实现一个select带头像的功能

1、前言

本文已参与「新人创作礼」活动，一起开启掘金创作之路。在做后台管理系统或者ToB 业务的账号托管功能中，我们会经常遇到多个账号之间的切换，而多账号切换多数的展现形式又包含了头像、昵称以及账号用户画像比较典型的特征属性。从账号类型维度区分，包括企业号、个人号等；从权限角色维度划分，包括超级管理员、角色等（RBAC权限模型）；以及其他维度的提取。

2、实现效果

• 静态图
• 动态图

3、分析

1. 问题点

原生select 和 option是不支持img element 插入
所见即所得还是非所得？
自己实现or引入第三方库？

2. 实现思路

• 将UE图抽象成我们代码要实现的草图如下：

• 项目本身已经集成了Element UI ，上述草图和el-select 完全吻合，本着不重复造轮子，基于el-select 来快速实现。

4、数据层

const data = [  {    id: 'xxx',    nickname: '李团长',    avatar: 'http://***.png ',    eaccountRole: '个人号',  }];

5、展现层

<el-select>    
    <!-- prefix-->    
    <template slot="prefix" >        
        <img :src="selectNode.avatar" /> 
    </template>    
    <el-option
        v-for="item in data"        
        :key="item.id"        
        :label="item.label"    
     >        
         <div class="item-wrapper">            
             <img :src="item.avatar"/>            
             {{ item.nickname }}             
             {{ item.eaccountRole }}           
         </div>    
    </el-option> 
</el-select>