vue element ui table 自动无限滚动组件

<template>

  <el-table

    class="tableList"

    ref="rw_table"

    height="700"

    solt="append"

    :data="useData"

    :row-class-name="tableRowClassName"

    @cell-mouse-enter="mouseEnter"

    @cell-mouse-leave="mouseLeave"

  >

    <el-table-column

      prop="username"

      label="姓名"

    />

    </el-table-column>

    <el-table-column

      label="备注"

    >

      <template slot-scope="scope">

        <span>{{ getNote(scope.row) }}</span>

      </template>

    </el-table-column>

  </el-table>

</template>

 

<script>

export default {

  name: 'TableObj',

  props:{

    tableData:{

      type: Array,

      default:()=>{

        return []

      }

    }

 

  },

  data () {

    return {

      useData:[],

      autoPlay:false,

      timer:undefined

    }

  },

  watch:{

    tableData:{

      deep:true,

      handler(v){

        if(v&&v.length){

          this.startRolling = false

          let data = []

          for(let i in v){

            data.push(v[i])

          }

          this.useData = data

          this.autoPlay = true

          this.startMove()

        }

      }

    }

  },

  methods: {

    // 鼠标进入

    mouseEnter() {

      this.autoPlay = false

    },

    // 鼠标离开

    mouseLeave() {

      this.autoPlay = true

    },

    startMove(){

      // 拿到表格挂载后的真实DOM

      const table = this.$refs.rw_table

      if(table){

        // 拿到表格中承载数据的div元素

        const divData = table.bodyWrapper

        if(divData){

          if(this.timer){

            clearInterval(this.timer)

          }

          // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)

          this.timer = setInterval(() => {

            if(this.autoPlay){

              // 元素自增距离顶部1像素

              if(divData.scrollTop>=48){

                const item = this.useData.shift();

                this.useData.push(item)

                divData.scrollTop-=48

              }

              divData.scrollTop += 1

            }

          }, 50)

        }

      }

    },

    getStatus(row){

      let status = ''

      if(row.workType){

        switch(row.workType){

          case 1:

            status = `在岗`;

            if(row.workplace){

              status +=`(${row.workplace})`

            }

            break;

      }

 

      return status;

    },

    getNote(row){

      let not = ''

      if(row.workType!==1&&row.handoverName){

        not = `工作交接${row.handoverName}`

        if(row.handoverPos){

          not += ` (${row.handoverPos})`

        }

      }

      return not

    },

    tableRowClassName({row}) {

      let className = ''

      if(row.workType){

        switch(row.workType){

          case 1:

            className = 'onJob';

            break;

        }

      }

 

      return className;

    }

  }

}

</script>