Vue3 + Element-Plus 使用 Table 预览图片发生元素遮挡

news2024/12/24 21:38:58

Vue3 + Element-Plus 使用 Table 预览图片发生元素遮挡

  • 问题代码
  • 问题重现
  • 解决方法
  • 最终效果


问题代码

<el-table-column label="视频" align="center">
                <template #default="scope" style="display: flex;">
                    <div style="display: flex; align-items: center">
                        <video v-for="(item, index) in scope.row.videos" :key="index" id="videoPlayer"
                            class="video-js vjs-default-skin" controls playsinline width="150px">
                            <source :src="item" type="video/mp4" />
                        </video>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="图片" align="center">
                <template #default="scope" style="display: flex;">
                    <div style="display: flex; align-items: center">
                        <el-image v-for="img in scope.row.images" :src="img" :preview-src-list="scope.row.images" />
                    </div>
                </template>
            </el-table-column>

问题重现

在这里插入图片描述

解决方法

在图片元素添加属性 preview-teleported

<el-image preview-teleported v-for="img in scope.row.images" :src="img" :preview-src-list="scope.row.images" />

最终效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1601570.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Keepalived+LVS+nginx搭建nginx高可用集群

一、简介 nginx是一款非常优秀的反向代理工具&#xff0c;支持请求分发&#xff0c;负载均衡&#xff0c;以及缓存等等非常实用的功能。在请求处理上&#xff0c;nginx采用的是epoll模型&#xff0c;这是一种基于事件监听的模型&#xff0c;因而其具备非常高效的请求处理效率…

Qt 4 QPushButton

Qt 常用控件 QPushButton 实例 Push Button:命令按钮。 入口文件 main.cpp #include "mainwindow.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);MainWindow w;w.show();return a.exec(); }头文件 mainwindow.h …

【C 数据结构】单链表

文章目录 【 1. 基本原理 】1.1 链表的节点1.2 头指针、头节点、首元节点 【 2. 链表的创建 】2.0 创建1个空链表&#xff08;仅有头节点&#xff09;2.1 创建单链表&#xff08;头插入法&#xff09;*2.2 创建单链表&#xff08;尾插入法&#xff09; 【 3. 链表插入元素 】【…

rabbitmq每小时自动重启

引言 找了半天&#xff0c;最后通过系统日志发现是因为执行 systemctl restart rabbitmq-server 命令无法返回回调 systemctl 导致超时&#xff0c;自动关机。怀疑是 rabbitmq 与 systemctl 冲突&#xff0c;后 mq 升级版本已修复&#xff0c;可参考&#xff1a;https://github…

golang-基础语法

make 和 new 的区别 make 和 new 都是用来分配内存 make 只能对 slice map channel 进行初始化结构体实例。new 可以对任意类型进行初始化make 用于分配数据对象的具体实例&#xff0c;new 用于分配数据类型的默认值&#xff0c;并返回该数据的指针。 new 出来的 slice 、ma…

springboot Logback 不同环境,配置不同的日志输出路径

1.背景&#xff1a; mac 笔记本开发&#xff0c;日志文件写到/data/logs/下&#xff0c;控制台报出&#xff1a;Failed to create parent directories for [/data/logs/........... 再去手动在命令窗口创建文件夹data&#xff0c;报Read-only file system 2.修改logback-spri…

(C++) 稀疏表Sparse Table

目录 一、介绍 1.1 倍增 1.2 稀疏表ST 二、原理 三、代码实现 3.1 创建稀疏表 3.2 初始化数值 3.3 ST查询 一、介绍 1.1 倍增 倍增的思想是在数据空间特别大的时候&#xff0c;快速进行查找搜索而使用的。例如想要在一个数据量为n的递增数组中查找到等于x的下标&#x…

算法|基础算法|高精度算法

基础算法|位运算 1.高精度加法 2.高精度减法 3.高精度乘法 4.高精度除法 心有猛虎&#xff0c;细嗅蔷薇。你好朋友&#xff0c;这里是锅巴的C\C学习笔记&#xff0c;常言道&#xff0c;不积跬步无以至千里&#xff0c;希望有朝一日我们积累的滴水可以击穿顽石。 高精度加法 …

图灵奖得主AviWigderson:随机性与AI深度融合,引领计算科学新篇章

