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