先上需求,后台会返回1-9张不等的图片,需要显示在列表页面,一张的时候,就显示大图,超过一张就按照九宫格显示,大概长这样
不多BB,直接上代码
// html
<el-table-column prop="commentUrl" label="评论图片" width="195">
<template slot-scope="scope">
<div class="wrap" :class="{'moreImg':scope.row.commentUrl.length > 1}" >
<el-image v-for="(item , index) in scope.row.commentUrl" :key="index" :src="item.url" :fit="fit"></el-image>
</div>
</template>
</el-table-column>
// css样式
.wrap {
img {
width: 100%;
height: 100%;
}
}
/deep/ .moreImg{
display: flex;
flex-wrap: wrap;
.el-image{
width: 50px;
height: 50px;
margin-right: 5px;
margin-top: 5px;
}
}
commentUrl 是一个数组,当数组里面的长度大于1的时候,就意味着不止一张图片,就需要变成九宫格的样式,只需要限制表格的宽度就可以了,我在html里面限制了宽度为195,然后在css写两套样式,class是wrap的时候,是一张图片的样式,为moreImg的时候,就是多张图片的样式了