Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法

 更新时间:2024年04月17日 09:37:10   作者:她似晚风般温柔789  
这篇文章主要介绍了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" />

最终效果

在这里插入图片描述

到此这篇关于Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法的文章就介绍到这了,更多相关Vue3 Table预览图片发生遮挡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现商品购物车全选反选

    vue实现商品购物车全选反选

    这篇文章主要为大家详细介绍了vue实现商品购物车全选反选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解VUE前端按钮权限控制

    详解VUE前端按钮权限控制

    这篇文章主要介绍了VUE前端按钮权限控制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue.js Router嵌套路由

    vue.js Router嵌套路由

    这篇文章主要介绍vue.js Router嵌套路由,平时访问首页,里面有新闻类的/home/news,还有信息类的/home/message这时候就需要使用到嵌套路由,下面我们就来具体学习嵌套路由的原理,需要的朋友可以参考一下
    2021-10-10
  • vue axios 在页面切换时中断请求方法 ajax

    vue axios 在页面切换时中断请求方法 ajax

    下面小编就为大家分享一篇vue axios 在页面切换时中断请求方法 ajax,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 基于Vue.js实现简单搜索框

    基于Vue.js实现简单搜索框

    这篇文章主要为大家详细介绍了基于Vue.js实现简单搜索框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Element Timeline时间线的实现

    Element Timeline时间线的实现

    本文主要介绍了Element Timeline时间线的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue v-if未生效问题及解决

    vue v-if未生效问题及解决

    这篇文章主要介绍了vue v-if未生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 使用vue3搭建后台系统的详细步骤

    使用vue3搭建后台系统的详细步骤

    这篇文章主要介绍了使用vue3搭建后台系统的过程记录,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue父组件向子组件传值以及data和props的区别详解

    Vue父组件向子组件传值以及data和props的区别详解

    这篇文章主要介绍了Vue父组件向子组件传值以及data和props的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue单页面如何设置高度100%全屏

    vue单页面如何设置高度100%全屏

    这篇文章主要介绍了vue单页面如何设置高度100%全屏,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论