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

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>


http://www.kler.cn/a/589373.html

相关文章:

  • 电脑型号与尺寸
  • Leetcode Hot 100 200.岛屿数量
  • 【Agent】OpenManus-Flow-BaseFlow详细分析
  • element-ui progress 组件源码分享
  • 蓝牙技术联盟中国实体成立!华为、小米发声支持本土化战略
  • 实战ansible-playbook
  • 《C#上位机开发从门外到门内》3-3:基于USB的设备管理系统
  • MCP 开放协议
  • Visual Studio里的“公共语言运行时支持”各选项的作用是什么,分别适用于哪些场景?
  • 基于CPLD+MCU的3U机箱数字量输入采集板DI,主要针对标准DC110V开关量信号进行采集处理
  • LINUX驱动学习之IIC驱动-----以AP3216C为例
  • ZED X系列双目3D相机的耐用性与创新设计解析
  • 基于python+django+vue.js开发的停车管理系统运行-期末作业
  • 基于Python的tkinter开发的一个工具,解析图片文件名并将数据自动化导出为Excel文件
  • Spring 原生启动过程
  • Jenkins 快讯
  • A - 整数的简单问题/A - A Simple Problem with Integers
  • Linux centos7误删/boot拯救方法
  • 【系统架构设计师】操作系统 - 文件管理 ③ ( 树形目录结构 | 文件属性 | 绝对路径 与 相对路径 )
  • 大型智慧城市、交通枢纽、跨区域联网监控视频平台使用LiveGBS国标GB28181平台如何实现分布式集群及负载均衡