vue element ui el-table单元格里面显示多张图片点击并放大

效果图：

一个单元格里面显示三张图片，并且点击图片可以放大。

1.将图片v-for渲染出来，具体上代码

 <el-table-column label="发布图片" align="center" prop="postImages" width="400px">
        <template slot-scope="scope" >
          <span v-for="(item2,index2) in scope.row.postImages" >
            <el-popover
              placement="right"
              width="400"
              trigger="click">
               <img  :src="item2" width="400px" height="400px" >
            <img  slot="reference" :src="item2" width="100px" height="100px" >
          </el-popover>
       <!--    这个是实现点击图片放大功能的代码-->
          </span>
        </template>
</el-table-column>

注：el-popover的属性 

 2.单元格里能够展示多张图片，需要在请求的接口里面做处理

getList() {
      this.loading = true;
      listPosts(this.queryParams).then(response => {
        this.total = response.total;
        for(let index in response.rows){
          response.rows[index].postImages=response.rows[index].postImages.split(',')//后端返回的是以，分隔的字符串，将其转化成字符串数组。
        }
        this.postsList = response.rows;
        this.loading = false;
      });
    },

以上两步，就可以实现上面的功能。