el-table表格通过vue-seamless-scroll实现表格滚动(html + Vue + Element-UI)

要实现无缝滚动的表格，可以使用vue-seamless-scroll组件。以下是一个简单的例子，展示如何结合Element UI的el-table和vue-seamless-scroll实现无缝滚动的表格。

首先，确保你已经安装了vue-seamless-scroll：

npm install vue-seamless-scroll --save

然后，在你的Vue组件中使用它：

<template>
  <div>
    <vue-seamless-scroll :data="tableData" class="table-wrapper">
      <el-table :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-table>
    </vue-seamless-scroll>
  </div>
</template>
 
<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
 
export default {
  components: {
    VueSeamlessScroll
  },
  data() {
    return {
      tableData: [
        // ... 填充你的数据
      ]
    }
  }
}
</script>
 
<style>
.table-wrapper {
  height: 300px;
  overflow: hidden;
}
</style>

在这个例子中，vue-seamless-scroll组件被用作el-table的容器，并通过CSS设置了固定的高度来模拟滚动。tableData是你要展示的数据数组，它应该与el-table的:data属性相对应。

请注意，vue-seamless-scroll需要正确的DOM结构才能工作，因此它应该包裹整个表格内容，并且表格的宽度应该是100%。

这个例子提供了一个基本的框架，你可以根据自己的需求进一步调整样式和行为。