element-ui點(diǎn)擊查看大圖的方法示例
更新時間：2020年12月14日 11:06:23 作者：向天再借五百根
這篇文章主要介紹了element-ui查看大圖的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
element-ui圖片（查看大圖），可通過 previewSrcList 開啟預(yù)覽大圖的功能。
寫在element-ui表格中，使用作用域插槽循環(huán)圖片
<!-- template插槽 --> <template slot-scope="scope"> <div class="demo-image__preview"> <el-image style="width: 100%; height: 100%" :src="scope.row.pic" :preview-src-list="srcList" > </el-image> </div> </template>
1.此處的div是展示大圖的容器，當(dāng)點(diǎn)擊圖象時顯示出來。
2.srcList是存放大圖路徑的數(shù)組，在獲取數(shù)據(jù)時，通過forEach將圖片路徑存放到srcList中
data() {
return {
data: [], // 所有數(shù)據(jù)
srcList: [], //大圖
},
mounted(){
this.$http.get("/data.json").then((res) => {
this.data = res.data;
this.data.forEach((item) => {
this.srcList.push(item.pic);
});
});
}
最終效果：
到此這篇關(guān)于element-ui查看大圖的方法示例的文章就介紹到這了,更多相關(guān)element查看大圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue父組件異步如何獲取數(shù)據(jù)傳給子組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue elementUI表格控制顯示隱藏對應(yīng)列的方法
這篇文章主要為大家詳細(xì)介紹了vue elementUI表格控制顯示隱藏對應(yīng)列的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，一個簡單的組件示例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
詳解vue-Resource（與后端數(shù)據(jù)交互）
本篇文章主要介紹了vue-Resource（與后端數(shù)據(jù)交互），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
今天在移動端項(xiàng)目中遇見一個需求,需要數(shù)據(jù)無限滾動,所以下面這篇文章主要給大家介紹了關(guān)于手寫vue無限滾動指令的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue項(xiàng)目打包之后接口出現(xiàn)錯誤的問題及解決
這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯誤的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)頁面訪問攔截功能，文中的示例代碼講解詳細(xì)，具有一定的參考價值，需要的可以了解一下2023-08-08
vue-router+vuex addRoutes實(shí)現(xiàn)路由動態(tài)加載及菜單動態(tài)加載
本篇文章主要介紹了vue-router+vuex addRoutes實(shí)現(xiàn)路由動態(tài)加載及菜單動態(tài)加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
Vue.js中class與style的增強(qiáng)綁定實(shí)現(xiàn)方法
由于Class和Style綁定使用頻繁，字符串拼接麻煩且易錯，因此，Vue.js 做了專門的增強(qiáng)，表達(dá)式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組，本文給大家講解Vue.js中class與style的增強(qiáng)綁定知識，感興趣的朋友一起看看吧2023-04-04