快捷導(dǎo)航

Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法

更新時間：2024年04月17日 09:37:10 作者：她似晚風(fēng)般溫柔789

這篇文章主要介紹了Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的問題分析和解決方法,文中通過代碼示例講解的非常詳細(xì),對大家解決問題有一定的幫助,需要的朋友可以參考下

問題代碼

<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>

問題重現(xiàn)

在這里插入圖片描述

解決方法

在圖片元素添加屬性 preview-teleported

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

最終效果

在這里插入圖片描述

到此這篇關(guān)于Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法的文章就介紹到這了,更多相關(guān)Vue3 Table預(yù)覽圖片發(fā)生遮擋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)商品購物車全選反選
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)商品購物車全選反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
詳解VUE前端按鈕權(quán)限控制
這篇文章主要介紹了VUE前端按鈕權(quán)限控制，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue.js Router嵌套路由
這篇文章主要介紹vue.js Router嵌套路由,平時訪問首頁,里面有新聞類的/home/news,還有信息類的/home/message這時候就需要使用到嵌套路由,下面我們就來具體學(xué)習(xí)嵌套路由的原理,需要的朋友可以參考一下
2021-10-10
vue axios 在頁面切換時中斷請求方法 ajax
下面小編就為大家分享一篇vue axios 在頁面切換時中斷請求方法 ajax，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
基于Vue.js實現(xiàn)簡單搜索框
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實現(xiàn)簡單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
Element Timeline時間線的實現(xiàn)
本文主要介紹了Element Timeline時間線的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
vue?v-if未生效問題及解決
這篇文章主要介紹了vue?v-if未生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
使用vue3搭建后臺系統(tǒng)的詳細(xì)步驟
這篇文章主要介紹了使用vue3搭建后臺系統(tǒng)的過程記錄,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
vue單頁面如何設(shè)置高度100%全屏
這篇文章主要介紹了vue單頁面如何設(shè)置高度100%全屏，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04