vue项目el-table组件实现列表自动轮询滚动（vue-seamless-scroll）

1、效果图

2、具体实现

1、需要配合vue-seamless-scroll插件

npm install vue-seamless-scroll --save

2、可以全局注册也可以局部注册（以下我是全局注册—在main.js如下操作）

import vueSeamlessScroll from 'vue-seamless-scroll' // 循环滚动
Vue.use(vueSeamlessScroll)

3、具体代码

html

<template>
  <div class="scroll_table">
    <div style="display: inline-block; width: 100%">
      <el-table :data="tableList" class="table">
        <el-table-column
          v-for="(item,index) in columns"
          :key="index+'i'"
          :label="item.label"
          :prop="item.prop"
        />
      </el-table>
      <vue-seamless-scroll
        :data="tableList"
        class="seamless-warp"
        style="width: 100%"
        :class-option="classOption"
      >
        <el-table :data="tableList" class="table_scroll">
          <el-table-column
            v-for="(item,index) in columns"
            :key="index+'i'"
            :label="item.label"
            :prop="item.prop"
          />
        </el-table>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

js

<script>
export default {
  name: "ScrollTable",
  data () {
    return {
      columns: [
        { prop: 'name', label: '姓名', minWidth: '100', sort: true },
        { prop: 'date', label: '日期', minWidth: '180', sort: true },
        { prop: 'age', label: '年龄', minWidth: '180', sort: true },
        { prop: 'status', label: '状态', minWidth: '180', sort: true },
        { prop: 'address', label: '地址', minWidth: '220', sort: true }
      ],
      tableList: [
        {
          id: '1',
          date: '2019-09-25',
          name: '张三',
          status: '待处理',
          age: 18,
          address: '广东省广州市天河区'
        },
        {
          id: '2',
          date: '2019-09-26',
          name: '李四',
          age: 19,
          status: '已处理',
          address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
        },
        {
          id: '3',
          date: '2019-09-27',
          name: '王五',
          age: 20,
          status: '已完成',
          address: '广东省广州市天河区3'
        },
        {
          id: '3',
          date: '2019-09-27',
          name: '赵六',
          age: 20,
          status: '已完成',
          address: '广东省广州市天河区3'
        }
      ]
    }
  },
  computed: {
    classOption () {
      return {
        step: 0.8, // 数值越大速度滚动越快
        limitMoveNum: this.tableList.length, // 开始无缝滚动的数据量 this.tableList
        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>

css（着重注意样式）

<style lang="scss" scoped>
.scroll_table {
  margin: 15px;
  display: flex;
  ::v-deep .table .el-table__body-wrapper {
    display: none;
  }
  // 重点注意这段样式
  .seamless-warp {
    height: 200px;
    overflow: hidden;
    ::v-deep .table_scroll .el-table__header-wrapper {
      display: none;
    }
  }
}
</style>

相关文章

基于ElementUi再次封装基础组件文档

---

vue+element-ui的table组件二次封装

---

gitHub组件地址

---

gitee码云组件地址