elementui 表格自动滚动

最新推荐文章于 2024-07-11 00:15:48 发布

温暖的松子

最新推荐文章于 2024-07-11 00:15:48 发布

阅读量345

点赞数

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/qq_42197013/article/details/134435257

版权

文章介绍了如何在Vue应用中使用ElementUI的el-table组件，实现表格数据的动态加载，并结合beforeDestroy生命周期钩子管理和滚动功能。通过GET请求获取服务器警告数据并更新表格内容，同时实现自动滚动和停止效果。

摘要由CSDN通过智能技术生成

html

<el-table
 :data="tableReal.data"
 ref="scroll_Table"
 @mouseenter.native="autoScroll(true)"
 @mouseleave.native="autoScroll(false)"
 style="width: 100%">
   <el-table-column prop="live_time" label="时间" width="160px"> </el-table-column>
   
 </el-table>

javascript

 mounted(){
      this.autoScroll()
      this.realSearch()
    },
    beforeDestroy() {
      this.autoScroll(true)
    },
    methods: {
      
      realSearch(){
        this.autoScroll(true)
        this.$GET("api/server/warnings",this.form,(res)=>{ 
          // console.log(res)
          this.tableReal.data=res.data
          this.autoScroll()
        })
      },
      
      // 设置自动滚动
      autoScroll(stop) {
        const table = this.$refs.scroll_Table
        // 拿到表格中承载数据的div元素
        const divData = table.$refs.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        if (stop) {
          //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
          window.clearInterval(this.scrolltimer)
        } else {
          this.scrolltimer = window.setInterval(() => {
            // 元素自增距离顶部1像素
            divData.scrollTop += 1
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
              // 重置table距离顶部距离
              divData.scrollTop = 0
              // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
              // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
            }
          }, 150) // 滚动速度
        }
      },
    }