vue3 表格无限滚动

最新推荐文章于 2024-05-21 09:09:30 发布

LUNA~

最新推荐文章于 2024-05-21 09:09:30 发布

阅读量501

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/CMDN123456/article/details/131824871

版权

此代码示例展示了如何在Vue.js应用中创建一个带有滚动功能的表格，动态加载数据并实现鼠标悬停时停止滚动的效果。表格数据是通过getTableData函数生成的模拟数据，并在组件挂载后赋值给tableData。同时，通过事件监听来控制表格的滚动行为。

摘要由CSDN通过智能技术生成

可直接复制使用

<template>
  <div>
    <el-table
      ref="tableRef"
      :data="tableData"
      height="170"
      class="rollTableRow"
    >
      <el-table-column
        prop="date"
        label="Date"
        width="180"
      />
      <el-table-column
        prop="name"
        label="Name"
        width="180"
      />
      <el-table-column
        prop="address"
        label="aa"
      />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, Ref } from "vue";
const tableRef: Ref<HTMLElement | any> = ref(null); //表格实例
const tableData = ref<any[]>([]); //定义表格list
//表格测试数据
const getTableData = (): any => {
  let data = [];
  for (var i = 0; i <= 50; i++) {
    data.push({
      date: i,
      name: `Tom${i}`,
      address: `地区${i}`,
    });
  }
  return data;
};

onMounted(() => {
  tableData.value = getTableData(); //表格数据赋值
  scroll(tableRef.value.$refs.bodyWrapper); //设置滚动
});

const scroll = (tableBody: any) => {
  let isScroll = true; //滚动
  const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];

  //鼠标放上去，停止滚动；移开，继续滚动
  tableDom.addEventListener("mouseover", () => {
    isScroll = false;
  });
  tableDom.addEventListener("mouseout", () => {
    isScroll = true;
  });

  setInterval(() => {
    if (isScroll) {
      tableDom.scrollTop += 3; //设置滚动速度
      if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
        tableDom.scrollTop = 0;
      }
    }
  }, 100);
};
</script>


<style scoped>
/* ::v-deep .el-table__header {
  height: 3rem;
} */
/* 表头背景色及字体颜色 */
::v-deep .el-table th.el-table__cell {
  background-color: #1132aa;
  color: #09ccde;
}
/* 背景透明 */
::v-deep .el-table tr {
  /* background-color: #10274c; */
  background-color: transparent;

  color: #fff;
}
/* 表格背景透明 */
.rollTableRow {
  background: transparent;
}
/* 鼠标悬浮时 表格背景色及字体颜色 */
::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(65, 111, 180) !important;
  color: #ffffff;
}
</style>