vue?element-ui的table列表中展示多張圖片(可放大)效果實例
更新時間：2023年08月22日 14:02:06 作者：Single-Thread
這篇文章主要給大家介紹了關(guān)于vue?element-ui的table列表中展示多張圖片(可放大)效果的相關(guān)資料,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
一、效果圖
效果圖基本就是這樣，如果需要此效果的小伙伴可以往下看 ；
二、代碼部分
1、先簡單的復(fù)述一下原理
因為一個table表格里面要存放一張或多張圖片，所以前端接受到圖片相關(guān)的數(shù)據(jù)肯定是個數(shù)組類型的，所以此時就要用到v-for="(item,index) in xxx" :key="index"的方法來實現(xiàn)，說到這不知道你有沒有受到一點點啟發(fā)，沒有的話，直接上代碼：
2、template部分
//images就是后端傳遞的圖片的數(shù)組類型數(shù)據(jù)
//<el-table-column>包裹一個<template>標(biāo)簽，然后在包裹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
這個部分其實沒什么代碼，口頭復(fù)述吧，因為后端上傳的都不一樣，但是有一點必須是數(shù)組類型，上圖的代碼才有效，當(dāng)然如果只是一張圖一張圖的發(fā)給你，估計也不需要一個table存放多張圖了，那樣也就不需要使用v-for了對吧（后端傳圖片地址數(shù)組，前端循環(huán)遍歷出現(xiàn)，原理就是這么簡單）
其實沒什么難度，只需要看你對v-for的理解程度了
總結(jié)
到此這篇關(guān)于vue element-ui的table列表中展示多張圖片(可放大)效果的文章就介紹到這了,更多相關(guān)element-ui table列表展示多圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-i18n的9以上版本中@被用作特殊字符處理,直接用會報錯問題
這篇文章主要介紹了vue-i18n的9以上版本中@被用作特殊字符處理,直接用會報錯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中使用router全局守衛(wèi)實現(xiàn)頁面攔截的示例
這篇文章主要介紹了vue中使用router全局守衛(wèi)實現(xiàn)頁面攔截的示例，幫助大家維護自己的項目，感興趣的朋友可以了解下2020-10-10
Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決
這篇文章主要介紹了詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue之請求如何傳遞參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)開關(guān)按鈕拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
本文重點介紹axios如何配合vue搭建項目框架,文章給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
本篇文章主要介紹了vue2.0之多頁面的開發(fā)的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue.config.js?是一個可選的配置文件,如果項目的?(和?package.json?同級的)?根目錄中存在這個文件,那么它會被?@vue/cli-service?自動加載,這篇文章主要介紹了vue項目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02