表格内容循环播放的vue组件

子组件：可直接复制

<!-- 
    rows 数组，其中包含要在表格中循环播放的行数据
    visibleRows 数组用于存储当前可见的行数据
    初始时我们通过 loadInitialRows 方法加载了前5行数据每当定时器触发时，我们通过 loadNextRow 方法加载下一条数据，并将其添加到 visibleRows 数组中，同时将第一行数据从数组中移除，实现了循环播放的效果
 -->
 <template>
    <div class="table-wrapper">
      <table class="table">
        <thead>
          <tr>
            <th v-for="(column, key) in formattedColumns" :key="key">{{ column }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in visibleRows" :key="index" :class="getRowClass(index)" @click="handleRowClick(row)">
            <td v-for="key in rowKeys" :key="key">{{ row[key] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      rows: {
        type: Array,
        required: true,
      },
      columns: {
        type: Object,
        required: true,
      },
      maxVisibleRows: {
        type: Number,
        default: 5,
      },
    },
    data() {
      return {
        visibleRows: [],
        currentIndex: 0,
        intervalId: null,
      };
    },
    computed: {
      rowKeys() {
        return Object.keys(this.columns);
      },
      formattedColumns() {
        return this.rowKeys.map((key) => this.columns[key]);
      },
      currentRow() {
        return this.rows[this.currentIndex];
      },
      shouldLoadInitialRows() {
        return this.rows && this.columns && this.rows.length > 0 && Object.keys(this.columns).length > 0;
      },
    },
    watch: {
      rows() {
        this.currentIndex = 0;
        this.loadInitialRows();
      },
      columns() {
        this.loadInitialRows();
      },
    },
    mounted() {
      this.loadInitialRows();
      this.startInterval();
    },
    beforeDestroy() {
      this.stopInterval();
    },
    methods: {
        // 点击行时触发的方法，不需要删掉就行
        handleRowClick(row) {
            console.log('点击的行数据:', row);
            this.$emit('row-click', row);
            // 执行其他操作...
        },
        startInterval() {
            this.intervalId = setInterval(() => {
	            this.currentIndex = (this.currentIndex + 1) % this.rows.length;
	            this.loadNextRow();
            }, 2000);
        },
        stopInterval() {
            clearInterval(this.intervalId);
        },
        loadInitialRows() {
            if (this.shouldLoadInitialRows) {
	            const endIndex = Math.min(this.maxVisibleRows, this.rows.length);
	            this.visibleRows = this.rows.slice(0, endIndex);
            }
        },
        loadNextRow() {
            if (this.visibleRows.length < this.maxVisibleRows) {
            	this.visibleRows.push(this.currentRow);
            } else {
	            this.visibleRows.shift();
	            this.visibleRows.push(this.currentRow);
            }
        },
        getRowClass(index) {
            return index % 2 === 0 ? 'even-row' : 'odd-row';
        },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .table-wrapper {
    width: 100%;
    height: 100%;
    .table {
        width: 100%;
        height: 100%;
        font-size: 0.8vw;
        border-collapse: collapse;
        thead{
            color: #00FFFF;
            background: rgba(0,255,255,0.2);
        }
    }
    th,td {
        text-align: center;
        padding: 8px;
        height: 4vh;
        // border: 1px solid #ccc;
    }
    
    .even-row {
        background-color: rgba(255,255,0,0.1);
        color:#FFFF00 ;
    }
    
    .odd-row {
        // background-color: #ffffff;
        color: #FFFFFF;
    }
  }
  
  </style>

父组件：

<template>
  <div>
    <h1>循环播放表格内容</h1>
    <table-loop @row-click="handleRowClickFromChild" :rows="tableRows" :columns="tableColumns" :maxVisibleRows="6"></table-loop>
  </div>
</template>

<script>
import TableLoop from '@/components/TableLoop.vue';

export default {
  components: {
    TableLoop,
  },
  data() {
    return {
      //这块的数据可以在请求接口后赋值，子组件已经全部写好；
      /*
		res.data.result.records.map((item)=>{
          let obj ={id:item.id,name:item.name,age:item.age}
          this.tableRows.push(obj)
        })
	  */
      tableRows: [
        { id: 1, name: '张三', age: 30 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 35 },
        { id: 4, name: '赵六', age: 27 },
        { id: 5, name: '陈七', age: 40 },
        { id: 6, name: '刘八', age: 33 },
        { id: 7, name: '杨九', age: 29 },
        { id: 8, name: '吴十', age: 32 },
        { id: 9, name: '周十一', age: 38 },
      ],
      //这个可直接写死
      tableColumns: {
        id: '编号',
        name: '姓名',
        age: '年龄',
      },
    };
  },
  methods：{
    //如果需要点击每行数据则执行下面函数，不需要删掉就可以
    handleRowClickFromChild(row) {
       // 在父组件中接收子组件传递的参数
       console.log('从子组件接收到的参数:', row);
       // 执行其他操作...
     },	
  }
};
</script>