前端基础学习-表格内缩略图放大并以轮播图展示

对于表格内的数据，需要对应数据进行图片放大的效果，做一个记录
先看看效果

点击图片缩略图后

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%;
}