1.效果图

2.el-scroll-table 代码

基于vue2版本。

<template>
  <div class="el-scroll-table" ref="elScrollTable">
    <!-- 手动固定一个表头 -->
    <div class="el-scroll-table__header">
      <el-table v-bind="$attrs">
        <slot></slot>
      </el-table>
    </div>
    <!--设置鼠标移入移出，悬浮时表格暂停动画-->
    <div
      class="el-scroll-table__warp"
      @mouseover="pauseAnimation"
      @mouseout="resumeAnimation"
    >
      <el-table
        style="min-height: 100%"
        v-bind="$attrs"
        v-for="num in 2"
        ref="table"
        :key="num"
        :data="data"
        :class="{ 'el-scroll-table__animation': isScroll }"
        :style="tableScrollStyle"
        :show-header="false"
      >
        <slot></slot>
      </el-table>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    speed: {
      type: Number,
      default: 2.5,
    },
  },
  data() {
    return {
      isScroll: false,
    };
  },
  watch: {
    data() {
      this.getIsScroll();
    },
  },
  computed: {
    tableScrollStyle() {
      const { data, speed } = this;
      if (data.length === 0) {
        return;
      }
      return {
        "--s": (data.length * 2) / speed + "s",
      };
    },
  },
  mounted() {
    this.getIsScroll();
  },
  methods: {
    getIsScroll() {
      this.$nextTick(() => {
        const selectorHeight = (_) =>
          this.$refs.elScrollTable.querySelector(_).clientHeight;
        this.isScroll =
          selectorHeight(".el-scroll-table__warp .el-table__body-wrapper") >
          selectorHeight(".el-scroll-table__warp");
      });
    },
    pauseAnimation() {
      this.$refs.table.forEach((table) => {
        table.$el.style.animationPlayState = "paused";
      });
    },
    resumeAnimation() {
      this.$refs.table.forEach((table) => {
        table.$el.style.animationPlayState = "running";
      });
    },
  },
};
</script>
 
<style lang="less">
.el-scroll-table {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &__header {
    position: relative;
    z-index: 9999;

    .el-table__empty-block {
      display: none;
    }
  }

  &__warp {
    flex: 1;
    overflow: hidden;
  }

  &__animation {
    animation: scroll var(--s) infinite linear;
  }

  @keyframes scroll {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-100%);
    }
  }
}
</style>`

3.使用示例

该组件多了一个prop(speed)用来控制滚动速度，其余部分和el-table完全一致。

<template>
  <div id="app">
    <div style="height: 200px">
      <el-scroll-table :speed="2.5" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-scroll-table>
    </div>
  </div>
</template>

<script>
import ElScrollTable from "./ElScrollTable";
export default {
  name: "App",
  components: {
    ElScrollTable,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>