vue+elmentui在table上回显图片

1.单张

<el-table-column label="签名">
          <template slot-scope="scope">
            <img :src="scope.row.signNameUrl" width="80" height="80" class="head_pic"/>
          template>
el-table-column>

2.多张

<el-table-column prop="pictures" label="描述图片">
　　<template scope="scope">
　　　　<img v-for="item in scope.row.pictures" :src="item" width="40" height="40" class="head_pic"/>
　　template>
el-table-column>

 3.点击图片预览

     <el-table-column prop="remarks" label="走访记录及问题反馈">
          <template slot-scope="scope">
            <el-image style="width: 50px;height: 50px;margin:0px 1px" :key="index"
                      v-for="(item,index) in scope.row.fileList"
                      :src="item.fileUrl" @click="previewImg(item.fileUrl)">
            el-image>
          template>
        el-table-column>

export default {

  data() {
    return {
      imageUrl: '',
      imgVisible: false,
    }
  },
 methods: {
    previewImg(url) {
      this.imageUrl = url
      this.imgVisible = true
    },
  }
}