vue实现表格轮播

bash 复制代码

<template>
  <!-- 省略其他代码 -->
  <el-col :span="7">
    <div class="mb-20">
      <div class="station_box">
        <div class="show_title"><span class="title_name">焊接设备实时信息</span></div>
        <div class="height300" style="padding: 0px 15px;">
          <div class="infotb">
            <div class="disinline_block th tbcontent">
              <div class="name p11">机器人</div>
              <div class="p11">链接状态</div>
              <div class="p11">操作模式</div>
              <div class="p11">运行状态</div>
              <div class="p6">速度倍率</div>
              <div class="p11">加工节拍</div>
            </div>
            <!-- 修改这里：只显示currentRightTbData中的数据 -->
            <div class="disinline_block tbcontent" v-for="item in currentRightTbData" :key="item.name">
              <div class="name p11">{{ item.name }}</div>
              <div class="p11">{{ item.ljzhuangtai }}</div>
              <div class="p11">{{ item.moshi }}</div>
              <div class="p11">{{ item.yxzhuangtai }}</div>
              <div class="p11">{{ item.beilv }}</div>
              <div class="p11">{{ item.jiepai }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-col>
  <!-- 省略其他代码 -->
</template>

<script>
export default {
  name: 'bulletinboard',
  data() {
    return {
      // 省略其他数据...
      rightTbIndex: 0, // 当前显示的起始索引
      rightTbInterval: null, // 轮播定时器
    }
  },
  computed: {
    // 计算当前要显示的表格数据（每次两条）
    currentRightTbData() {
      const start = this.rightTbIndex;
      const end = Math.min(start + 2, this.righttbdata.length);
      return this.righttbdata.slice(start, end);
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.rightTbInterval) {
      clearInterval(this.rightTbInterval);
    }
    // 省略其他清理代码...
  },
  mounted() {
    // 初始化轮播
    this.startRightTbCarousel();
    // 省略其他初始化代码...
  },
  methods: {
    // 启动右侧表格数据轮播
   startRightTbCarousel() {
            this.rightTbInterval = setInterval(() => {
                // 计算下一次的起始索引
                const nextIndex = this.rightTbIndex + 4;
                
                // 如果下一次会超出数据范围，则回到开头
                if (nextIndex >= this.righttbdata.length) {
                    this.rightTbIndex = 0;
                } else {
                    this.rightTbIndex = nextIndex;
                }
            }, 3000); // 每3秒切换一次
        },
    // 省略其他方法...
  }
}
</script>

bash 复制代码

rightTbIndex: 0, // 当前显示的起始索引
            rightTbInterval: null, // 轮播定时器
            righttbdata:[
                {
                    "name":"A",
                    "ljzhuangtai":"联机",
                    "moshi":"自动",
                    "yxzhuangtai":'待机',
                    "beilv":"100%",
                    "jiepai":"2651.35s",
                },
                {
                    "name":"B",
                    "ljzhuangtai":"联机",
                    "moshi":"自动",
                    "yxzhuangtai":'待机',
                    "beilv":"100%",
                    "jiepai":"2651.35s",
                },
                ]