vue项目使用el-table实现无限滚动

vue项目使用el-table实现无限滚动
案例如图所示,该案例是一个弹框内容
vue项目使用el-table实现无限滚动_第1张图片

注意:属性可参考ElementUi中的InfiniteScroll 无限滚动,当数据不再继续请求接口时可用“infinite-scroll-disabled”属性判断是否继续加载
vue项目使用el-table实现无限滚动_第2张图片

git地址如下:

https://github.com/ElemeFE/vue-infinite-scroll

git上网页截图
vue项目使用el-table实现无限滚动_第3张图片
vue项目使用el-table实现无限滚动_第4张图片

步骤如下:
1,前端安装“save el-table-infinite-scrol”

cnpm install --save el-table-infinite-scroll

2,全局引用,在main.js中引用(vue3项目)

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

3,局部引用



4,案例如下:结果如上图所示:








你可能感兴趣的:(element组件,无限滚动,vue,vue.js,前端,无限滚动)