vue中实现自动滚动表格

 vue-seamless-scroll官方说明文档：github.com/chenxuan000…

插件在线demo：chenxuan1993.gitee.io/component-d…

demo演示的都是文本形式的数据，但是需求是表格做成自动滚动。直接套上去会出现表头也被滚动的现象，所以此处用了个小技巧：上面使用一个表格，只取表头部分，下面用vue-seamless-scroll包裹一个表格，只取tbody部分。

下面看关键代码：

 <section>
 
    <el-table :data="Data" class="custom-table-2 hidden-tbody">
      <el-table-column prop="fileName" label="文件名"></el-table-column>
      <el-table-column prop="keywords" label="关键词"></el-table-column>
      <el-table-column prop="dealStatus" label="处理状态"></el-table-column>
      <el-table-column prop="time" label="时间"></el-table-column>
    </el-table>
 
    <vueSeamless :data="Data" class="auto-scorll-table">
      <el-table :data="Data" class="custom-table-2 hidden-thead">
        <el-table-column prop="fileName" label="文件名"></el-table-column>
        <el-table-column prop="keywords" label="关键词"></el-table-column>
        <el-table-column prop="dealStatus" label="处理状态"></el-table-column>   
        <el-table-column prop="time" label="时间"></el-table-column>
      </el-table>
    </vueSeamless>
 
  </section>

需要样式上的配合，隐藏两个表格的对应部分：

<style lang="scss" scope>
 .hidden-tbody.el-table {
    height: 34px;
    box-sizing: border-box;
    tbody { //隐藏上面表格的tbody
      display: none;
      overflow: hidden;
    }
  }
  .auto-scorll-table {
    height: calc(100% - 34px);
    overflow: hidden;
  }
  .hidden-thead.el-table {
    border-top: none; //防止边框重叠
    thead { //隐藏下面表格的thead
      display: none;
      overflow: hidden;
    }
  }
</style>