vue表格滚动vue-seamless-scroll

引入  npm install vue-seamless-scroll --save 

 

在找到 main.js 引入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

　　

主要代码

<template>
  <div id="app">
    <div class="backround">
      <div class="toptitle">
        <div class="item">日期</div>
        <div class="item">标题</div>
        <div class="item">地址</div>
      </div>
      <vue-seamless-scroll  :data="listData"  :class-option="optionHover" class="seamless-warp">
        <el-table
          :data="listData"
          border
          :show-header="status"
        >
          <el-table-column
            prop="date"
            label="日期"
          >
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
          >
          </el-table-column>
          <el-table-column
            prop="test"
            label="地址"
          >
          </el-table-column>
        </el-table>
      </vue-seamless-scroll>
    </div>

  </div>

</template>


<script>
export default {
  data () {
    return {
      status:false,
      listData: [
        {
          'title': '无缝滚动第一行无缝滚动第一行',
          'date': '2017-12-16',
          'test':'测试',
          'test2':'测试2',
          'test3':'测试3'
        },
        {
          'title': '无缝滚动第二行无缝滚动第二行',
          'date': '2017-12-16',
          'test':'测试',
          'test2':'测试2',
          'test3':'测试3'
        },
        {
          'title': '无缝滚动第三行无缝滚动第三行',
          'date': '2017-12-16',
          'test':'测试',
          'test2':'测试2',
          'test3':'测试3'
        },
        {
          'title': '无缝滚动第四行无缝滚动第四行',
          'date': '2017-12-16',
          'test':'测试',
          'test2':'测试2',
          'test3':'测试3'
        },
        {
          'title': '无缝滚动第五行无缝滚动第五行',
          'date': '2017-12-16',
          'test':'测试',
          'test2':'测试2',
          'test3':'测试3'
        },
        {
          'title': '无缝滚动第六行无缝滚动第六行',
          'date': '2017-12-16',
          'test':'测试',
          'test2':'测试2',
          'test3':'测试3'
        },
        {
          'title': '无缝滚动第七行无缝滚动第七行',
          'date': '2017-12-16',
          'test':'测试',
          'test2':'测试2',
          'test3':'测试3'
        },
      ]
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)

      };
    },

  }
}
</script>
<style  scoped>
.backround{
  width: 100%;
  height: 200px;
  background-color: #000c17;
}
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;

}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
  color:white
}

.seamless-warp{
  height: 200px;
  overflow: hidden;

}
/deep/.el-table .cell{
  text-align: center;
}
/deep/.toptitle{
  width: 100%;
  display: flex;
  background-color: gainsboro;
  margin-bottom: 10px;
  border:2px solid gainsboro;
  background-color: transparent;
  color:white


}
.item{
  width: 33.3%;
  border-right:2px solid gainsboro;
  text-align: center;
}


</style>