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-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

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

css



PC端数据列表有头像显示头像,没有头像显示名字的第一个字_第1张图片
地址:https://element.eleme.cn/#/zh-CN/component/avatar
PC端数据列表有头像显示头像,没有头像显示名字的第一个字_第2张图片

你可能感兴趣的:(前端,javascript)