vue el-table 简单轮播

最新推荐文章于 2024-08-28 11:38:54 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-08-28 11:38:54 发布

阅读量1.4k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/boyit0/article/details/120346734

版权

vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

<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()
     },