vue---table中姓名列显示头像和姓名

1、需求描述：

table中员工姓名列只显示姓名

希望table中员工姓名列前加上一个图片，图片内容为姓名后两个字，则姓名列显示头像和姓名

       

2、思路：

• 利用【<template slot-scope="scope"> ...</template>】，将显示数据拆分为两块显示，即下面代码中两个【 <span>...</span>】
• 这里姓名假设为只有两个字和三个字的姓名，如果姓名第三位有字，则显示后两位；如果为两个字的姓名，则全部显示，使用【  <span v-if="scope.row.name[2]">... </span>】做判断。

3、代码：

<el-table :data="employeesData" style="width:100%;height:100%;" :header-cell-style={background:'#fff'}" align="center">
       <el-table-column align="left" prop="name" label="员工姓名">
                  <template slot-scope="scope">
                    <span v-if="scope.row.name[2]">
                      <el-button
                        class="name-btn"
                        type="primary"
                      >{{ scope.row.name[1] }}{{ scope.row.name[2] }}</el-button>
                    </span>
                    <span v-else>
                      <el-button
                        class="name-btn"
                        type="primary"
                      >{{ scope.row.name[0] }}{{ scope.row.name[1] }}</el-button>
                    </span>
                    <span>{{ scope.row.name }}</span>
                  </template>
         </el-table-column>
         <el-table-column align="left" prop="mobile" label="手机号码"></el-table-column>
         <el-table-column align="left" prop="department" label="所属部门"></el-table-column>
                
      </el-table>

数据如下：

data() {
    return {
      employeesData: [
        {
          name: "王小明",
          mobile: "13900008789",
          department: "研发中心",
        },
        {
          name: "陈霞",
          mobile: "13900008789",
          department: "研发中心",
        }
      ] 
    }
  }