亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue?element-ui的table列表中展示多張圖片(可放大)效果實(shí)例

 更新時(shí)間：2023年08月22日 14:02:06   作者：Single-Thread  
這篇文章主要給大家介紹了關(guān)于vue?element-ui的table列表中展示多張圖片(可放大)效果的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

一、效果圖

 效果圖基本就是這樣，如果需要此效果的小伙伴可以往下看 ；

二、代碼部分

1、先簡(jiǎn)單的復(fù)述一下原理

因?yàn)橐粋€(gè)table表格里面要存放一張或多張圖片，所以前端接受到圖片相關(guān)的數(shù)據(jù)肯定是個(gè)數(shù)組類(lèi)型的，所以此時(shí)就要用到v-for="(item,index) in xxx" :key="index"的方法來(lái)實(shí)現(xiàn)，說(shuō)到這不知道你有沒(méi)有受到一點(diǎn)點(diǎn)啟發(fā)，沒(méi)有的話(huà)，直接上代碼：

2、template部分

//images就是后端傳遞的圖片的數(shù)組類(lèi)型數(shù)據(jù)
//<el-table-column>包裹一個(gè)<template>標(biāo)簽，然后在包裹element-ui的image大圖組件
//然后就用到了上邊說(shuō)的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í)沒(méi)什么代碼，口頭復(fù)述吧，因?yàn)楹蠖松蟼鞯亩疾灰粯樱怯幸稽c(diǎn)必須是數(shù)組類(lèi)型，上圖的代碼才有效，當(dāng)然如果只是一張圖一張圖的發(fā)給你，估計(jì)也不需要一個(gè)table存放多張圖了，那樣也就不需要使用v-for了對(duì)吧（后端傳圖片地址數(shù)組，前端循環(huán)遍歷出現(xiàn)，原理就是這么簡(jiǎn)單）

其實(shí)沒(méi)什么難度，只需要看你對(duì)v-for的理解程度了

總結(jié)

到此這篇關(guān)于vue element-ui的table列表中展示多張圖片(可放大)效果的文章就介紹到這了,更多相關(guān)element-ui table列表展示多圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論