Skip to content

Commit 071499e

Browse files
huangshuweihuangshuwei
committed
Add lazy load doc
1 parent 26e05c0 commit 071499e

File tree

4 files changed

+346
-0
lines changed

4 files changed

+346
-0
lines changed

‎examples/src/docs/en/ve-table/virtual-scroll/combine-lazy-load.md

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
:::anchor Combined lazy loading
2+
3+
In some scenes, due to the limitation of network bandwidth or request, you can only paging request at a time, but you want to use virtual scrolling to improve rendering performance,At this time, you can implement the feature of virtual scrolling and lazy loading by `scrolling` callback function. The following is the simulation data, which shall be subject to the actual request
4+
5+
:::demo
6+
7+
```html
8+
<template>
9+
<div>
10+
<ve-table
11+
:max-height="500"
12+
:virtual-scroll-option="virtualScrollOption"
13+
:columns="columns"
14+
:table-data="tableData"
15+
row-key-field-name="rowKey"
16+
/>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import { debounce } from "lodash";
22+
export default {
23+
data() {
24+
return {
25+
virtualScrollOption: {
26+
enable: true,
27+
scrolling: this.scrolling,
28+
},
29+
columns: [
30+
{
31+
field: "index",
32+
key: "a",
33+
title: "#",
34+
width: 100,
35+
align: "left",
36+
},
37+
{
38+
field: "name",
39+
key: "b",
40+
title: "Name",
41+
width: 200,
42+
align: "left",
43+
},
44+
{
45+
field: "hobby",
46+
key: "c",
47+
title: "Hobby",
48+
width: 300,
49+
align: "left",
50+
},
51+
{
52+
field: "address",
53+
key: "d",
54+
title: "Address",
55+
width: "",
56+
align: "left",
57+
},
58+
],
59+
tableData: [],
60+
remoteData: [],
61+
// pageing info by request
62+
pagingInfo: {
63+
pageSize: 20,
64+
totalPage: 500,
65+
totalCount: 10000,
66+
},
67+
// scrolling event delay request event
68+
debounceTime: 150,
69+
debounceGetDataByPageIndex: null,
70+
};
71+
},
72+
methods: {
73+
initEmptyData() {
74+
let data = [];
75+
const totalCount = this.pagingInfo.totalCount;
76+
for (let i = 0; i < totalCount; i++) {
77+
data.push({
78+
rowKey: "prefix" + i,
79+
index: i,
80+
name: "",
81+
hobby: "",
82+
address: "",
83+
});
84+
}
85+
86+
this.tableData = data;
87+
},
88+
// get data by page index
89+
getDataByPageIndex(currentPageIndex, nextPageIndex) {
90+
const { remoteData, pagingInfo } = this;
91+
const { pageSize } = pagingInfo;
92+
93+
const currentStartIndex = (currentPageIndex - 1) * pageSize;
94+
const nextStartIndex = (nextPageIndex - 1) * pageSize;
95+
96+
if (
97+
remoteData.find((x) => x.index === currentStartIndex) &&
98+
remoteData.find((x) => x.index === nextStartIndex)
99+
) {
100+
return false;
101+
}
102+
103+
// whether to request 2 pages of data at one time
104+
const isDouble = currentPageIndex !== nextPageIndex;
105+
106+
this.getRemoteData(currentStartIndex, isDouble).then((resData) => {
107+
if (Array.isArray(resData) && resData.length) {
108+
this.remoteData = this.remoteData.concat(resData);
109+
resData.forEach((item) => {
110+
this.tableData.splice(item.index, 1, item);
111+
});
112+
}
113+
});
114+
},
115+
// get remote data
116+
getRemoteData(startIndex, isDouble) {
117+
console.log(
118+
`send request by ${
119+
isDouble ? "double" : "single"
120+
} page. start index:${startIndex}`,
121+
);
122+
const { pagingInfo } = this;
123+
const { pageSize, totalCount } = pagingInfo;
124+
125+
return new Promise((resolve, reject) => {
126+
// mock your remote server
127+
const realPageSize = isDouble ? pageSize * 2 : pageSize;
128+
let pageData = [];
129+
setTimeout(() => {
130+
for (let i = 0; i < realPageSize; i++) {
131+
const index = startIndex + i;
132+
133+
const dataItem = {
134+
rowKey: "prefix" + index,
135+
index: index,
136+
name: "name" + index,
137+
hobby: "hobby" + index,
138+
address: "address" + index,
139+
};
140+
//
141+
if (index < totalCount) {
142+
pageData.push(dataItem);
143+
}
144+
}
145+
resolve(pageData);
146+
}, 200);
147+
});
148+
},
149+
scrolling({
150+
startRowIndex,
151+
visibleStartIndex,
152+
visibleEndIndex,
153+
visibleAboveCount,
154+
visibleBelowCount,
155+
}) {
156+
const { pageSize } = this.pagingInfo;
157+
const currentPageIndex = Math.floor(visibleStartIndex / pageSize) + 1;
158+
const nextPageIndex = Math.floor(visibleEndIndex / pageSize) + 1;
159+
this.debounceGetDataByPageIndex(currentPageIndex, nextPageIndex);
160+
},
161+
},
162+
created() {
163+
this.initEmptyData();
164+
this.debounceGetDataByPageIndex = debounce(this.getDataByPageIndex, this.debounceTime);
165+
},
166+
};
167+
</script>
168+
```
169+
170+
:::

