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

相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜052 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~3 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo5 小时前
ES6笔记2
开发语言·前端·javascript
yanlele5 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子6 小时前
React状态管理最佳实践
前端
烛阴7 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子7 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端