(css)element-ui表格行图片点击放大且可调整preview-src-list大图预览样式

最新推荐文章于 2024-08-08 15:00:57 发布

nyf_unknown

最新推荐文章于 2024-08-08 15:00:57 发布

阅读量697

点赞数 2

分类专栏： CSS 文章标签： css ui vue.js

本文链接：https://blog.csdn.net/qq_44754635/article/details/136446362

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

(css)element-ui表格行图片点击放大且可调整preview-src-list大图预览样式

效果：
在这里插入图片描述

常规写法：

<el-table-column prop="display" label="展示效果" align="center">
  <template slot-scope="scope">
    <el-image
      style="width: 100px; height: 40px"
      :src="scope.row.display"
      :preview-src-list="[scope.row.display]"
    />
  </template>
</el-table-column>

<style lang="scss" scoped>
//图片过大时添加
::v-deep .el-image-viewer__img {
  width: 25%;
  height: auto;
}
</style>