【前端】可视化大屏项目中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属性，如果不使用深度选择器，那么样式就没法作用到目标容器上。
以上就是我解决这两个需求的办法，仅供大家参考~~~