效果圖：
一個單元格里面顯示三張圖片，并且點擊圖片可以放大。
1.將圖片v-for渲染出來，具體上代碼
<el-table-column label="發(fā)布圖片" 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>
<!-- 這個是實現(xiàn)點擊圖片放大功能的代碼-->
</span>
</template>
</el-table-column>注：el-popover的屬性?
?2.單元格里能夠展示多張圖片，需要在請求的接口里面做處理文章來源：http://www.zghlxwxcb.cn/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(',')//后端返回的是以，分隔的字符串，將其轉(zhuǎn)化成字符串數(shù)組。
}
this.postsList = response.rows;
this.loading = false;
});
},以上兩步，就可以實現(xiàn)上面的功能。文章來源地址http://www.zghlxwxcb.cn/news/detail-730139.html
到了這里，關(guān)于vue element ui el-table單元格里面顯示多張圖片點擊并放大的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
