vue图片和缩略图

  {
          title: "图片数据\n",
          dataIndex: "picList",
          width: 200,
          align: "center",
          scopedSlots: { customRender: "commImg" }
        },

定义一个scopedSlots可操作的模板

<template slot="commImg" slot-scope="text">
            <viewer :images="images(text)"  v-if="text!=''">
              <img class="showPic" v-for="(src,index) in images(text)" :src="src" :key="index" width="300" :class="{'hidePic': index != 0}">
            </viewer>
          </template>

viewer图片显示标签

methods: {

    images(val) {
      if(val) {
        return (val+"").split(',')
      }else {
        return ''
      }
    },

遍历图片

.showPic {
  width: 48px;
  height: 50px;
  margin-left: 5px;
  margin-bottom: 5px;
}
</style>

缩略图

样式