Vue实现下拉加载更多
转自于：https://www.jb51.net/article/211727.htm（亲测可用）
这里需要后端做分页
1. 使用el-table-infinite-scroll 插件
(1). 安装插件
|
1
|
npm install --save el-table-infinite-scroll |
(2). 全局引入并注册
|
1
2
3
4
5
|
// main.js import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); |
(3). 局部文件引入
|
1
2
3
4
5
6
7
8
9
10
|
<script>// 引入import elTableInfiniteScroll from 'el-table-infinite-scroll';export default { // 注册指令 directives: { 'el-table-infinite-scroll': elTableInfiniteScroll }}</script> |
(4). 使用指令
|
1
2
3
|
<el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore"> </el-table> |
(5). 代码实例
|
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<template> <div class="app-container"> <el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore" :data="tableList"> <!-- 表格数据省略 --> </el-table> </div></template> <script>// 引入插件import elTableInfiniteScroll from "el-table-infinite-scroll"; export default { name: "index", data() { return { // 表格高度 tableHeight:"", // 数据总数 tableCount:0, // 表格数据列表 tableList:[], // 是否加载中 tableLoading:false, // 表格搜索条件 tableSearch:{ page:1 } } }, // 注册指令 directives: { "el-table-infinite-scroll": elTableInfiniteScroll, }, created() { let windowHeight =document.documentElement.clientHeight || document.body.clientHeight; // 动态计算表格的高度，200为屏幕内除了表格以外其他元素的高度，依实际情况而定 this.tableHeight = windowHeight - 200 + "px"; }, mounted(){ this.getTableData(this.tableSearch); }, methods: { // 请求表格数据 getTableData(search) { let page = search.page; let url = "index?page=" + page; // 首次打开页面要加载一次数据，为了防止数据过多自动触发滚动，此处需要置为加载中 this.tableLoading = true; this.$http.get(url).then((result) => { if (res.code == 10000) { // 拼接数据 this.tableList = this.tableList.concat(result.data.list); this.tableCount = result.count; this.tableSearch.page = result.current; this.tableLoading = false; } }); }, // 加载更多 loadMore() { if (!this.tableLoading) { this.tableLoading = true; if (this.tableList.length < this.tableCount) { this.tableSearch.page++; this.getTableData(this.tableSearch); } else { this.$message("已加载完所有的数据！"); this.tableLoading = false; } } }, }};</script> |
2. 自定义下拉加载方法
上面使用的插件需要依赖Element-UI，如果没有使用Element-UI，那就只能自己写一个下拉加载了，实现代码如下：
|
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<template> <div class="app-container"> <div :style="{height:tableHeight,overflow:'auto'}" id="tableBox"> <!-- 表格数据省略 --> </div> </div></template> <script>export default { name: "index", data() { return { // 表格高度 tableHeight:"", // 数据总数 tableCount:0, // 表格数据列表 tableList:[], // 是否加载中 tableLoading:false, // 表格搜索条件 tableSearch:{ page:1 } }; }, created(){ let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 动态计算表格的高度，200为屏幕内除了表格以外其他元素的高度，依实际情况而定 this.tableHeight = windowHeight - 200 +'px'; }, mounted() { this.getTableData(this.tableSearch); document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); }, beforeDestroy() { // 移除监听事件 window.removeEventListener('scroll', this.onTableScroll) }, methods: { onTableScroll(){ var obj = document.getElementById("tableBox"); var scrollHeight = obj.scrollHeight; var scrollTop = obj.scrollTop; var objHeight = obj.offsetHeight; // 100为阈值，可根据实际情况调整 if(scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length<this.tableCount){ this.tableLoading = true; this.tableSearch.page++; setTimeout(()=>{ this.getTableData(this.tableSearch); },300) } }, getTableData(search){ let page = search.page; let url = "index?page=" + page; // 首次打开页面要加载一次数据，为了防止数据过多自动触发滚动，此处需要置为加载中 this.tableLoading = true; this.$http.get(url).then((result) => { if (res.code == 10000) { // 拼接数据 this.tableList = this.tableList.concat(result.data.list); this.tableCount = result.count; this.tableSearch.page = result.current; this.tableLoading = false; } }); }, },};</script> |
