<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>

vue element ui table 自动无限滚动组件的更多相关文章

  1. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  2. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  3. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  4. Vue+element UI实现“回到顶部”按钮组件

    介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...

  5. vue + element ui table表格二次封装 常用功能

    因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...

  6. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  7. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  8. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  9. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  10. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

随机推荐

  1. CSS常用属性(2)

    (4) position(定位) fixed 一般用来写网页顶端的固定导航条,或者两侧的菜单. <!--对于块级标签来说加上position:fixed之后,该div就不会占一整行,一般需要手动 ...

  2. 转载:屎人-->诗人系列--码农之歌

    转贴经常关注的一个博主的文,感觉还挺有趣: https://goofegg.github.io/content.html?id=141 ************************** 这个系列第 ...

  3. Cesium给3dtileset中的每个瓦片添加一个billboard/label(六)

    2023-01-14 改了下思路,直接根据点击的位置转换为世界坐标系再添加label console.log(`鼠标点击位置为:${click.position}`); var cartesian = ...

  4. Avalonia 实现平滑拖动指定控件

    Avalonia 实现平滑拖动指定控件 1.创建一个UserControl控件,并且添加以下代码 using System; using Avalonia; using Avalonia.Contro ...

  5. 添加weui-miniprogram

    1.打开根目录 npm init npm install weui-miniprogram --save 2.打开project.config.json 设置 "packNpmManuall ...

  6. IDEA+java swing+MySQL配置

    1.建立一个java项目(不是空项目) 2.创建GUI Form(减少代码压力) 生成代码 出现了这个窗体 此时说明swing已经可用了 3.连接MySQL

  7. MySQL联合索引的创建规则

    1.索引应该按照最常用于查询的列的顺序创建.这样可以最大程度地提高查询性能. 2.如果查询中包含的列与索引中的列顺序不一致,则无法使用索引.因此,如果您有多个查询,每个查询都包含不同的列,那么最好为每 ...

  8. 导入zip文件解析

    /** * 导入压缩文件 * * @param file * @param charsetName * @param consumer */ public static void importZipF ...

  9. 爬虫下载rockchip的规格书

    #file-name: pdf_download.py import os import requests from bs4 import BeautifulSoup def download_fil ...

  10. 在stm32中使用printf

    记录使用printf的方法 1.配置GPIO GPIO_InitTypeDef GPIO_InitStruct; RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA ...