vue 使用el-table循环轮播数据列表的实现

 更新时间:2022年04月24日 11:41:26   作者:vanora1111  
这篇文章主要介绍了vue 使用el-table循环轮播数据列表的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用el-table循环轮播数据列表

因为是在内网开发,安装插件导包进去非常麻烦,有条件的可以去下载插件实现,咱这里贴一下手撸的代码。

需要实现的效果大抵如下:(手机拍的,有些糊)

大部分实现的是监听是否到了div的底部,如果到了底部,就直接跳到顶部,这种体验感不是特别好,没有达到轮播的真正效果。

 表格数据,devData我绑定了个空数组,因为实在是懒得敲了,按道理排名也应该是从api获取,而不是拿index。

<template>
  <div>
    <el-table
      :data="devData"
      style="width: 100%">
      <el-table-column label="排名">
        <template slot-scope="scope">
          <span>第{{scope.$index +1}}名</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="scale"
        label="姓名">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
 export defalut {
  dsta() {
    return {
     devData: []
    }
  }
}
</script>
export defalut {
   created() {
      var isScroll = true // 也可以定义到data里
      this.$nextTick(() => {
        let div = document.getElementsByClassName('el-table__body-wrapper')[0]
        div.style.height = '110px'
        div.addEventListener('mouseenter', () => {
         isScroll = false
        })
        div.addEventListener('mouseleave', () => {
         idScroll = true
        })
        let t = document.getElementByClassName('el-table__body')[0]
        setInterval(() =>{
           if(isScroll) {
             let data = this.devData[0]
             setTimeout(() => {
                this.devData.push(data)
                t.style.transition = 'all .5s'
                t.style.marginTop = '-41px'
               }, 500)
             setTimeout(() =>{
               this.devData.splice(0,1)
               t.style.transition = 'all 0s ease 0s'
               t.style.marginTop = '0'
             }, 1000)
           }
         }, 2500)
       })
     }
  }

vue el-table简单轮播

<el-table :data="readData0" size="mini" class="v-table" height="200"  ref="tableData_realtime" @cell-mouse-enter="hover_dibiao" @cell-mouse-leave="leave_dibiao">
 <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                        <el-table-column prop="area" label="地区" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="siteName" label="名称" align="center" :show-overflow-tooltip="true"></el-table-column>
</el-table>  
created() {
        this.$nextTick(()=> {  
            this.tableData_dibiao()//轮播                
        })          
   }, 
 
tableData_dibiao(){
        const table = this.$refs.tableData_realtime          
        const divData = table.bodyWrapper           
        this.dibiao_clear=setInterval(() => {               
            divData.scrollTop += 1               
            if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {                   
                divData.scrollTop = 0
            }
        }, 100)            
     },  
     hover_dibiao(){//鼠标移入清除定时器(暂停轮播)
        clearInterval(this.dibiao_clear)
     },
     leave_dibiao(){//鼠标移出继续执行轮播
        this.tableData_dibiao()
     },        

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

    基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

    这篇文章主要介绍了Vue多条件筛选功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue2 使用echarts实现地图点击进入下一层级+点击空白处回退功能

    vue2 使用echarts实现地图点击进入下一层级+点击空白处回退功能

    这篇文章主要介绍了vue2 使用echarts实现地图点击进入下一层级+点击空白处回退,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • vue缓存之keep-alive的理解和应用详解

    vue缓存之keep-alive的理解和应用详解

    这篇文章主要介绍了vue缓存之keep-alive的理解和应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue中使用$http.post请求传参的错误及解决

    vue中使用$http.post请求传参的错误及解决

    这篇文章主要介绍了vue中使用$http.post请求传参的错误及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue项目使用cmd运行方式

    vue项目使用cmd运行方式

    在开发过程中,启动项目是必不可少的一步,本文介绍了两种启动项目的方法,第一种方法是通过命令提示符(cmd)进入项目目录,然后输入npm run serve来启动项目,第二种方法是直接在项目目录下打开命令提示符(cmd),输入npm run serve即可启动项目
    2024-10-10
  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    Vue cli3 库模式搭建组件库并发布到 npm的流程

    这篇文章主要介绍了Vue cli3 库模式搭建组件库并发布到 npm,以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程,需要的朋友可以参考下
    2018-10-10
  • VUE更换背景颜色的方法

    VUE更换背景颜色的方法

    这篇文章主要介绍了VUE更换背景颜色的方法, 在这个示例中,我们使用了一个backgroundColor变量来存储当前页面的背景颜色,当用户点击按钮时,我们通过调用setBackgroundColor方法来更改背景颜色,并将背景颜色同时应用于body元素,需要的朋友可以参考下
    2024-03-03
  • Vue electron前端开启局域网接口实现流程详细介绍

    Vue electron前端开启局域网接口实现流程详细介绍

    用electron写了一个自己用的小软件,无后端,纯本地的数据。最近想着开发一个手机端app,将PC端的数据进行同步。为了这小小的功能单独写个后端又麻烦。干脆前后端不分离哈哈,直接在前端软件中开启接口
    2022-10-10
  • Vue3封装组件完整实例(带回调事件)

    Vue3封装组件完整实例(带回调事件)

    Vue.js已成为现代Web开发中不可或缺的技术之一,虽然Vue.js的一些基础概念和语法比较易学,但深入挖掘Vue.js的核心概念和功能需要更多的实践,下面这篇文章主要给大家介绍了关于Vue3封装组件(带回调事件)的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue-cli3.0 环境变量与模式配置方法

    vue-cli3.0 环境变量与模式配置方法

    vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?这篇文章主要介绍了vue-cli3.0 环境变量与模式 ,需要的朋友可以参考下
    2018-11-11

最新评论