在使用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"