显示头像-elementUI--table

员工列表-在员工列表中显示头像

---

目标

在表格中显示员工头像

思路

通过自定义列，将图片显示在表格中

操作

1. 在 src\views\employees\index.vue 中的 table 上补充一列

<el-table-columnlabel="头像"width="120">
  <templateslot-scope="scope">
    <imgclass="staffPhoto":src="scope.row.staffPhoto">
  </template>
</el-table-column>

2. 样式调整

<stylelang="scss"scoped>
.staffPhoto {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>

3. 此时可能部分图片无法正常显示（原因是图片本身地址有误，或者就是没有设置图片）

小结

1. 为什么有的图片没有了?

答案

• 此时可能部分图片无法正常显示（原因是图片本身地址有误，或者就是没有设置图片）

通用封装-封装全局图片组件

---

目标

封装全局图片组件，实现两个效果：

1. 没有src属性时，有一个默认图片

2. 统一样式

分析

1. 首先需要封装图片组件，然后进行全局注册

• 使用 Element 提供的 Image 图片

2. 在业务组件使用封装的组件

• 组件使用者如果传递了图片，使用传递的图片

• 如果没有传递图片，使用默认图片

实现

1. 新建组件 src\components\ImageHolder\index.vue

==把素材里的img文件夹, 放到src\components\ImageHolder下面==

<template>
  <!-- el-image组件 ：https://element.eleme.io/#/zh-CN/component/image -->
  <el-image:src="src"class="img-container">
    <!-- error插槽：设置如果出错，要显示的内容 -->
    <template#error>
      <!-- 静态资源就近维护：把head.jpg这张图放在这个组件的目录下 -->
      <imgsrc="./img/head.jpg"alt="">
    </template>
  </el-image>
</template>
​
<script>
exportdefault {
  // 定义如何从父组件中接收数据
  props: {
    src: {
      type: String,
      default: ''
    }
  }
}
</script>
​
<stylescopedlang="scss">
.img-container {
  border-radius: 50%;
​
  img {
    width: 100%;
  }
}
</style>

​

2. 全局注册组件

​

importImageHolderfrom'./ImageHolder'
​
exportdefault {
  install(Vue) {
    // 将图片组件挂载为全局组件
    Vue.component('ImageHolder', ImageHolder)
  }
}

​

3. 在业务组件中封装组件

<el-table-columnlabel="头像"width="120">
    <templateslot-scope="scope">
        <image-holderclass="staffPhoto":src="scope.row.staffPhoto"/>
    </template>
</el-table-column>

小结

1. 我们为什么要封装图片组件

答案

• 可以统一设置, 然后统一使用