近日&#xff0c;理论计算机科学领域的杰出代表Avi Wigderson教授荣获了享有“计算机界诺贝尔奖”美誉的图灵奖&#xff0c;以表彰他对计算中随机性和伪随机性研究的杰出贡献。这一荣誉不仅彰显了Wigderson教授在计算理论领域的卓越成就&#xff0c;也为当前热门的AI和深度学习…

打破常规,重新定义PMP备考之路

今天我想和大家聊聊一个我们都不陌生的话题——PMP备考。你是不是也在备考的苦海中挣扎&#xff0c;或是听说过各种“速成”的神话&#xff1f;&#x1f914; 最近读到一篇文章&#xff08;来着圣略PMP培训讲师老杨&#xff09;&#xff0c;让我对PMP备考有了新的认识。原来&a…

如何用flutter写一个好的登录页面

编写一个好的登录页面是构建用户友好且安全的移动应用的重要一步。下面是使用Flutter编写一个好的登录页面的一些建议和步骤&#xff1a; 1. 设计用户界面 1.简洁明了的布局&#xff1a;确保界面简洁明了&#xff0c;不要过分复杂&#xff0c;避免用户感到困惑。 2.清晰的输入框…

1、IPEX-LLM(原名BigDL-LLM)环境配置

IPEX-LLM 是一个为Intel XPU (包括CPU和GPU) 打造的轻量级大语言模型加速库&#xff0c;在Intel平台上具有广泛的模型支持、最低的延迟和最小的内存占用。 您可以使用 IPEX-LLM 运行任何 PyTorch 模型&#xff08;例如 HuggingFace transformers 模型&#xff09;。在运行过程中…

Redis的IO模型 和 多线程问题

Redis中的线程和IO模型 什么是Reactor模式 &#xff1f;单线程Reactor模式流程单线程Reactor&#xff0c;工作者线程池多Reactor线程模式 Redis中的线程和IO概述socketI/O多路复用程序文件事件分派器文件事件处理器文件事件的类型总结 多线程问题1. Redis6.0之前的版本真的是单…

05节-51单片机-模块化编程

1.两种编程方式的对比 传统方式编程&#xff1a; 所有的函数均放在main.c里&#xff0c;若使用的模块比较多&#xff0c;则一个文件内会有很多的代码&#xff0c;不利于代码的组织和管理&#xff0c;而且很影响编程者的思路 模块化编程&#xff1a; 把各个模块的代码放在不同的…

学习java时候的笔记(十六)

常用API Math 是一个帮助我们用于进行数学计算的工具类 Math中常用的方法 方法名说明abs(int a)获取参数的绝对值abs(-1) > 1ceil(double b)向上取整1.1 > 2floor(double b)向下取整1.7>1round(float a)四舍五入max(int a, int b)取两个整数的最大值max(2,3) >…

LeetCode-924. 尽量减少恶意软件的传播【深度优先搜索 广度优先搜索 并查集 图 哈希表】

LeetCode-924. 尽量减少恶意软件的传播【深度优先搜索 广度优先搜索 并查集 图 哈希表】 题目描述&#xff1a;解题思路一&#xff1a;解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给出了一个由 n 个节点组成的网络&#xff0c;用 n n 个邻接矩阵图…

02_对象树

#include "mypushbutton.h" #include <QDebug>MyPushButton::MyPushButton(QWidget *parent): QPushButton(parent) {qDebug()<<"我的按钮类构造调用"; }MyPushButton::~MyPushButton() {qDebug()<<"我的按钮类析构调用"; }交…

「JavaEE」线程

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;JavaEE &#x1f387;欢迎点赞收藏加关注哦&#xff01; 线程 &#x1f349;线程&#x1f34c;多线程&#x1f34c;线程与进程的联系&区别&#x1f34c;多线程编程&#x1f34c;创建线程&a…

spring02:DI(依赖注入)

spring02&#xff1a;DI&#xff08;依赖注入&#xff09; 文章目录 spring02&#xff1a;DI&#xff08;依赖注入&#xff09;前言&#xff1a;一、构造器注入&#xff08;constructor&#xff09;二、set注入&#xff1a;分析&#xff1a; 1. Student类&#xff1a;2. Addres…

【大语言模型】轻松本地部署Stable Diffusion

硬件要求&#xff1a; 配备至少8GB VRAM的GPU&#xff0c;如果你的电脑只有CPU&#xff0c;请看到最后。根据部署规模&#xff0c;需要足够的CPU和RAM。 软件要求&#xff1a; Python 3.7或更高版本。支持NVIDIA GPU的PyTorch。Hugging Face的Diffusers库。Hugging Face的Tr…