ElementUI多个表格自动滚动数据

最新推荐文章于 2024-07-11 00:15:48 发布
最新推荐文章于 2024-07-11 00:15:48 发布
阅读量2.2k 收藏 4
点赞数 2
分类专栏： 大前端 文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzzz121380/article/details/121397616
版权

ElementUI多个表格自动滚动数据（两个表格示例）

功能介绍：

实现表格动态循环滚动，当鼠标滑入暂停滚动，鼠标离开继续滚动(动图中不动的时候就是鼠标滑入)
在这里插入图片描述

模板部分代码：

 <el-row :gutter="24">
      <el-col :span="12">
        <center style="font-size: 24px">待验收项目提醒</center>
        <br/>
        <el-table :data="tableData1" border stripe style="width: 100%"  height="500"  @mouseenter.native="a(tableData1)"
                  @mouseleave.native="a(tableData1)">
          <el-table-column prop="name" label="项目名称" width="180"></el-table-column>
          <el-table-column prop="code" label="项目编码" width="180"></el-table-column>
          <el-table-column prop="PM" label="项目经理"></el-table-column>
          <el-table-column prop="planTime" label="计划验收时间"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <center style="font-size: 24px">待下单项目提醒</center>
        <br/>
        <el-table :data="tableData2" border stripe style="width: 100%"  height="500" @mouseenter.native="b(tableData2)"
                  @mouseleave.native="b(tableData2)">
          <el-table-column prop="name" label="项目名称" width="180"></el-table-column>
          <el-table-column prop="code" label="项目编码" width="180"></el-table-column>
          <el-table-column prop="PM" label="项目经理"></el-table-column>
          <el-table-column prop="planTime" label="计划验收时间"></el-table-column>
        </el-table>
      </el-col>
    </el-row>

data数据部分：

data(){
    return{
      tableData1:[],//待验收项目提醒页面展示数据
      tableData2:[],//待下单项目提醒页面展示数据   
      ss1:[],//待验收项目提醒临时存储区
      ss2:[], //待下单项目提醒临时存储区
      autoRoll1:false,
      autoRoll2:false,
    }
  },

methods方法部分：

methods:{
  init(){
      this.getData();
    },
  //每次鼠标滑入离开都会调用该方法（控制定时器开启关闭）
  a(array){
      console.log('hahh')
      let self=this
      self.ss1=[{
        name:'小米',
        code:'哈哈哈哈首先表示 ',
        PM:'张三',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/5/12"
      },{
        name:'小红',
        code:'12358964 ',
        PM:'里斯',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/4/12"
      },{
        name:'小米',
        code:'哈哈哈哈首先表示 ',
        PM:'王二',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/12/12"
      }]
        let arr=self.ss1;
      //定时器每隔1000毫秒调用一次此函数
      function bb(){
          //如果展示数组小于临时数组的长度，往展示数组添加元素
        if (array.length<arr.length) {
          array.unshift(arr[array.length])
        } else {//否则代表已经把临时数组元素全部显示出来了，循环播放，把数组中元素删掉剩下一个，再次一条一条添加
          array.splice(0,array.length-1)
        }
      }
      if(self.autoRoll1==true){//鼠标滑入：autoRoll为true
        clearInterval(self.timer1);
        self.autoRoll1=false;
      }else{//如果autoRoll为false代表没有启动定时器（）:初始化和鼠标离开为false
        self.timer1 = setInterval(bb,1000);
        self.autoRoll1=true;//初始化为false,然后为true，当鼠标滑入时为true
      }
    },
    b(array){
      let self=this
      self.ss2=[{
        name:'小米',
        code:'哈哈哈哈首先表示 ',
        PM:'张三',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/5/12"
      },{
        name:'小红',
        code:'12358964 ',
        PM:'里斯',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/4/12"
      },{
        name:'小米',
        code:'哈哈哈哈首先表示 ',
        PM:'王二',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/12/12"
      }]
      let arr=self.ss2;
      function bb(){
        if (array.length<arr.length) {
          array.unshift(arr[array.length])
          console.log(array.length)
        } else {
          array.splice(0,array.length-1)
        }
      }
      if(self.autoRoll2==true){
        clearInterval( self.timer2);
        self.autoRoll2=false;
      }else{
        self.timer2 = setInterval(bb,1000);
        self.autoRoll2=true;
      }
    },
    //获取两个表单数据
    getData(){
      this.a(this.tableData1)
      this.a(this.tableData2)
    },
}

mounted方法部分：

mounted() {
    this.init()
  },

注意：

（1）多个表单创建多个定时器，不能共用一个定时器

（2）定时器创建时使用this：this.timer2 = setInterval(bb, 1000);或self：self.timer2 = setInterval(bb, 1000);不然因为作用域问题，定时器会清除不掉

（3）判断两个表单鼠标滑入离开：需要两个标识符（共用标识符刚开始会错乱）

