elementUI el-table内容自动滚动方案 vue-seamless-scroll

在Vue中使用vue-seamless-scroll实现ElementUI的el-table内容自动滚动，可以通过以下步骤进行：

1. 安装vue-seamless-scroll：

npm install vue-seamless-scroll --save

2. 在Vue组件中引入并使用vue-seamless-scroll：

<template>
  <div class="table-container">
    <vue-seamless-scroll :class="{ 'seamless-warp': true }" :data="tableData">
      <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: [
        // 数据列表
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ...更多数据
      ],
    }
  }
}
</script>
 
<style scoped>
.table-container {
  height: 300px; /* 根据需要设置高度 */
  overflow: hidden;
}
.seamless-warp {
  height: 100%;
}
</style>

在上述代码中，我们创建了一个带有滚动效果的表格。vue-seamless-scroll组件用来处理滚动，而el-table则用来展示表格内容。需要注意的是，确保.table-container的高度足以支持滚动效果，并且.seamless-warp的高度设置为100%以填满容器。

这样，当你向tableData数组添加更多数据时，表格内容将会自动滚动显示。