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

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

.charAt(0) 是 JavaScript 字符串对象的方法,用于获取字符串的第一个字符。

字符串中的字符位置是从 0 开始的,所以.charAt(0) 就表示获取字符串的第一个字符。

html 复制代码
<el-table ref="multipleTable" :data="tableData" style="width: 100%">
	<el-table-column prop="staffPhoto" align="center" label="头像">
	    <template v-slot="{ row }">
	      <el-avatar
	        v-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

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

css

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

相关推荐
开开心心就好23 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享24 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js