一、前端图片
<el-form-item label="案件文件"> <el-image fit="contain" v-for="(item,index) of fileList" :key="index" :src="item.url" :preview-src-list="getImgList(index)" style="width:100px;height:100px;" /> </el-form-item>
二、方法
// 查询图片列表信息 getFileList(id){ let params = { page_index: 1, page_count: 100, relationId: id } getItemFile(params).then(res => { if (res.code == 200) { let result = JSON.parse(res.result) let data= result.object; this.fileList = result.object; let count = data.length; if (count > 0) { for(let i=0;i<data.length;i++){ this.fileList[i].url = this.$publicjs.fileServer+data[i].filePath; this.srcList.push(this.$publicjs.fileServer+data[i].filePath); } } } else { this.$publicjs.showMessage('文件查询失败', this.$publicjs.ErrorType) } }) }, // 大图预览 getImgList(index){ let arr=[]; let i =0; for(i;i<this.srcList.length;i++){ arr.push(this.srcList[i+index]); if(i+index >= this.srcList.length-1){ index = 0-(i+1); } } return arr; }
三、实现效果
标签:count,el,vue,res,image,let,result,图片 From: https://www.cnblogs.com/flyShare/p/18082324