Vue表格操作图片切换 点击查看大图 实现循环左右切换

在Vue 表格操作中实现图片切换 点击大图实现循环切换

{
   
 	title: this.$t("detail"),
  	width:200,
    render: (h, param) => {
   
      return h(
        "div",
        {
    style: {
    padding: "6px 0", display: "flex" } }, 
        	[ h(marQuee, {
   
            props: {
   
              pictureKey:  param.row.pictures,//图片的地址多个为数组
              width: 40,//在操作栏里的宽度
              height: 40,//在操作栏里的高度
            }
          })
        ]
      );
    }
 }

记得注册这个组件哈！

下面直接上组件非常清晰明了

<template>
  <div class="wrap">
    <!-- 表格操作的切换 -->
    <Icon
      type="ios-arrow-back"
      class="arrowLeft"
      @click="arrowL"
      v-if="this.pictureKey.length -3 > 0"
      :title="this.fisrtlist?`${$t('fisrtImage')}`:`${offsetCount+1}/${this.pictureKey.length}`"
    />
    <div class="wrapImage">
      <div class="imgList" ref="imgList">
        <img
          :src="`${getUrl(value)}?width=${width}&height=${height}`"
          v-for="(value,index) in pictureKey"
          :key="index"
          :width="width"
          :height="height"
          @click="bigImg(currentImage,index)"
          :title="`${$t('howmany').replace('%s',index+1)}`"
        >
      </div>
    </div>
    <Icon
      type="ios-arrow-forward"
      class="arrowRight"
      @click