‎examples/src/docs/en/ve-table/virtual-scroll/main.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<RowExpandTable />
1212
<ColumnFixed />
1313
<FooterSummary />
14+
<CombineLazyLoad />
1415
<API title="API" anchor="API" desc="virtualScrollOption option" />
1516
</div>
1617
</template>
@@ -25,6 +26,7 @@ import RowExpandTable from "./row-expand-table.md";
2526
import FooterSummary from "../footer-summary/virtual-scroll.md";
2627
import ColumnFixed from "./column-fixed.md";
2728
import RowIndex from "./row-index.md";
29+
import CombineLazyLoad from "./combine-lazy-load.md";
2830
import API from "../api/virtual-scroll-option-props";
2931
3032
export default {
@@ -40,6 +42,7 @@ export default {
4042
ColumnFixed,
4143
FooterSummary,
4244
RowIndex,
45+
CombineLazyLoad,
4346
API,
4447
},
4548
};

‎examples/src/docs/zh/ve-table/virtual-scroll/combine-lazy-load.md

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
:::anchor 结合懒加载
2+
3+
有些场景由于网络带宽或者请求限制每次只能分页请求数据，但又希望使用虚拟滚动提高渲染性能，这时你可以通过 `scrolling`实现虚拟滚动和懒加载的功能。以下为模拟数据，具体根据实际请求为准
4+
5+
:::demo
6+
7+
```html
8+
<template>
9+
<div>
10+
<ve-table
11+
:max-height="500"
12+
:virtual-scroll-option="virtualScrollOption"
13+
:columns="columns"
14+
:table-data="tableData"
15+
row-key-field-name="rowKey"
16+
/>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import { debounce } from "lodash";
22+
export default {
23+
data() {
24+
return {
25+
virtualScrollOption: {
26+
enable: true,
27+
scrolling: this.scrolling,
28+
},
29+
columns: [
30+
{
31+
field: "index",
32+
key: "a",
33+
title: "#",
34+
width: 100,
35+
align: "left",
36+
},
37+
{
38+
field: "name",
39+
key: "b",
40+
title: "Name",
41+
width: 200,
42+
align: "left",
43+
},
44+
{
45+
field: "hobby",
46+
key: "c",
47+
title: "Hobby",
48+
width: 300,
49+
align: "left",
50+
},
51+
{
52+
field: "address",
53+
key: "d",
54+
title: "Address",
55+
width: "",
56+
align: "left",
57+
},
58+
],
59+
tableData: [],
60+
remoteData: [],
61+
// pageing info by request
62+
pagingInfo: {
63+
pageSize: 20,
64+
totalPage: 500,
65+
totalCount: 10000,
66+
},
67+
// scrolling event delay request event
68+
debounceTime: 150,
69+
debounceGetDataByPageIndex: null,
70+
};
71+
},
72+
methods: {
73+
initEmptyData() {
74+
let data = [];
75+
const totalCount = this.pagingInfo.totalCount;
76+
for (let i = 0; i < totalCount; i++) {
77+
data.push({
78+
rowKey: "prefix" + i,
79+
index: i,
80+
name: "",
81+
hobby: "",
82+
address: "",
83+
});
84+
}
85+
86+
this.tableData = data;
87+
},
88+
// get data by page index
89+
getDataByPageIndex(currentPageIndex, nextPageIndex) {
90+
const { remoteData, pagingInfo } = this;
91+
const { pageSize } = pagingInfo;
92+
93+
const currentStartIndex = (currentPageIndex - 1) * pageSize;
94+
const nextStartIndex = (nextPageIndex - 1) * pageSize;
95+
96+
if (
97+
remoteData.find((x) => x.index === currentStartIndex) &&
98+
remoteData.find((x) => x.index === nextStartIndex)
99+
) {
100+
return false;
101+
}
102+
103+
// whether to request 2 pages of data at one time
104+
const isDouble = currentPageIndex !== nextPageIndex;
105+
106+
this.getRemoteData(currentStartIndex, isDouble).then((resData) => {
107+
if (Array.isArray(resData) && resData.length) {
108+
this.remoteData = this.remoteData.concat(resData);
109+
resData.forEach((item) => {
110+
this.tableData.splice(item.index, 1, item);
111+
});
112+
}
113+
});
114+
},
115+
// get remote data
116+
getRemoteData(startIndex, isDouble) {
117+
console.log(
118+
`send request by ${
119+
isDouble ? "double" : "single"
120+
} page. start index:${startIndex}`,
121+
);
122+
const { pagingInfo } = this;
123+
const { pageSize, totalCount } = pagingInfo;
124+
125+
return new Promise((resolve, reject) => {
126+
// mock your remote server
127+
const realPageSize = isDouble ? pageSize * 2 : pageSize;
128+
let pageData = [];
129+
setTimeout(() => {
130+
for (let i = 0; i < realPageSize; i++) {
131+
const index = startIndex + i;
132+
133+
const dataItem = {
134+
rowKey: "prefix" + index,
135+
index: index,
136+
name: "name" + index,
137+
hobby: "hobby" + index,
138+
address: "address" + index,
139+
};
140+
//
141+
if (index < totalCount) {
142+
pageData.push(dataItem);
143+
}
144+
}
145+
resolve(pageData);
146+
}, 200);
147+
});
148+
},
149+
scrolling({
150+
startRowIndex,
151+
visibleStartIndex,
152+
visibleEndIndex,
153+
visibleAboveCount,
154+
visibleBelowCount,
155+
}) {
156+
const { pageSize } = this.pagingInfo;
157+
const currentPageIndex = Math.floor(visibleStartIndex / pageSize) + 1;
158+
const nextPageIndex = Math.floor(visibleEndIndex / pageSize) + 1;
159+
this.debounceGetDataByPageIndex(currentPageIndex, nextPageIndex);
160+
},
161+
},
162+
created() {
163+
this.initEmptyData();
164+
this.debounceGetDataByPageIndex = debounce(this.getDataByPageIndex, this.debounceTime);
165+
},
166+
};
167+
</script>
168+
```
169+
170+
:::

‎examples/src/docs/zh/ve-table/virtual-scroll/main.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<RowExpandTable />
1212
<ColumnFixed />
1313
<FooterSummary />
14+
<CombineLazyLoad />
1415
<API title="API" anchor="API" desc="virtualScrollOption 虚拟滚动配置" />
1516
</div>
1617
</template>
@@ -25,6 +26,7 @@ import RowExpandTable from "./row-expand-table.md";
2526
import FooterSummary from "../footer-summary/virtual-scroll.md";
2627
import ColumnFixed from "./column-fixed.md";
2728
import RowIndex from "./row-index.md";
29+
import CombineLazyLoad from "./combine-lazy-load.md";
2830
import API from "../api/virtual-scroll-option-props";
2931
3032
export default {
@@ -40,6 +42,7 @@ export default {
4042
ColumnFixed,
4143
FooterSummary,
4244
RowIndex,
45+
CombineLazyLoad,
4346
API,
4447
},
4548
};

0 commit comments

Comments
 (0)