Element ui Avatar头像管理组件 实现当用户没有头像时 以名称最后一个字为头像

el-avatar是一个比较方便的头像管理组件

src控制他的图片展示

<el-avatar
	class = "avatar"
	:src="item.images"
></el-avatar>

样式的话 可以用avatar控制

<style>
.avatar{
      
      
     width: 18px;
    height: 18px;
    line-height: 18px;
}
.avatar img{
      
      
    border-radius: 50%;
    width: 18px;
    height: 18px;
    border:1px solid #eee;
}
</style>

因为上面 我们定义了 他的 class 为 avatar 然后我们通过这个类名 定义他的样式 和他下面图片 img的样式

当然 如果只是展示个图片 那完全没必要搞这个

他的得色在于 当你没有头像时

 <el-avatar
	class = "avatar"
	:src="item.images"
	v-if = "item.images"
></el-avatar>
<el-avatar
	class = "avatar"
	style="background:#21B1FF"
	v-else
>{
   
   {getNameLast(item.initiatorName)}}</el-avatar>

这里我们用v-if 判断 如果item.images有值 代表是有头像的 就直接用src
否则 代表item.images没有值 这个用户并没有头像

这样就直接传item.initiatorName名字 然后这个getNameLast函数 参考代码如下

const getNameLast = (str) => {
    
    
  // 如果有括号返回(前一个字
    if (str.indexOf('(') > -1 || str.indexOf('（') > -1) {
    
    
        const _str = str.split('(') || str.split('（');
        const newStr = _str[0].substring(_str[0].length - 1);
        return newStr;
    } else {
    
    
        return str.substring(str.length - 1)
    }
}

简单说 就是取传进来的值 的最后一个字

简单说 就是 拿不到头像 就把名字传进getNameLast 获取到名字的最后一个字用于展示
运行结果是这样的

可以看到 没有头像的 对应位置就会展示出 名字的最后一个字

其实这个组件自己做也比较简单 就是判断 如果src没传进来 展示下面的文本就好了 但element ui这有个现成的