当前位置: 首页 > news >正文

ElementUI 表格中插入图片缩略图,鼠标悬停显示大图

如何在 ElementUI 的表格组件 Table 中插入图片缩略图,通过鼠标悬停显示大图?介绍以下2种方式:

方法1:直接在模板元素中插入

<template>
  <el-table :data="tableData">
    <el-table-column label="图片">
      <template slot-scope="scope">
        <el-popover placement="right" trigger="hover">
          <img :src="scope.row.picture" style="max-width: 500px; max-height: 500px;">
          <img slot="reference" :src="scope.row.thumbnail" style="width: 50px; height: 50px; vertical-align: middle;">
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          thumbnail: 'https://www.lervor.com/thumbnail.jpg',
          picture: 'https://www.lervor.com/picture.jpg'
        }]
      }
    }
  }
</script>

方法2:通过表格列属性格式化

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :label="column.label"
      :formatter="column.formatter"
    />
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          thumbnail: 'https://www.lervor.com/thumbnail.jpg',
          picture: 'https://www.lervor.com/picture.jpg'
        }],
        columns: [
          {
            label: '图片',
            formatter: row => {
              return this.$createElement('el-popover', {
                attrs: {
                  trigger: 'hover',
                  placement: 'right'
                }
              }, [
                this.$createElement('img', {
                  attrs: {
                    style: 'max-width: 500px; max-height: 500px;',
                    src: `${row.picture}`
                  }
                }),
                this.$createElement('img', {
                  attrs: {
                    style: 'width: 50px; height: 50px; vertical-align: middle;',
                    src: `${row.thumbnail}`
                  },
                  slot: 'reference'
                })
              ])
            }
          }
        ]
      }
    }
  }
</script>

相关文章:

  • 图像处理篇---图像预处理
  • 【宠粉赠书】极速探索 HarmonyOS NEXT:国产操作系统的未来之光
  • tongweb信创项目线上业务添堵问题排查
  • 《Python实战进阶》No21:数据存储:Redis 与 MongoDB 的使用场景
  • Spring面试:Spring,SpringMVC,SpringBoot
  • 软考系统架构师 — 1 考点分析
  • 基于javaweb的SpringBoot精美物流管理系统设计与实现(源码+文档+部署讲解)
  • 五大基础算法——分治算法
  • QT中的宏
  • 大数据学习(64)- 大数据集群的高可用(HA)
  • 基于ydoVr算法的车辆智能防盗系统的设计与实现
  • linux:进程调度(下)
  • 单机 elasticsearch下载,安装,配置,启动,百度云链接提供
  • 【C语言】动态内存管理用realloc管理更灵活
  • CSS Table (表格)
  • windows上清理docker
  • Dify使用部署与应用实践
  • Python学习第十九天
  • 在Flutter中使用Future读取一个大文件会导致线程阻塞吗
  • Vue3 修改Pinia数据
  • 江阴高端网站建设/爱站网排名
  • 国外做彩票网站推广是合法的吗/做百度推广多少钱
  • 免费做app网站/seo优化软件有哪些
  • 建设网站好公司/培训机构管理系统
  • 商城网站怎样做/关键词什么意思
  • 做网站接单的网站/b2b商务平台