-
Notifications
You must be signed in to change notification settings - Fork 14
/
082.el-table 滚动加载更多.html
136 lines (127 loc) · 4.25 KB
/
082.el-table 滚动加载更多.html
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/global.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="./assets/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table :data="tableData" v-loadmore="loadmore" border style="width: 100%" height="200">
<el-table-column prop="id" label="ID" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="amount1" sortable label="数值 1">
</el-table-column>
<el-table-column prop="amount2" sortable label="数值 2">
</el-table-column>
<el-table-column prop="amount3" sortable label="数值 3">
</el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="./assets/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="./assets/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
total: 100,
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小丫',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小丫',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小丫',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
}
},
mounted() {
},
methods: {
async loadmore() {
if (this.tableData.length >= this.total) return;
if (this.loading) return;
this.loading = true;
await Promise.resolve((resolve) => setTimeout(resolve, 2000))
this.tableData = this.tableData.concat([{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小丫',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小丫',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小丫',
amount1: '539',
amount2: '4.1',
amount3: 15
}])
this.loading = false;
}
},
directives: {
loadmore: {
bind(el, binding) {
const selectWrap = el.querySelector(".el-table__body-wrapper");
selectWrap.addEventListener("scroll", function () {
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
if (scrollDistance <= 0.5) {
binding.value()
}
});
},
},
},
})
</script>
</html>