当前位置: 代码迷 >> 综合 >> iview table render多图片并点击放大
  详细解决方案

iview table render多图片并点击放大

热度:41   发布时间:2023-12-27 15:22:51.0
{minWidth: 100,title: "图片/images",key: "image",render: (h, params) => {let pics = params.row.picture;//我这里是字符串,如果是数组,没必要写这个if (pics != null) {if (pics.length > 5) {let imgs = pics.replace(/"/g, "");var images = imgs.split(",");for (let i = 0; i < images.length; i++) {images[i] = this.$uploadPicUrl + images[i];}//以上都是在拼数组return h("div",images.map(item => {return h("img", {attrs: {src: item,style: "width:40px;height:40px;margin-right:5px"},on: {click: () => {this.showBigPic(item);//此处再用一个方法,建一个modal把图放大。}}});}));}}else{return h('span','')}}}<Modalv-model="bigPicVisible"title@on-cancel="cancel":width="screenWidth*0.4":height="screenHeight*0.4"><img :src="bigPicUrl" style=" width:100%;height:100%" /></Modal>showBigPic(item) {console.log(item);this.bigPicVisible = true;this.bigPicUrl = item;}

 

  相关解决方案