PC端数据列表有头像显示头像,没有头像显示名字的第一个字

PC端数据列表有头像显示头像,没有头像显示名字的第一个字
.charAt(0) 是 JavaScript 字符串对象的方法,用于获取字符串的第一个字符。
字符串中的字符位置是从 0 开始的,所以.charAt(0) 就表示获取字符串的第一个字符。

<el-table ref="multipleTable" :data="tableData" style="width: 100%"><el-table-column prop="staffPhoto" align="center" label="头像"><template v-slot="{ row }"><el-avatarv-if="row.staffPhoto":src="row.staffPhoto":size="30"/><span v-else class="username">{{ row.username.charAt(0) }}</span></template></el-table-column></el-table>

js

   tableData: [],async employeeList() {const { rows } = await employeeList(this.queryParams);console.log(rows);this.tableData = rows;},

css


<style lang="scss">.username {height: 30px;width: 30px;line-height: 30px;text-align: center;border-radius: 50%;color: #fff;background: #04c9be;font-size: 12px;display: inline-block;}
</style>

在这里插入图片描述
地址:https://element.eleme.cn/#/zh-CN/component/avatar
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/182073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

哈希思想应用【C++】(位图,布隆过滤器,海量数据处理面试题)

目录 一&#xff0c;位图 1. 位图概念 2.实现 3. 测试题 位图的优缺点 二&#xff0c;布隆过滤器 1). 布隆过滤器提出 2). 概念 3). 布隆过滤器的查找 4). 布隆过滤器删除(了解) 5). 布隆过滤器优点 6). 布隆过滤器缺陷 三&#xff0c;海量数据面试题 1&#xff…

java开发必备的Tomcat-servlet-http和spring boot基础入门

tomcat 介绍 概念&#xff1a; Tomcat是一个开源免费的轻量级Web服务器&#xff0c;是Apache软件基金会的核心项目&#xff0c;支持Servlet/JSP少量JavaEE(JakartaEE)规范。 JavaEE&#xff1a;Java Enterprise Edition&#xff0c;Java企业版。指Java企业级开发的技术规范总和…

Arduino驱动DHT20温湿度传感器(温湿度传感器)

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 DHT20温湿度传感器是DHT11的全新升级版。 DHT20采用全新的ASIC专用芯片、改进的MEMS半导体电容式湿度传感器元件和标准片上温度元件。所有传感器均经过工厂校准,具有低功耗、高精度和稳定性、响应…

Testlink 1.9.20+phpstudy_pro安装遇到的问题

phpstudy_pro启动了Apache2.4.39和Mysql5.7.26,php的版本是7.3.4zai。 安装Testlink 1.9.19时没有数据库的问题&#xff0c;安装Testlink 1.9.20时遇到了数据库问题&#xff0c;如下图所示&#xff1a; 网上搜索“Failed!Mysql Database cannnot be used”&#xff0c;给出的…

【笔记+代码】JDK动态代理理解

代码地址 https://github.com/cmdch2017/JDKproxy.git/ 我的理解 我的理解是本身service-serviceImpl结构&#xff0c;新增一个代理对象proxy&#xff0c;代理对象去直接访问serviceImpl&#xff0c;在proxy进行事务的增强操作&#xff0c;所以代理对象实现了接口。如何实现…

STM32开发学习(地址映射)

LED灯代码&#xff1a; #define PERIPH_BASE ((unsigned int)0x40000000)#define AHB1PERIPH_BASE (PERIPH_BASE 0x00020000)#define GPIOF_BASE (AHB1PERIPH_BASE 0x1400)#define GPIOF_MODER *(unsigned int*)(GPIOF_BASE0x00) #define GPIOF_BSRR *(uns…

如何批量群发邮件

批量群发邮件的方法有多种&#xff0c;以下列举几种常见的方式&#xff1a; 使用专业的邮件营销平台&#xff1a;通过专业的邮件营销平台&#xff0c;如一米软件、米贸搜等&#xff0c;可以一次性向多个收件人发送邮件。这些平台通常具有强大的邮件发送和管理功能&#xff0c;…

Linux下Docker 离线安装详细步骤,亲测成功

1.离线原因&#xff1a;公司新创不能使用开元linux&#xff0c;使用了一个变种centOS&#xff0c;致使yum被禁 2.步骤&#xff1a; 2.1 下载docker tar包&#xff0c;下载地址&#xff1a;Index of linux/https://download.docker.com/linux/ 2.2 新建自己的软件目录&am…

大数据之HBase

HBase介绍 Apache的三篇论文&#xff0c;GFS谷歌文件系统->HDFS&#xff1b;MR -> MR ; BigTable ->HBase;HBase是hadoop数据库&#xff0c;一种分布式、可扩展的大数据NoSQL数据库之一。适合对于大量数据进行随机、实时的读写操作 HBase数据模型 Bigtable是一个稀…

It was migrated from homebrew/core to homebrew/cask.

给mac配置安卓环境时报错&#xff1a; brew install android-platform-tools Warning: No available formula with the name "android-platform-tools". > Searching for similarly named formulae... Error: No similarly named formulae found. It was migrate…

时区处理综述(java技术栈)

文章目录 一、jdbc协议对时间的序列化(不含时区信息)数据库的两个时间类型中国数据库使用的CST时区无法被java正确识别jdbc协议跨时区传输方案 二、数字时间戳(可跨时区传输)定义用途 三、ISO8601(可跨时区传输)java的序列化方法js的序列化方法 四、解析时间字符串(不含时区信息…

【C 语言经典100例】C 练习实例6

题目&#xff1a;用*号输出字母C的图案。 程序分析&#xff1a;可先用’*号在纸上写出字母C&#xff0c;再分行输出。 程序源代码&#xff1a; #include "stdio.h" int main() {printf("用 * 号输出字母 C!\n");printf(" ****\n");printf(&quo…

【傻瓜级JS-DLL-WINCC-PLC交互】8.DLL读写WINCC连接的PLC数据

思路 JS-DLL-WINCC-PLC之间进行交互&#xff0c;思路&#xff0c;先用Visual Studio创建一个C#的DLL控件&#xff0c;然后这个控件里面嵌入浏览器组件&#xff0c;实现JS与DLL通信&#xff0c;然后DLL放入到WINCC里面的图形编辑器中&#xff0c;实现DLL与WINCC的通信。然后PLC与…

Vue实现可拖拽边界布局

Vue实现可拖拽边界布局 在前端开发中&#xff0c;有时需要实现一种可拖拽边界的布局&#xff0c;通过拖动分隔线来调整不同区域大小。例如&#xff0c;下图是一个典型的可拖拽边界布局&#xff0c;它由左右两个区域组成&#xff0c;左边是一个树形菜单&#xff0c;右边是一个上…

expect自动化交互

目录 1. expect作用&#xff1a; 2. expect语言用法&#xff1a; 3. 实例 1. expect作用&#xff1a; 是建立在tcl语言基础上的一个工具&#xff0c;常被用于进行自动化控制和测试&#xff0c;解决shell脚本中交互的相关问题。 2. expect语言用法&#xff1a; spawn开启免…

Spark_spark参数配置优先级

总结 &#xff1a; 优先级低-》优先级高 spark-submit 提交的优先级 < scala/java代码中的配置参数 < spark SQL hint spark submit 中提交参数 #!/usr/bin/env bashsource /home/work/batch_job/product/common/common.sh spark_version"/home/work/opt/spark&q…

Linux线程池

线程池 C版本 C版本 threadpool.h #include <pthread.h>#ifndef _THREADPOOL_H #define _THREADPOOL_Htypedef struct ThreadPool ThreadPool; // 创建线程池并初始化 ThreadPool *threadPoolCreate(int min, int max, int queueSize);// 销毁线程池 int threadPoolDest…

利用VHDL实现一定系数范围内的信号分频电路

实验要求&#xff1a; 采用 3 个开关以二进制形式设定分频系数&#xff08;0-7&#xff09;&#xff0c;实现对已知信号的分频。 实现代码&#xff08;VHDL&#xff09;&#xff1a; library ieee ; use ieee.std_logic_1164.all ; use ieee.numeric_std.all ; use ieee.std_…

ANN人工神经网络:从基础认知到现实理解

什么是神经网络&#xff1f; 神经网络的再认知 前面我们了解过&#xff0c;人工神经网络&#xff08;Artificial Neural Network&#xff0c;ANN&#xff09;是人类为了模仿人大脑的神经网络结构创建出来的一种计算机系统结构。但如果仔细深入到神经网络当中&#xff0c;会慢…

排序算法基本原理及实现1

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 &#x1f4d1;插入排序 &#x1f4…