element 表格显示图片

先上需求，后台会返回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的时候，就是多张图片的样式了