Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法
更新時(shí)間：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)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式
- element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn)
- vue3使用element-plus再次封裝table組件的基本步驟
- vue3使用elementPlus進(jìn)行table合并處理的示例詳解
- vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼
- vue3+elementplus基于el-table-v2封裝公用table組件詳細(xì)代碼
- Vue3中Element Plus Table(表格)點(diǎn)擊獲取對應(yīng)id方式
- vue3 elementplus table合并寫法
- Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
- ElementPlus?Table表格實(shí)現(xiàn)可編輯單元格
相關(guān)文章
組件的二次封裝：保留組件已有的功能,需要重寫組件方法,當(dāng)組件已有大量功能時(shí)候,則需要重寫很多重復(fù)代碼,且組件功能進(jìn)行修改的時(shí)候,封裝的組件也需要對應(yīng)修改,從而造成許多開發(fā)和維護(hù)成本,本文給大家分享了Vue3實(shí)現(xiàn)組件二次封裝的小技巧,需要的朋友可以參考下2024-09-09
vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)
這篇文章主要介紹了vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了uniapp中uni-load-more的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue組件如何被其他項(xiàng)目引用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了MVVM 框架解析之雙向綁定,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue+element-ui+axios多文件上傳的實(shí)現(xiàn)并顯示整體進(jìn)度
這篇文章主要介紹了vue+element-ui+axios多文件上傳的實(shí)現(xiàn)并顯示整體進(jìn)度，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于在vue-cli中使用微信自動(dòng)登錄和分享的實(shí)例
本篇文章主要介紹了關(guān)于在vue-cli中使用微信自動(dòng)登錄和分享的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06