【vue】表格无缝滚动+懒加载

一、无缝滚动

  data () {
    return {
      timer1: null,
      notimer1: null,

     }
  },
created () {
    setTimeout(() => {
      this.animatesgjl()
    }, 0)
  },
methods: {
     // 表格自动滚动
    animatesgjl () {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      const clientHeight = this.$refs.table.$el.clientHeight - 48//减去表头
      // 是否超过可视区，超过自动滚动，否则停留3秒跳转
      if (clientHeight < divData.scrollHeight) {
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        this.timer1 = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 2

          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (clientHeight + divData.scrollTop == divData.scrollHeight) {
            clearInterval(this.timer1)
            this.$nextTick(() => {
              this.animatesgjl()
            })
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }, 100)
      } else {
        this.notimer1 = setInterval(() => {
          clearInterval(this.notimer1)
          this.animatesgjl()
        }, 3000)
      }
    },
}

二、懒加载

第一步：下载插件

npm i el-table-infinite-scroll@2 --save

npm i core-js --save

第二步：全局引入main.js

import elTableInfiniteScroll from "el-table-infinite-scroll";
Vue.use(elTableInfiniteScroll);

第三步：在表头添加 v-el-table-infinite-scroll="load"

v-el-table-infinite-scroll=“getCompanyList” ： 设置加载的参数
:infinite-scroll-distance=“10” ： 距离底部多少的时候在可以触发加载
:infinite-scroll-disabled=“isDisabled” ： 控制禁用无限滚动的属性

<el-table
          :data="Orderlist"  
          height="290"
          :highlight-current-row="false"
          ref="table"
          v-el-table-infinite-scroll="loadscroll"
          :infinite-scroll-distance="15"
          :infinite-scroll-disabled="isDisabled"
        >

  data () {
    return {
      timer1: null,
      notimer1: null,

      queryParams: { pagesize: 10, page: 0 },
      totalPage: 2,//总页码
      isDisabled: false,// 是否禁用无限滚动
      Orderlist:[]
     }
  },
methods: {
     async loadscroll () {
      if (this.isDisabled) return
      if (this.queryParams.page >= this.totalPage) {
        // 结束加载
        this.isDisabled = true;
      } else {
        this.queryParams.page++
        await GetJCZXData(this.queryParams).then((res) => {
          this.totalPage= res.data.totalPage;
          this.Orderlist = this.Orderlist.concat(res.data.Orderlist);
        });
      }
    },
}