Skip to content

Commit 99afc00

Browse files
author
huangshuwei
committed
add new feature:
virtual scrolling callback:scrolling
1 parent c64af39 commit 99afc00

File tree

4 files changed

+90
-20
lines changed

4 files changed

+90
-20
lines changed

‎examples/src/demo/index.vue‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
<el-col :span="3"></el-col>
6666
</el-row>
6767
</div>
68-
<!-- <div class="operation-item">
68+
<!-- <div class="operation-item">
6969
<el-row :gutter="20">
7070
<el-col :span="3"></el-col>
7171
<el-col :span="3"></el-col>
@@ -126,6 +126,7 @@ export default {
126126
// ---------------table options---------------
127127
sourceData: [],
128128
tableData: [],
129+
scrollStartIndex: 0,
129130
// filter condition
130131
filterConditions: [],
131132
cellStyleOption: {
@@ -137,7 +138,8 @@ export default {
137138
},
138139
virtualScrollOption: {
139140
// 是否开启
140-
enable: true
141+
enable: true,
142+
scrolling: this.scrolling
141143
},
142144
sortOption: {
143145
sortChange: params => {
@@ -221,9 +223,7 @@ export default {
221223
title: "#",
222224
width: 30,
223225
fixed: this.enableColumnFixed ? "left" : "",
224-
/* renderBodyCell: ({ row, column, rowIndex }, h) => {
225-
return ++rowIndex;
226-
} */
226+
renderBodyCell: this.renderRowIndex
227227
});
228228
229229
columns = columns.concat([
@@ -244,7 +244,7 @@ export default {
244244
title: "Sex",
245245
width: 50,
246246
align: "center",
247-
//sortBy: "",
247+
sortBy: "",
248248
renderBodyCell: ({ row, column, rowIndex }, h) => {
249249
const cellData = row[column.field];
250250
@@ -282,7 +282,7 @@ export default {
282282
key: "e",
283283
title: "Proficiency",
284284
width: 150,
285-
//sortBy: "",
285+
sortBy: "",
286286
renderBodyCell: (
287287
{ row, column, rowIndex },
288288
h
@@ -336,8 +336,8 @@ export default {
336336
name: "Python",
337337
color: "#d8899c"
338338
},
339-
{ name: "java", color: "#a88cd9" },
340-
{ name: "C++", color: "#88d317" }
339+
{ name: "java", color: "#a88cd9" }
340+
/* { name: "C++", color: "#88d317" } */
341341
];
342342
343343
const skills = LANGS.slice(0, cellData);
@@ -376,7 +376,7 @@ export default {
376376
fixed: this.enableColumnFixed ? "right" : "",
377377
align: "left",
378378
// filter
379-
/* filter: {
379+
filter: {
380380
filterList: [
381381
{ value: 0, label: "Working", selected: false },
382382
{ value: 1, label: "Metting", selected: false },
@@ -396,7 +396,7 @@ export default {
396396
}
397397
// max height
398398
//maxHeight: 120
399-
}, */
399+
},
400400
renderBodyCell: ({ row, column, rowIndex }, h) => {
401401
const cellData = row[column.field];
402402
@@ -430,6 +430,21 @@ export default {
430430
}
431431
},
432432
methods: {
433+
// virtual scrolling
434+
scrolling({
435+
scrollStartIndex,
436+
visibleStartIndex,
437+
visibleEndIndex,
438+
visibleAboveCount,
439+
visibleBelowCount
440+
}) {
441+
this.scrollStartIndex = scrollStartIndex;
442+
},
443+
444+
renderRowIndex({ row, column, rowIndex }) {
445+
return <span>{rowIndex + this.scrollStartIndex + 1}</span>;
446+
},
447+
433448
// search by name field
434449
searchByNameField(values) {
435450
this.filterConditions = values;
@@ -517,7 +532,7 @@ export default {
517532
sex: Mock.Random.boolean() ? 1 : 2,
518533
profession: PROFESSIONS[Mock.Random.natural(0, 5)],
519534
proficiency: Mock.Random.natural(5, 85),
520-
skills: Mock.Random.natural(0, 4),
535+
skills: Mock.Random.natural(0, 3),
521536
address: Mock.Random.county(true),
522537
status: Mock.Random.natural(0, 2)
523538
});

‎examples/src/docs/zh/ve-table/footer-summary/virtual-scroll.md‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,53 @@
2121
export default {
2222
data() {
2323
return {
24+
scrollStartIndex: 0,
2425
virtualScrollOption: {
2526
// 是否开启
2627
enable: true,
28+
scrolling: this.scrolling,
2729
},
2830
2931
columns: [
30-
{ field: "name", key: "b", title: "Name", width: 200, align: "left" },
32+
{
33+
field: "name",
34+
key: "b",
35+
title: "Name",
36+
width: 200,
37+
align: "left",
38+
renderBodyCell: this.renderRowIndex,
39+
},
3140
{ field: "hobby", key: "c", title: "Hobby", width: 300, align: "left" },
3241
{ field: "address", key: "d", title: "Address", width: "", align: "left" },
3342
],
3443
tableData: [],
3544
};
3645
},
3746
methods: {
38-
getRandom(min, max) {
39-
return Math.floor(Math.random() * (max - min) + min);
47+
// virtual scrolling
48+
scrolling({
49+
scrollStartIndex,
50+
visibleStartIndex,
51+
visibleEndIndex,
52+
visibleAboveCount,
53+
visibleBelowCount,
54+
}) {
55+
this.scrollStartIndex = scrollStartIndex;
56+
console.log(
57+
scrollStartIndex,
58+
visibleStartIndex,
59+
visibleEndIndex,
60+
visibleAboveCount,
61+
visibleBelowCount
62+
);
63+
},
64+
renderRowIndex({ row, column, rowIndex }) {
65+
console.log(rowIndex);
66+
return (
67+
<span class="text-bold" style="color:#1890ff;">
68+
{rowIndex + this.scrollStartIndex + 1}
69+
</span>
70+
);
4071
},
4172
initData() {
4273
let data = [];

‎packages/ve-table/src/index.jsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
clsName,
55
getNotFixedTotalWidthByColumnKey
66
} from "./util";
7-
import { getValByUnit } from "../../src/utils/index.js";
7+
import { getValByUnit, isFunction } from "../../src/utils/index.js";
88
import emitter from "../../src/mixins/emitter";
99
import { COMPS_NAME, EMIT_EVENTS, COMPS_CUSTOM_ATTRS } from "./util/constant";
1010
import Colgroup from "./colgroup";
@@ -908,20 +908,44 @@ export default {
908908
this.setScrolling();
909909

910910
if (this.isVirtualScroll) {
911-
const { virtualScrollVisibleCount: visibleCount } = this;
911+
const {
912+
virtualScrollVisibleCount: visibleCount,
913+
virtualScrollOption,
914+
virtualScrollAboveCount: visibleAboveCount,
915+
virtualScrollBelowCount: visibleBelowCount
916+
} = this;
912917

913918
//当前滚动位置
914919
let scrollTop = tableContainerRef.scrollTop;
915920

916921
//此时的开始索引
917-
this.virtualScrollStartIndex = this.getVirtualScrollStartIndex(
922+
let visibleStartIndex = this.getVirtualScrollStartIndex(
918923
scrollTop
919924
);
925+
this.virtualScrollStartIndex = visibleStartIndex;
926+
920927
//此时的结束索引
921-
this.virtualScrollEndIndex =
928+
let visibleEndIndex =
922929
this.virtualScrollStartIndex + visibleCount;
930+
this.virtualScrollEndIndex = visibleEndIndex;
931+
923932
//此时的偏移量
924933
this.setVirtualScrollStartOffset();
934+
935+
const { scrolling } = virtualScrollOption;
936+
if (isFunction(scrolling)) {
937+
let scrollStartIndex =
938+
visibleStartIndex - visibleAboveCount;
939+
940+
scrolling({
941+
scrollStartIndex:
942+
scrollStartIndex > 0 ? scrollStartIndex : 0,
943+
visibleStartIndex,
944+
visibleEndIndex,
945+
visibleAboveCount,
946+
visibleBelowCount
947+
});
948+
}
925949
}
926950
},
927951
// init virtual scroll

‎packages/ve-table/src/util/store.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Vue from "vue";
33
// store
44
export const store = Vue.observable({
55
/*
6-
table view port width except scroll bar width
6+
table viewport width except scroll bar width
77
*/
88
tableViewportWidth: 0
99
});

0 commit comments

Comments
 (0)