首页 前端知识 el-table中显示图片

el-table中显示图片

2024-04-13 09:04:19 前端知识 前端哥 492 732 我要收藏
el-table中显示图片

将接口返回的图片地址 ,在table中显示出来.
用到了 el-table 表格,和el-image 图片
请添加图片描述

1.html部分

通过地址拼接,显示正确网址, :src=“``” es6写法。

相关代码:

 <el-table-column
          label="图片"
          prop="ImageUrl"
          align="center"
          width="100px"
        >
          <template slot-scope="scope">
            <el-image
              @click="
                bigImg(`https://xxx.com${scope.row.ImageUrl}`)
              "
              style="width: 50px; height: 50px; margin-bottom:-4px"
              :src="`https://xxx.com${scope.row.ImageUrl}`"
              :preview-src-list="srcList"
            >
            </el-image>
          </template>
        </el-table-column>
2.通过点击事件,放大图片
插件自带的一个,点击打开 srcList  图片列表。
所以,添加了 一个点击事件 bigImg ,点击以后将 srcList  图片列表改成现在点击的图片。

data中定义 srcList

 srcList:["https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"]

点击事件,当srcList 直接设置成空时候,点击第一个时候就不会弹出框(以后正常)。所以,srcList 保留了一个默认值。

methods: {
    //大图
    bigImg(url) {
      this.srcList[0] = url;
    },
  }

请添加图片描述
这个弹框的相关样式,直接写在 style标签了。写在其他标签,比如说父元素box下,不会生效。

<style lang="less">
.box{}
//大图显示样式
   // .el-image-viewer__mask {
  //   background: none !important;
  // }
  .el-image-viewer__close {
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    color: #fff;
    background-color:rgba(255, 255, 255, 0)!important;
}
</style>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4826.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!