el-carousel更新时，当前页总会跑到最后一页

Ybittersweet

已于 2023-05-19 13:58:17 修改

阅读量510

点赞数

CC 4.0 BY-SA版权

分类专栏：组件文章标签： javascript vue.js 前端

于 2023-03-22 10:19:42 首次发布

本文链接：https://blog.csdn.net/Ybittersweet/article/details/129681432

组件专栏收录该内容

8 篇文章

订阅专栏

文章描述了一个关于前端页面中el-carousel组件在保存后总是跳转到最后一页的bug。后端发现这个问题并提供了详细的情景，涉及到的代码部分包括carousel的事件绑定和数据更新。解决方案可能集中在正确设置和同步carousel的当前索引与表单数据上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端向前端提的bug

当前页保存后，总会跑到最后一页去，

获取当前索引

<el-carousel :autoplay='false' indicator-position='outside' trigger="click" arrow="always" @change="updateIndex">
      <el-carousel-item v-for="(form, index) in formList" :key="index">
      </el-carousel-item>
    </el-carousel>
    data(){
       currentIndex: 0,
    }
     updateIndex(num) {
      this.currentIndex = num;
      this.init()
    },

将表单索引值==el-carousel当前索引值

  async init() {
      const { data } = await GetFormData({ taskId: this.conditions.remark01, formName: this.formTableName })
      // 如果没有数据就清空form，重新加载
      if (data.data.length == 0) {
        this.getFrom()
        this.formList = []
        this.flag = true
        this.formList.push(this.form)
        return false
      }
      if (data.statusCode == 200) {
        this.flag = false
        // 获取到当前的表单
        data.data.forEach((el, index) => {
          if (this.currentIndex == index) {
            this.form = el.value
            this.form.id = el.id
          }
        })
           // 生成新的列表
          const values = data.data.map(item => item.value)
          this.formList = values
          console.log(  this.form ,"  this.form ");
          console.log("formList",this.formList);
      }

    },