（4）以上相同的方法封装成一个函数

 tableMove(array,index){

      let self=this
      /*const BaseUrl = this.$util.getAjaxUrl('type_2')*/
      self.ss1=[{
        name:'小米',
        code:'哈哈哈哈首先表示 ',
        PM:'张三',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/5/12"
      },{
        name:'小红',
        code:'12358964 ',
        PM:'里斯',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/4/12"
      },{
        name:'小米',
        code:'哈哈哈哈首先表示 ',
        PM:'王二',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/12/12"
      }]
      self.ss2=[{
        name:'小米',
        code:'哈哈哈哈首先表示 ',
        PM:'张三',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/5/12"
      },{
        name:'小红',
        code:'12358964 ',
        PM:'里斯',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/4/12"
      },{
        name:'小米',
        code:'哈哈哈哈首先表示 ',
        PM:'王二',
        //planTime:moment(new Date()).format("YYYY-MM-DD"),//计划验收时间
        planTime:"2021/12/12"
      }]
      if(index==1){
        if(self.autoRoll1==true){
          clearInterval( self.timer1);
          self.autoRoll1=false;
        }else{
          let aa=self.ss1;
          self.timer1 = setInterval( () =>{//这里定时器如果封装成一个函数传参，会出错
            if (array.length<aa.length) {
              array.unshift(aa[array.length])
            } else {
              array.splice(0,array.length-1)
            }
          },1000);
          self.autoRoll1=true;
        }
      }else {
        if (self.autoRoll2 == true) {
          clearInterval(self.timer2);
          self.autoRoll2 = false;
        } else {
          let aa=self.ss2;
          self.timer2 = setInterval(() =>{
            if (array.length<aa.length) {
              array.unshift(aa[array.length])
            } else {
              array.splice(0,array.length-1)
            }
          }, 1000);
          self.autoRoll2 = true;
        }
      }
    },
前端小白۞
关注
专栏目录
vue 实现数据滚动显示_vue elementUI table表格数据 滚动懒加载的实现方法
weixin_39948824的博客
12-19 4299
在项目中遇到了一个性能问题vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验，这个时候常常有两种方法处理，1、分页，如下2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了如下一开始表格只显示31行数据当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不...
elementui表格下拉_vue elementUI table表格数据 滚动懒加载的实现方法
weixin_42519733的博客
01-13 3765
在项目中遇到了一个性能问题vue+elementui table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验，这个时候常常有两种方法处理，1、分页，如下2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了如下一开始表格只显示31行数据当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不足31，那就加载剩下...
简单的 vue基于elementui的无限滚动组件.txt
04-20
简单的 vue基于elementui的无限滚动组件，参数少。代码检简。请全局引入elementui。
Element el-table 列表自动滚动
ALDNOAH_K的博客
12-20 2506
Element el-table 列表自动滚动
element-ui el-table表格自动循环滚动指令插件
LWuXin的博客
07-02 1241
这个 Vue 自定义指令为 el-table 实现自动滚动。指令接收 time（初始延迟时间）、speed（滚动速度）、loop（循环滚动）和 timeLoop（重置位置）等参数。在表体内容超出容器高度时自动启动滚动。鼠标进入表格区域时滚动暂停，离开时恢复。更新组件后重启滚动，解绑时清除定时器和事件监听。适用于需要自动滚动表格内容的场景。
Element表格自动滚动
notagoodwriter的博客
03-16 9025
就最近碰到一个大屏的项目 有个表格需要做自动滚动 就搜索了一下 原文链接：element表格组件，内容自动滚动（并可设置）_Bwcx_lzp的博客-CSDN博客_element表格自动滚动 由于我这边只用到了自动滚动 所以想记录一下 以免以后找不到了 上代码 实现自动滚动 首先要给表格绑定上ref 这里绑定ref 之后写事件 里面的参数rollTime 跟rollPx 在data里定义一下 还有定时器rolltimer 就ok了 ...
ElementUi 表格自动滚动
LSFQ的博客
03-04 4106
elementui 表格自动滚动 elementui 表格背景透明、滚动条隐藏
elementui table 自动滚动
m0_60648668的博客
09-07 698
效果: 方法:
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
Vue2.0+ElementUI实现表格翻页的实例
08-29
该实例提供了一个完整的 Vue2.0 和 ElementUI 实现表格翻页的解决方案，涵盖了数据存储、分页、表格渲染等多个方面的内容，对于学习 Vue2.0 和 ElementUI 的开发者具有很高的参考价值。 知识点： 1. ElementUI 的...
element-ui el-table表格实时刷新数据和自动循环滚动指令插件
最新发布
LWuXin的博客
07-11 1687
自动滚动功能的详细行为，包括滚动的启动、速度、暂停和循环机制。这样的配置允许开发者根据具体的应用场景和用户体验需求，精细地调整滚动效果。
element表格组件，内容自动滚动（并可设置）
热门推荐
m0_49159526的博客
04-08 1万+
最近项目有个需求，两个表格，定时自动切换，而且每个表格内容自动滚动，还要加个设置功能，可以设置两个表格之前自动切换的间隔时间，和滚动速度，大概效果如下 话不多说，直接上代码 主要的功能方法 autoRoll（）内容自动滚动的实现 autoChange（）两个表格之间自动切换的实现 <!-- * @Description: * @Author: lzp * @Date: 2021-04-06 15:58:13 * @LastEditTime: 2021-04-08 14:30:46 *
elementui 表格自动滚动
11-20 344
【代码】elementui 表格自动滚动。
elementui el-table表格自动循环滚动
DarlingYL的博客
05-23 8522
普通的表格数据自动循环滚动，并且滚动到最后一条数据后，再回到第一条数据进行滚动
vue3+elementPlus：实现数字滚动效果（用于大屏可视化）
意初的博客
04-03 2097
vue3+elementPlus：实现数字滚动效果。自行封装注册一个公共组件，或拉取vue-count-to插件源码，因为这个插件在vue3里不能用
用Vue.js实现element-ui表格实现自动滚动
qq_53104231的博客
10-12 3010
用Vue.js实现element-ui表格实现自动滚动
vue3 + elementui table 设置自动滚动
StevenYanghahha的博客
06-25 1335
定时器设置托条累加（鼠标覆盖时停止滚动）
前端vue 实现elementui表格自动滚动
06-12
3. 最后，可以使用 JavaScript 监听容器滚动事件，当滚动到底部时，自动加载更多数据。 ``` <!-- 表格内容 --> export default { data() { return { tableData: [], // 表格数据 page: 1, // 当前...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值