Skip to content

Commit 5d72ce8

Browse files
huangshuweihuangshuwei
committed
添加分页和多选功能示例
1 parent db6d091 commit 5d72ce8

File tree

4 files changed

+363
-1
lines changed

4 files changed

+363
-1
lines changed

‎examples/src/docs/en/ve-table/pagination/checkbox.md‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
:::anchor With Row Checkbox
2+
3+
:::demo Logic of this example, refer to [mail.google.com](https://mail.google.com/)
4+
5+
```html
6+
<template>
7+
<div>
8+
<div>current selected row keys:{{selectedRowKeysCollection}}</div>
9+
<ve-table
10+
:columns="columns"
11+
:table-data="currentPageData"
12+
:checkbox-option="checkboxOption"
13+
row-key-field-name="rowKey"
14+
/>
15+
<div class="table-pagination">
16+
<ve-pagination
17+
:total="totalCount"
18+
:page-index="pageIndex"
19+
:page-size="pageSize"
20+
@on-page-number-change="pageNumberChange"
21+
@on-page-size-change="pageSizeChange"
22+
/>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<style>
28+
.table-pagination {
29+
margin-top: 20px;
30+
text-align: right;
31+
}
32+
</style>
33+
34+
<script>
35+
// Simulation table data from database
36+
let DB_DATA = [];
37+
38+
export default {
39+
data() {
40+
return {
41+
// page index
42+
pageIndex: 1,
43+
// page size
44+
pageSize: 10,
45+
// selected row keys collection
46+
selectedRowKeysCollection: [],
47+
// checkbox option
48+
checkboxOption: {
49+
// 可控属性
50+
selectedRowKeys: [],
51+
// 行选择改变事件
52+
selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
53+
this.changeSelectedRowKeys(row, isSelected);
54+
},
55+
// 全选改变事件
56+
selectedAllChange: ({ isSelected, selectedRowKeys }) => {
57+
this.changeSelectAll(isSelected, selectedRowKeys);
58+
},
59+
},
60+
columns: [
61+
{
62+
field: "",
63+
key: "a",
64+
title: "#",
65+
align: "center",
66+
renderBodyCell: ({ row, column, rowIndex }, h) => {
67+
return (this.pageIndex - 1) * this.pageSize + rowIndex + 1;
68+
},
69+
},
70+
{
71+
field: "",
72+
key: "checkbox",
73+
// type=checkbox
74+
type: "checkbox",
75+
title: "",
76+
width: 50,
77+
align: "center",
78+
},
79+
80+
{ field: "name", key: "b", title: "Name", align: "center" },
81+
{ field: "date", key: "c", title: "Date", align: "left" },
82+
{ field: "hobby", key: "d", title: "Hobby", align: "left" },
83+
{ field: "address", key: "e", title: "Address", width: "" },
84+
],
85+
};
86+
},
87+
computed: {
88+
// table data
89+
currentPageData() {
90+
const { pageIndex, pageSize } = this;
91+
return DB_DATA.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
92+
},
93+
// total count
94+
totalCount() {
95+
return DB_DATA.length;
96+
},
97+
},
98+
methods: {
99+
// selected rowKeys change
100+
changeSelectedRowKeys(row, isSelected) {
101+
const rowKey = row.rowKey;
102+
103+
if (isSelected) {
104+
this.checkboxOption.selectedRowKeys.push(rowKey);
105+
this.selectedRowKeysCollection.push(rowKey);
106+
} else {
107+
const index = this.checkboxOption.selectedRowKeys.indexOf(rowKey);
108+
this.checkboxOption.selectedRowKeys.splice(index, 1);
109+
this.selectedRowKeysCollection.splice(index, 1);
110+
}
111+
},
112+
113+
// select all change
114+
changeSelectAll(isSelected, selectedRowKeys) {
115+
this.checkboxOption.selectedRowKeys = selectedRowKeys;
116+
117+
if (isSelected) {
118+
this.selectedRowKeysCollection =
119+
this.selectedRowKeysCollection.concat(selectedRowKeys);
120+
} else {
121+
this.currentPageData.forEach((item) => {
122+
if (selectedRowKeysCollection.indexOf(item.rowKey) > -1) {
123+
this.selectedRowKeysCollection.splice(index, 1);
124+
}
125+
});
126+
}
127+
},
128+
129+
// reset selectedRowKeys
130+
resetSelectedRowKeys() {
131+
this.checkboxOption.selectedRowKeys = [];
132+
133+
const selectedRowKeysCollection = this.selectedRowKeysCollection;
134+
135+
if (selectedRowKeysCollection.length) {
136+
this.currentPageData.forEach((item) => {
137+
if (selectedRowKeysCollection.indexOf(item.rowKey) > -1) {
138+
this.checkboxOption.selectedRowKeys.push(item.rowKey);
139+
}
140+
});
141+
}
142+
},
143+
144+
// page number change
145+
pageNumberChange(pageIndex) {
146+
this.pageIndex = pageIndex;
147+
this.resetSelectedRowKeys();
148+
},
149+
150+
// page size change
151+
pageSizeChange(pageSize) {
152+
this.pageIndex = 1;
153+
this.pageSize = pageSize;
154+
this.resetSelectedRowKeys();
155+
},
156+
157+
// Simulation table data
158+
initDatabase() {
159+
DB_DATA = [];
160+
for (let i = 0; i < 1000; i++) {
161+
DB_DATA.push({
162+
rowKey: i,
163+
name: "John" + i,
164+
date: "1900-05-20",
165+
hobby: "coding and coding repeat" + i,
166+
address: "No.1 Century Avenue, Shanghai" + i,
167+
});
168+
}
169+
},
170+
},
171+
created() {
172+
this.initDatabase();
173+
},
174+
};
175+
</script>
176+
```
177+
178+
:::

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@
33
<h2>Combining Pagination</h2>
44
<Explain />
55
<Basic />
6+
<Checkbox />
67
</div>
78
</template>
89
<script>
910
import Explain from "./explain.md";
1011
import Basic from "./basic.md";
12+
import Checkbox from "./checkbox.md";
1113
1214
export default {
1315
name: "basic-main",
1416
components: {
1517
Explain,
1618
Basic,
19+
Checkbox,
1720
},
1821
};
1922
</script>

‎examples/src/docs/zh/ve-table/pagination/checkbox.md‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
:::anchor 结合行多选
2+
3+
:::demo 此示例多选逻辑可以参考 [mail.google.com](https://mail.google.com/)
4+
5+
```html
6+
<template>
7+
<div>
8+
<div>当前选中的行key：{{selectedRowKeysCollection}}</div>
9+
<ve-table
10+
:columns="columns"
11+
:table-data="currentPageData"
12+
:checkbox-option="checkboxOption"
13+
row-key-field-name="rowKey"
14+
/>
15+
<div class="table-pagination">
16+
<ve-pagination
17+
:total="totalCount"
18+
:page-index="pageIndex"
19+
:page-size="pageSize"
20+
@on-page-number-change="pageNumberChange"
21+
@on-page-size-change="pageSizeChange"
22+
/>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<style>
28+
.table-pagination {
29+
margin-top: 20px;
30+
text-align: right;
31+
}
32+
</style>
33+
34+
<script>
35+
// Simulation table data from database
36+
let DB_DATA = [];
37+
38+
export default {
39+
data() {
40+
return {
41+
// page index
42+
pageIndex: 1,
43+
// page size
44+
pageSize: 10,
45+
// selected row keys collection
46+
selectedRowKeysCollection: [],
47+
// checkbox option
48+
checkboxOption: {
49+
// 可控属性
50+
selectedRowKeys: [],
51+
// 行选择改变事件
52+
selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
53+
this.changeSelectedRowKeys(row, isSelected);
54+
},
55+
// 全选改变事件
56+
selectedAllChange: ({ isSelected, selectedRowKeys }) => {
57+
this.changeSelectAll(isSelected, selectedRowKeys);
58+
},
59+
},
60+
columns: [
61+
{
62+
field: "",
63+
key: "a",
64+
title: "#",
65+
align: "center",
66+
renderBodyCell: ({ row, column, rowIndex }, h) => {
67+
return (this.pageIndex - 1) * this.pageSize + rowIndex + 1;
68+
},
69+
},
70+
{
71+
field: "",
72+
key: "checkbox",
73+
// type=checkbox
74+
type: "checkbox",
75+
title: "",
76+
width: 50,
77+
align: "center",
78+
},
79+
80+
{ field: "name", key: "b", title: "Name", align: "center" },
81+
{ field: "date", key: "c", title: "Date", align: "left" },
82+
{ field: "hobby", key: "d", title: "Hobby", align: "left" },
83+
{ field: "address", key: "e", title: "Address", width: "" },
84+
],
85+
};
86+
},
87+
computed: {
88+
// table data
89+
currentPageData() {
90+
const { pageIndex, pageSize } = this;
91+
return DB_DATA.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
92+
},
93+
// total count
94+
totalCount() {
95+
return DB_DATA.length;
96+
},
97+
},
98+
methods: {
99+
// selected rowKeys change
100+
changeSelectedRowKeys(row, isSelected) {
101+
const rowKey = row.rowKey;
102+
103+
if (isSelected) {
104+
this.checkboxOption.selectedRowKeys.push(rowKey);
105+
this.selectedRowKeysCollection.push(rowKey);
106+
} else {
107+
const index = this.checkboxOption.selectedRowKeys.indexOf(rowKey);
108+
this.checkboxOption.selectedRowKeys.splice(index, 1);
109+
this.selectedRowKeysCollection.splice(index, 1);
110+
}
111+
},
112+
113+
// select all change
114+
changeSelectAll(isSelected, selectedRowKeys) {
115+
this.checkboxOption.selectedRowKeys = selectedRowKeys;
116+
117+
if (isSelected) {
118+
this.selectedRowKeysCollection =
119+
this.selectedRowKeysCollection.concat(selectedRowKeys);
120+
} else {
121+
this.currentPageData.forEach((item) => {
122+
if (selectedRowKeysCollection.indexOf(item.rowKey) > -1) {
123+
this.selectedRowKeysCollection.splice(index, 1);
124+
}
125+
});
126+
}
127+
},
128+
129+
// reset selectedRowKeys
130+
resetSelectedRowKeys() {
131+
this.checkboxOption.selectedRowKeys = [];
132+
133+
const selectedRowKeysCollection = this.selectedRowKeysCollection;
134+
135+
if (selectedRowKeysCollection.length) {
136+
this.currentPageData.forEach((item) => {
137+
if (selectedRowKeysCollection.indexOf(item.rowKey) > -1) {
138+
this.checkboxOption.selectedRowKeys.push(item.rowKey);
139+
}
140+
});
141+
}
142+
},
143+
144+
// page number change
145+
pageNumberChange(pageIndex) {
146+
this.pageIndex = pageIndex;
147+
this.resetSelectedRowKeys();
148+
},
149+
150+
// page size change
151+
pageSizeChange(pageSize) {
152+
this.pageIndex = 1;
153+
this.pageSize = pageSize;
154+
this.resetSelectedRowKeys();
155+
},
156+
157+
// Simulation table data
158+
initDatabase() {
159+
DB_DATA = [];
160+
for (let i = 0; i < 1000; i++) {
161+
DB_DATA.push({
162+
rowKey: i,
163+
name: "John" + i,
164+
date: "1900-05-20",
165+
hobby: "coding and coding repeat" + i,
166+
address: "No.1 Century Avenue, Shanghai" + i,
167+
});
168+
}
169+
},
170+
},
171+
created() {
172+
this.initDatabase();
173+
},
174+
};
175+
</script>
176+
```
177+
178+
:::

0 commit comments

Comments
 (0)