对于表格内的数据,需要对应数据进行图片放大的效果,做一个记录
先看看效果
点击图片缩略图后
html
用插槽插入图片
<el-table-column align="center" prop="img" label="图片">
<template slot-scope="scope">
<img style="cursor:pointer;vertical-align:middle" width="50" height="50" src="@/assets/images/suoluetu.png" alt="" @click="handleEnlargeImg(scope.row)">
</template>
</el-table-column>
用dialog放大图片做一个轮播图样式
<el-dialog :visible.sync="imgVisible" title="轮播图">
<el-row type="flex" justify="center">
<el-carousel arrow="always" indicator-position="outside" :autoplay="false">
<el-carousel-item v-for="(item,index) in imgsArr" :key="index" class="carousel_item">
<img style="" :src="item.url" class="carousel_img"/>
</el-carousel-item>
</el-carousel>
</el-row>
</el-dialog>
js部分
这里首先定义一些初值,我这里先把需要的图片转成了base64的格式,放到数组,然后进行拼接展示
点击图片的方法
handleEnlargeImg (row) {
this.imgVisible = true
let tempImgArr = []
this.icoArr.forEach(item => {
tempImgArr.push({ url: 'data:image/png;base64,' + item })
})
this.imgsArr = tempImgArr
}
css部分
这部分确保了一个页面一张图片铺满的样式,不然会出现图片的偏差展示
/* 轮播图样式 */
.el-carousel {
width: 100%;
}
.el-carousel__indicators--outside {
margin: 10px 0;
}
.carousel_item {
width: 100%;
height: 100%;
background: white;
display: flex;
justify-content: center;
}
.carousel_img {
max-width: 100%;
max-height: 100%;
}