<el-table

                  ref="table"

                  :data="tableData"

                  :header-cell-style="{background: '#F0F2F7', color: '#606266'}"

                  @cell-mouse-enter="mouseEnter"

                  @cell-mouse-leave="mouseLeave"

                  @row-click="handRowClick"

                >

                  <el-table-column

                    align="center"

                    type="index"

                    width="50"

                    label="序号"

                  >

                  </el-table-column>

                  <el-table-column

                    align="center"

                    prop="metadataName"

                    label="元数据名称"

                    show-overflow-tooltip

                  >

                  </el-table-column>

                  <el-table-column

                    align="center"

                    prop="metadataCode"

                    label="元数据代码"

                    show-overflow-tooltip

                  >

                  </el-table-column>

                  <el-table-column

                    align="center"

                    prop="createTime"

                    label="发布时间"

                    width="140"

                  >

                  </el-table-column>

                </el-table>        
    // table自动滚动

    handScroll() {

      const table = this.$refs.table

      const divData = table.bodyWrapper

      this.tableInterval = setInterval(() => {

        divData.scrollTop += 3

        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {

          divData.scrollTop = 0

        }

      }, 200)

    },

    //鼠标移入

    mouseEnter() {

      clearInterval(this.tableInterval)

      this.tableInterval = null

    },

    //鼠标移出

    mouseLeave() {

      this.handScroll()

    },

vue table表格实现无缝滚动 鼠标进入可悬停的更多相关文章

  1. table表格数据无缝循环滚动

    分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox">              ...

  2. vue实现消息的无缝滚动效果

    export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军" ...

  3. table表格的无缝循环

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue table表格form表单校验输入内容，elment ui table内容校验 form表单input验证

    //html 部分<el-form :model="formObj" :rules="rules"> <el-table :data=&quo ...

  5. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...

  6. js实现表格无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结

    最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...

  8. vue无缝滚动的插件开发填坑分享

    写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...

  9. 基于vue的无缝滚动组件

    vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...

  10. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

随机推荐

  1. ProxyKit服务器http反向代理应用

    方法一:这个方法很漂亮,但是,有问题,不知道什么原因,cookie偶尔会收不到,而造成验证错误,提交内容也会错误 扩展类: public class MyTypedHandler : IProxyHa ...

  2. 适用于linux的bilibiliB站直播间弹幕爬虫脚本

    适用于linux的bilibiliB站直播间弹幕爬虫脚本,命令行运行之,输入到命令行,部分内容参考自网络,代码底部可见原始代码出处 BUFF:然而,经测试,每次爬只能读取10条弹幕记录,这就使得在(s ...

  3. Java常用的三个方法 `wait ` `notify` `notifyAll`

    常用的三个方法 wait notify notifyAll wait();方法使当前线程进入等待状态,直到另一个线程调用该对象的notify()或notifyAll()方法来唤醒它 notify(); ...

  4. CF437E The Child and Polygon

    The Child and Polygon 题解 这世界这么大,遇到了这个奇奇怪怪的题. 这道题其实可以很自然的联想到卡特兰数. 在卡特兰数的计数中,有这么一个意义:\(C_n\) 表示把有 \(n+ ...

  5. xv6 的锁机制

    LOCK 公众号:Rand_cs 锁,大家应该很熟悉了,用来避免竞争,实现同步.本文以 xv6 为例来讲解锁本身是怎么实现的,废话不多说,先来看一些需要了解的概念: 一些概念 公共资源:顾名思义就是被 ...

  6. CompatTelRunner CPU 占用 22% win10 笔记本常常无故风扇狂转

    CompatTelRunner CPU 占用 22% win10 笔记本常常无故风扇狂转 CompatTelRunner.exe is also known as Windows Compatibil ...

  7. 通过JS来触发<a>链接来实现图片下载

    function downloadImg(){ var url = '实际情况的图片URL'; // 获取图片地址 var a = document.createElement('a'); // 创建 ...

  8. C#字符串截取分割方法

    字符串操作:分割 Split.连接数组 Join.拼接 Format.截取 Substring.替换 Replace.左填充 PadLeft.右填充 PadRight.删除 Remove 1 //分割 ...

  9. ftl生成模板并从前台下载

    1.生成模板的工具类 package com.jesims.busfundcallnew.util; import freemarker.template.Configuration; import ...

  10. 用Tensorboard在VScode Remote ssh中显示图像

    可以用Tensorboard在vscode的ssh连接中显示plot出的图像. 具体方法如下: from torch.utils.tensorboard import SummaryWriter wr ...