a-table 定时平滑轮播组件

效果图：

实现代码如下：

<template>

  <div class="scroll-container" @mouseenter="stopScroll" @mouseleave="startScroll">

    <a-table

      :columns="columns"

      :data-source="visibleData"

      :pagination="false"

      :scroll="{ y: '300px' }"

      row-class-name="scroll-row"

      ref="tableRef"

    >

      <template #bodyCell="{ column, record, text }">

        <span>{{ text }}</span>

      </template>

      <template #headerCell="{ column }">

        <span>{{ column.title }}</span>

      </template>

    </a-table>

  </div>

</template>



<script setup lang="ts">

import { ref, onMounted, onBeforeUnmount } from "vue";



// 定义表格列

const columns = [

  { title: "序号", dataIndex: "index", key: "index", width: "10%" },

  { title: "名称", dataIndex: "projectName", key: "projectName", width: "30%" },

  { title: "国别", dataIndex: "projectCountry", key: "projectCountry", width: "15%" },

  { title: "总部", dataIndex: "region", key: "region", width: "15%" },

  { title: "单位", dataIndex: "orgName", key: "orgName", width: "15%" },

  { title: "经理", dataIndex: "projectManager", key: "projectManager", width: "15%" },

];



const dataSource = ref([

  {

    index: 1,

    projectName: "项目A",

    projectCountry: "中国",

    region: "华东",

    orgName: "组织A",

    projectManager: "经理A",

  },

  {

    index: 2,

    projectName: "项目B",

    projectCountry: "美国",

    region: "西部",

    orgName: "组织B",

    projectManager: "经理B",

  },

  {

    index: 3,

    projectName: "项目C",

    projectCountry: "德国",

    region: "北部",

    orgName: "组织C",

    projectManager: "经理C",

  },

  {

    index: 4,

    projectName: "项目D",

    projectCountry: "法国",

    region: "南部",

    orgName: "组织D",

    projectManager: "经理D",

  },

  {

    index: 5,

    projectName: "项目D",

    projectCountry: "法国",

    region: "南部",

    orgName: "组织D",

    projectManager: "经理D",

  },

  {

    index: 6,

    projectName: "项目D",

    projectCountry: "法国",

    region: "南部",

    orgName: "组织D",

    projectManager: "经理D",

  },

  {

    index: 7,

    projectName: "项目D",

    projectCountry: "法国",

    region: "南部",

    orgName: "组织D",

    projectManager: "经理D",

  },

  {

    index: 8,

    projectName: "项目D",

    projectCountry: "法国",

    region: "南部",

    orgName: "组织D",

    projectManager: "经理D",

  },

  // 添加更多数据以测试滚动效果

]);



const visibleData = ref([...dataSource.value]);

const tableRef = ref(null);

let scrollInterval: any = null;



// 启动滚动

const startScroll = () => {

  if (scrollInterval) return;

  scrollInterval = setInterval(() => {

    if (tableRef.value) {

      const tbody = tableRef.value!.$el.querySelector("tbody") as HTMLElement;

      const rows = Array.from(tbody.querySelectorAll("tr.scroll-row"));

      console.log(rows, "22222222222222");



      if (rows.length === 0) return;



      const firstRow = rows[0] as HTMLElement;

      const rowHeight = firstRow ? firstRow.offsetHeight : 0;



      // 启动动画

      tbody.style.transition = "transform 0.6s ease-in-out";

      tbody.style.transform = `translateY(-${rowHeight}px)`;



      setTimeout(() => {

        tbody.style.transition = "none";

        tbody.style.transform = "translateY(0)";

        if (firstRow) {

          tbody.appendChild(firstRow); // 将第一行移动到最后

        }

      }, 600); // 时间要与 transition 一致

    }

  }, 3000); // 每13秒滚动一次

};



// 停止滚动

const stopScroll = () => {

  if (scrollInterval) {

    clearInterval(scrollInterval);

    scrollInterval = null;

  }

};



onMounted(() => {

  startScroll();

});



onBeforeUnmount(() => {

  stopScroll();

});

</script>



<style scoped lang="less">

.scroll-container {

  // overflow: hidden;

  position: relative;

  height: 300px; /* 根据需要调整容器高度 */

}



.ant-table {

  width: 100%;

  border-collapse: collapse;

}



.ant-table thead {

  position: sticky;

  top: 0;

  background-color: #fff;

  z-index: 1; /* 确保表头层级高于内容 */

}



.ant-table tbody {

  display: block;

  max-height: 300px; /* 确保 tbody 的高度 */

  overflow-y: auto; /* 使 tbody 可滚动 */

}



.ant-table tbody tr {

  display: table;

  width: 100%;

  table-layout: fixed;

}



.scroll-row {

  // transition: transform 0.6s ease-in-out;

  // min-height: 48px; /* 根据需要设置每行的最小高度 */

  background: red;

}



.ant-table tbody tr:nth-child(odd) {

  background-color: #f9f9f9;

}



.ant-table tbody tr:nth-child(even) {

  background-color: #fff;

}

</style>