效果图:
一个单元格里面显示三张图片,并且点击图片可以放大。
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.单元格里能够展示多张图片,需要在请求的接口里面做处理文章来源:https://www.toymoban.com/news/detail-730139.html
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;
});
},
以上两步,就可以实现上面的功能。文章来源地址https://www.toymoban.com/news/detail-730139.html
到了这里,关于vue element ui el-table单元格里面显示多张图片点击并放大的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!