【前端】可视化大屏项目中Antd的table组件实现自动滚动和自定义斑马纹颜色

一、需求

在做前端可视化大屏项目的时候除了使用echarts绘制图表之外还需要很多表格展示数据，现有两个需求：
1、需要将表格内容实现自动滚动的效果；

2、表格是带斑马纹的，并且颜色需要自定义。
以下是我实现该功能的方法，希望对大家有所帮助！！！

二、代码展示

1、表格自动滚动逻辑代码

<template>   <a-table     class="ant-table-striped"     :columns="columns"     :data-source="dataSourse"     ref="gateCloseTable"     :pagination="false"     :scroll="{ y: '14rem' }"     size="small"     :row-class-name="       (record, index) => (index % 2 === 0 ? 'table-striped-1' : null)     "   /> </template>  <script setup> import { ref, watch, onUnmounted } from "vue"; const dataSourse = ref([]);//表格数据 const gateCloseTable = ref(null);//获取表格实例  const scrollTimer = ref(null); const delayTimer = ref(null);  const columns = ref([   {     title: "开始公里标",     dataIndex: "kilometerSignStart",   },   {     title: "结束公里标",     dataIndex: "kilometerSignEnd",   },   {     title: "操纵类别",     dataIndex: "manipulateType",   },   {     title: "操纵结果",     dataIndex: "operationResult",     width: "8.125rem",   }, ]);  // 实现自动滚动的逻辑 const autoScrollTable = () => {   //清除之前的定时器   if (scrollTimer.value) {     clearInterval(scrollTimer.value);   }   let status = true;//设置一个标识，控制表格的滚动和不滚动两种状态   let isScrollingToTop = false;//是否滚动到顶部   let table = gateCloseTable.value.$el.querySelector(".ant-table-body");   // 鼠标移入停止滚动   table.addEventListener("mouseover", () => {     status = false;   });   // 鼠标移出恢复滚动   table.addEventListener("mouseout", () => {     status = true;   });   const scrollStep = 1; // 每次滚动的步长   const scrollInterval = 45; // 滚动间隔时间   const scrollAmount = 2; // 每次滚动的距离   scrollTimer.value = setInterval(() => {     if (status) {       table.scrollBy(0, scrollStep);       // 当滚动到底部时修改scrollTop回到顶部       if (         table.scrollHeight - (table.clientHeight + table.scrollTop) <         scrollAmount       ) {         if (!isScrollingToTop) {           isScrollingToTop = true;           table.scroll(0, 0);           delayTimer.value = setTimeout(() => {             isScrollingToTop = false;           }, 100);         }       }     }   }, scrollInterval); };  onUnmounted(() => {   clearInterval(scrollTimer.value);   clearTimeout(delayTimer.value);   scrollTimer.value = null;   delayTimer.value = null; }); </script> 

2、自定义表格斑马纹颜色

<style lang="scss" scoped> .ant-table-striped :deep(.table-striped-1) td {   background-color: #b8741a; }  :deep(.ant-table-small) {   font-size: 1rem;   background-color: #154397;   color: #fff;   font-size: 1rem;   cursor: pointer; }  :deep(.ant-table-small .ant-table-thead > tr > th) {   text-align: center;   background-color: #154397;   color: #fff;   font-size: 1rem; }  //鼠标划过样式 :deep(     .ant-table .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td   ) {   background: #4b7902; }  :deep(.ant-table-tbody > tr > td.ant-table-cell-row-hover) {   background: #4b7902; }  //隐藏滚动条 :deep(     .ant-table-body::-webkit-scrollbar,     .ant-list.ant-list-sm.ant-list-split.ant-list-bordered.event-list::-webkit-scrollbar   ) {   display: none; }  //表格数据为空时的样式 :deep(.ant-empty-normal) {   color: #fff;   font-size: 1rem;   height: 8.3rem; } </style>

三、总结

大家可能对有些方法的使用不是很清楚，我简单做下解释：
1、在写滚动逻辑的时候，用到了xxx.scrollBy()的方法，这个方法是JavaScript中window对象的一种方法，可以在获取某个容器之后，指定像素数目，让其以指定的像素数目滚动窗口的内容。
2、在对表格的样式进行更改的时候，用到了:deep()深度选择器，目的是为了让自定义的样式作用到组件内部中，因为我们在vue项目中采用的是组件化开发，在写css样式的时候都有scoped属性，如果不使用深度选择器，那么样式就没法作用到目标容器上。
以上就是我解决这两个需求的办法，仅供大家参考~~~