快捷導(dǎo)航

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

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

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

問(wèn)題代碼

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

問(wèn)題重現(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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