element-ui點擊查看大圖的方法示例
更新時間：2020年12月14日 11:06:23 作者：向天再借五百根
這篇文章主要介紹了element-ui查看大圖的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(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)點擊圖象時顯示出來。
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)文章
本文將結(jié)合實例代碼，介紹Vue批量更新dom的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
vue3?內(nèi)容過多出現(xiàn)滾動條時滾動條自動定位到末端的操作代碼
這篇文章主要介紹了vue3?內(nèi)容過多出現(xiàn)滾動條時滾動條自動定位到末端的操作代碼,本文給大家介紹的非常詳細,需要的朋友參考下吧2024-05-05
使用vue實現(xiàn)滑動滾動條來加載數(shù)據(jù)
在vuejs中,我們經(jīng)常使用axios來請求數(shù)據(jù),但是有時候,我們請求的數(shù)據(jù)量很大,那么我們?nèi)绾螌崿F(xiàn)滑動滾動條來加載數(shù)據(jù)呢,接下來小編就給大家介紹一下在vuejs中如何實現(xiàn)滑動滾動條來動態(tài)加載數(shù)據(jù),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了基于vue實現(xiàn)微博三方登錄流程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue 屬性攔截實現(xiàn)雙向綁定的實例代碼，代碼簡答易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
利用vue+elementUI實現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實現(xiàn)部分引入組件的相關(guān)資料，以及介紹了vue引入elementUI報錯的解決方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家詳細介紹一下Vue中$nextTick的作用于原理,這也是面試中常?？嫉降膯栴},文中的示例代碼講解詳細,對我們深入了解Vue有一定的幫助,需要的小伙伴可以參考一下2023-10-10
這篇文章主要介紹了vue?中簡單使用mock的方法，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02