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