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

相关推荐
lecepin10 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试
RestCloud10 小时前
PostgreSQL大表同步优化:如何避免网络和内存瓶颈?
前端·数据库·api
RestCloud10 小时前
iPaaS 与传统 ESB 的区别,企业该如何选择?
前端·架构
Mapmost10 小时前
三维场景加载卡顿?可能是显卡设置出了问题
前端
书源10 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
前端啵啵猪10 小时前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
星哥说事10 小时前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家11 小时前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在11 小时前
你没有听说过的7个Windows开发必备工具
前端·windows·后端