效果图:

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

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;
      });
    },

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

Logo

前往低代码交流专区

更多推荐