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

阿wei程序媛

已于 2022-10-25 14:38:52 修改

阅读量4.9k

点赞数 4

分类专栏： Element UI 文章标签： vue.js javascript elementui

于 2022-10-13 14:10:56 首次发布

本文链接：https://blog.csdn.net/m0_58565372/article/details/127299652

版权

Element UI 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在表格单元格中展示多张图片，并通过Element UI的Popover组件实现点击图片进行放大的功能。具体步骤包括使用v-for循环渲染图片以及对接口返回的数据进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

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

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

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