【Element】el-table-v2 虚拟化表格使用+大屏自动滚动-CSDN博客

本文链接：https://blog.csdn.net/IAIPython/article/details/132180762

本文介绍了如何使用Vue.js和ElementUI的el-table-v2组件动态生成列头，并实现表格的自动滚动功能，同时展示了相关的CSS样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
  <el-table-v2
    ref="tableRef"
    :columns="columns"
    :data="tableData"
    :width="width"
    :height="height"
    :estimated-row-height="28"
    :header-height="28"
  />
</template>

<script setup lang="ts">
import { ref, watchEffect, nextTick } from 'vue';
export interface TableHeader {
  prop: string;
  label: string;
  width?: number;
}
interface Props {
  tableHeader: TableHeader[];
  tableData?: any;
}
const height = document.getElementsByClassName('content-slot')[0].clientHeight;
const width = document.getElementsByClassName('content-slot')[0].clientWidth;
const columns = ref([]);
watchEffect(() => {
  if (!props.tableData || props.tableData.length === 0) return;
  const generateColumns = (header: TableHeader[]) =>
    Array.from({ length: header.length }).map((_, columnIndex) => ({
      ...props,
      key: `${header[columnIndex].prop}-${columnIndex}`,
      dataKey: header[columnIndex].prop,
      title: header[columnIndex].label,
      width: header[columnIndex].width || 150,
    }));
  columns.value = generateColumns(props.tableHeader);
  nextTick(() => {
    scroll();
  });
});

const props = defineProps<Props>();
const tableRef = ref(null);
// 自动滚动
const scroll = () => {
  let isScroll = true;
  const scrollWrapper = tableRef.value?.$el.querySelector('.el-vl__wrapper')
    .firstChild as HTMLElement;

  // 鼠标放上去，停止滚动；移开，继续滚动
  scrollWrapper.addEventListener('mouseover', () => {
    isScroll = false;
  });
  scrollWrapper.addEventListener('mouseout', () => {
    isScroll = true;
  });
  setInterval(() => {
    if (isScroll) {
      scrollWrapper.scrollTop += 1; // 设置滚动速度
      if (
        scrollWrapper.clientHeight + scrollWrapper.scrollTop ==
        scrollWrapper.scrollHeight
      ) {
        scrollWrapper.scrollTop = 0;
      }
    }
  }, 100);
};
</script>
<style lang="scss">
.el-table-v2 {
  --el-bg-color: transparent;

  .el-table-v2__header-row {
    border: none;
    background: #395696;
  }
  .el-table-v2__header-cell {
    font-size: 14px;
    color: #29f8ff;
    line-height: 30px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    font-weight: 500;
    border-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-table-v2__row-cell {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    border-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-table-v2__row {
    background-color: rgba(55, 79, 120, 0.39) !important;
    border: none;
    &:nth-child(even) {
      background-color: transparent !important;
    }
  }
  .el-table-v2__cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}