首页 > 其他分享 >解决el-image预览总是从第一页开始问题

解决el-image预览总是从第一页开始问题

时间:2024-07-23 11:41:02浏览次数:12  
标签:tempImgList el 预览 index image let 图片

    <el-image
                  v-for="(image, index) in form.imgUrl"
                  :key="index"
                  :src="image"
                  class="image"
                  :preview-src-list="privewImages(index)"
                  alt="图片/音频图片"
                >
                  <div
                    slot="error"
                    class="image-slot"
                  >
                    <el-image :src="require('@/assets/imgError.png')"></el-image>
                  </div>
                </el-image>

主要方法::preview-src-list="privewImages(index)"

 privewImages(index) {
      let tempImgList = [...this.form.imgUrl]
      // 所有图片地址
      if (index == 0) return tempImgList;
      // 调整图片顺序,把当前图片放在第一位
      let start = tempImgList.splice(index);
      let remain = tempImgList.splice(0, index);
      return start.concat(remain); // 将当前图片调整成点击缩略图的那张图片
    },

标签:tempImgList,el,预览,index,image,let,图片
From: https://www.cnblogs.com/hxy--Tina/p/18317975

相关文章

  • laravel: 调试打印sql
    一,代码:<?phpnamespaceApp\Models;useIlluminate\Database\Eloquent\Factories\HasFactory;useIlluminate\Database\Eloquent\Model;useIlluminate\Support\Facades\DB;classReadLogModelextendsModel{useHasFactory;//定义关联的数据表......
  • Electron 和 React 开发桌面应用程序
    目录书籍推荐ElectronReact在线资源和教程官方文档在线教程综合学习路径经典开发案例VisualStudioCodeHyperTuskNotableBeekeeperStudio开源项目和示例代码ElectronReactBoilerplateElectronForge+ReactElectronReactTemplate学习和实践使用El......
  • 在MySQL中 Truncate Delect Drop 的区别
    在MySQL中TruncateDelectDrop的区别 面试问题:----请详细描述MySQL中TRUNCATETABLE、DELETEFROM和DROPTABLE三个命令的区别,包括它们的作用、性能影响、事务日志的生成以及对表结构和触发器的影响。----回答:----在MySQL中,TRUNCATETABLE、DELETEFROM和DRO......
  • selenium ValueError: Timeout value connect was <object object at 0x0000022273034
    Traceback(mostrecentcalllast):File"E:\01_pycharmProject\hengyi\img_split\get_urls_bySel.py",line24,indriver=webdriver.Chrome(options=option)原因:selenium与urllib版本不匹配原selenium版本为4.1.3,urllib为2.2.2,并将chromedriver.exe更新到python/sc......
  • R语言数据可视化:使用ggplot2的geom_mark_ellipse函数圈定特定的数据簇或组
    在数据分析和可视化领域,R语言是一个非常受欢迎的工具,而ggplot2包则是R语言中最常用的数据可视化包之一,ggplot2包提供了丰富的函数和选项,用于创建高质量的统计图形,其中geom_mark_ellipse函数是一个强大的工具,可以用于圈定特定的数据簇或组,并突出显示它们的位置和关系。为了演示......
  • 需要帮助使用 Selenium Python 单击 Microsoft Teams 按钮
    我将Python与Selenium结合使用,并自动登录MicrosoftTeams。进入后,弹出窗口显示我需要单击“立即切换”以切换到V2版本。我似乎无法使用SeleniumPython成功单击此按钮。谁能帮我自动点击这个按钮?这是我不成功的尝试:self.driver.find_element(By.CLASS_NAME,......
  • Elasticsearch--索引管理
    作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬学习必须往深处挖,挖的越深,基础越扎实!阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • Elasticsearch--索引映射管理
    作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬学习必须往深处挖,挖的越深,基础越扎实!阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • Elasticsearch--索引别名
    作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬学习必须往深处挖,挖的越深,基础越扎实!阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • 无法序列化 HighLevelGraph 类型的对象
    我编写的代码如下,importdask.arrayasdafromdistributedimportClientremote_server='localhost:8786'client=Client(remote_server)rows,cols=4123,4123chunk_rows,chunk_cols=1024,1024matrix1=da.random.random(size=(rows,cols),chun......