elementUI自带的InfiniteScroll在Table组件中直接使用会触发无限load。似乎是监听了当前页面DOM的滚动来执行的load。
![]()
经过一番搜索发现，有个名叫el-table-infinite-scroll的插件可以在table上实现无限滚动效果
安装命令
1
| npm install --save el-table-infinite-scroll
|
局部引用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <template>
<el-table
height="400px"
v-el-table-infinite-scroll="load"
:data="tableData"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
directives: {
'el-table-infinite-scroll': elTableInfiniteScroll
},
methods: {
load() {
this.$message.success('加载下一页');
this.tableData = this.tableData.concat(exampleData);
}
}
}
</script>
|
注：需要设置table的height才能使load生效
配置项
组件的配置项和InfiniteScroll完全一致
![]()
链接
github仓库：https://github.com/yujinpan/el-table-infinite-scroll
