vue表格展示照片点击放大并可左右切换查看

一 vue展示后台返回照片集合

1. 前端代码展示

<el-table-column prop="images" label="照片" align="center" width="180">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.images[0]"
            :preview-src-list="scope.row.images"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>

说明：images为后台返回的属性（List）

2.后台对象返回数据形式