Vue前端多图展示

使用json存入数据库时记得在实体类上添加注解

@TableName(value = "test",autoResultMap = true)

<el-table-column label="图片" align="center" width="180px" :show-overflow-tooltip="false">
        <template #default="scope">
          <el-image fit="fill" style="width:40px;height: 40px;margin-left: 6px;"
            v-for="(item, index) in getShowImageList(scope.row.imageList)" :key="index" :preview-teleported="true"
            :src="item" :preview-src-list="getImgList(scope.row.imageList, index)" />
        </template>
      </el-table-column>

// 预览图片列表生成，主要用于生成一个点击图片为第一张的列表
const getImgList = (imageList, index) => {
  let arr = [] as any[]
  if (imageList.length == 1) {
    arr.push(imageList[0])
  } else if (imageList.length == 0) {
    return arr;
  } else {
    for (let i = 0; i < imageList.length; i++) {
      arr.push(imageList[i + index])
      if (i + index >= imageList.length - 1) {
        index = 0 - (i + 1);
      }
    }
  }
  return arr;
}
 
const getShowImageList = (imageList) => {
  if (imageList == null) {
    return []
  }
  // 判断ImageList长度
  if (imageList.length <= 3) {
    return imageList
  } else {
    return imageList.slice(0, 3)
  }
}