解决 element table 无限加载时,滚动到底触发多次请求

在使用element的表格时,有时候会用到滚动加载的功能,使用element自带的无限滚动就可以,但是会有滚动条触底时,触发多次的情况。

1、安装 el-table-infinite-scroll

npm install el-table-infinite-scroll -S

2、引入

main.js中

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

3、使用

<el-table
        :data="tableData"
        v-el-table-infinite-scroll='load'
        row-class-name='tableRow'
        :infinite-scroll-immediate="false"
        infinite-scroll-distance="'50px'"
        @cell-mouse-enter='f_cellMouseEnter'
        @cell-mouse-leave='f_cellMouseLeave'
        :cell-style='{color:"#000"}'
        border
        :height="`100%`"
        class="my-table"
        style="width: 100%">

在表格中使用,load方法就是滚动条触底后触发的方法,名字是自定义的

4、解决触底时 触发多次的问题

在tabel中加入infinite-scroll-immediate,并设置为false

是否立即执行加载方法,以防初始状态下内容无法撑满容器。默认为true

:infinite-scroll-immediate="false"

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qing_xing_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值