vue?element-ui的table列表中展示多張圖片(可放大)效果實(shí)例
一、效果圖
效果圖基本就是這樣，如果需要此效果的小伙伴可以往下看 ；
二、代碼部分
1、先簡單的復(fù)述一下原理
因?yàn)橐粋€(gè)table表格里面要存放一張或多張圖片，所以前端接受到圖片相關(guān)的數(shù)據(jù)肯定是個(gè)數(shù)組類型的，所以此時(shí)就要用到v-for="(item,index) in xxx" :key="index"的方法來實(shí)現(xiàn)，說到這不知道你有沒有受到一點(diǎn)點(diǎn)啟發(fā)，沒有的話，直接上代碼：
2、template部分
//images就是后端傳遞的圖片的數(shù)組類型數(shù)據(jù)
//<el-table-column>包裹一個(gè)<template>標(biāo)簽，然后在包裹element-ui的image大圖組件
//然后就用到了上邊說的v-for="(item, index) in scope.row.images" :key="index"這個(gè)重要的知識點(diǎn)
//：src是圖片的url
//:preview-src-list是展示大圖的數(shù)組
<el-table-column prop="images" label="配圖" align="center" width="150">
<template slot-scope="scope">
<el-image v-for="(item, index) in scope.row.images" :key="index":src="item"
:preview-src-list="[item]" >
</el-image>
</template>
</el-table-column>3、script
這個(gè)部分其實(shí)沒什么代碼，口頭復(fù)述吧，因?yàn)楹蠖松蟼鞯亩疾灰粯樱怯幸稽c(diǎn)必須是數(shù)組類型，上圖的代碼才有效，當(dāng)然如果只是一張圖一張圖的發(fā)給你，估計(jì)也不需要一個(gè)table存放多張圖了，那樣也就不需要使用v-for了對吧（后端傳圖片地址數(shù)組，前端循環(huán)遍歷出現(xiàn)，原理就是這么簡單）
其實(shí)沒什么難度，只需要看你對v-for的理解程度了
總結(jié)
到此這篇關(guān)于vue element-ui的table列表中展示多張圖片(可放大)效果的文章就介紹到這了,更多相關(guān)element-ui table列表展示多圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中iframe的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對象的API,只對對象的第一層屬性進(jìn)行響應(yīng)式轉(zhuǎn)換,不對嵌套對象處理,有助于性能優(yōu)化和狀態(tài)管理,同時(shí)也指出了shallowReactive在使用中的注意事項(xiàng)2024-10-10
這篇文章主要介紹了Vue中之nextTick函數(shù)源碼分析,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了講解vue-router之命名路由和命名視圖，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)
這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
在Vue3中實(shí)現(xiàn)緩存和復(fù)用動(dòng)態(tài)組件
本文介紹了在Vue3中使用<KeepAlive>組件和手動(dòng)管理組件實(shí)例來緩存和復(fù)用動(dòng)態(tài)組件的方法,使用<KeepAlive>可以緩存特定組件,控制緩存實(shí)例數(shù)量,并通過生命周期鉤子執(zhí)行相應(yīng)邏輯,手動(dòng)管理則通過對象存儲組件實(shí)例,提高性能,最后,將邏輯封裝到組合式函數(shù)中,增強(qiáng)代碼復(fù)用性2026-04-04
vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹表格
本文主要介紹了vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹表格，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器
這篇文章主要介紹了Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02