table列表 图片预览 

1 <el-table-column label="营业执照" align="center" prop="businessLicense">
2                 <template slot-scope="scope">
3                     <el-image 
4                         style="width: 60px; height: 60px"
5                         :src="scope.row.businessLicense" 
6                         :preview-src-list="scope.row.businessLicenseList">
7                     </el-image>
8                 </template>
9  </el-table-column>
 1 /** 查询列表 */
 2             getList() {
 3                 this.loading = true;
 4                 let businessLicenseList = []//存放图片
 5                 getApplyList(this.queryParams).then((res) => {
 6                     this.bookingList = res.data.rows.map( item => {
 7                         businessLicenseList = [] //清空一次，不然会叠加所有的图片
 8                         if(item.businessLicense != null && item.businessLicense.indexOf(';') != -1){
 9                             item.businessLicense = item.businessLicense.split(';')[1]
10                             businessLicenseList.push(item.businessLicense)
11                             console.log("item.businessLicense.split(';')[1]:",item.businessLicense.split(';')[1]);
12                             item.businessLicenseList = businessLicenseList
13                         }
14                         return item
15                     })
16                     console.log("this.bookingList:",this.bookingList);
17                     this.total = res.data.total
18                     this.loading = false;
19                 })
20             },

效果：

 

 

posted on 2024-11-28 16:25  奔驰的码儿  阅读(3)  评论(0)  编辑  收藏  举报

导航