Skip to content

Commit e1ac73e

Browse files
chaishichaishi
authored
[Table] fix some pagination problems (#2962)
* feat(table): pagination * feat: code save * fix(table): pagination * fix: row select and drag sort * docs(table): demo
1 parent e3cb410 commit e1ac73e

12 files changed

+831
-70
lines changed

‎src/table/__tests__/column.test.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ TABLES.forEach((TTable) => {
2121
const columns = [
2222
{ title: 'Index', colKey: 'index', align: 'center' },
2323
{ title: 'Instance', colKey: 'instance', align: 'left' },
24-
{ title: 'description', colKey: 'instance' },
24+
{ title: 'description', colKey: 'description' },
2525
{ title: 'Owner', colKey: 'owner', align: 'right' },
2626
];
2727
const wrapper = mount({
@@ -41,7 +41,7 @@ TABLES.forEach((TTable) => {
4141
const columns = [
4242
{ title: 'Index', colKey: 'index' },
4343
{ title: 'Instance', colKey: 'instance', attrs: { 'col-key': 'instance' } },
44-
{ title: 'description', colKey: 'instance' },
44+
{ title: 'description', colKey: 'description' },
4545
{ title: 'Owner', colKey: 'owner' },
4646
];
4747
const wrapper = mount({
@@ -58,7 +58,7 @@ TABLES.forEach((TTable) => {
5858
const columns = [
5959
{ title: 'Index', colKey: 'index', className: () => ['tdesign-class'] },
6060
{ title: 'Instance', colKey: 'instance', className: 'tdesign-class' },
61-
{ title: 'description', colKey: 'instance', className: [{ 'tdesign-class': true }] },
61+
{ title: 'description', colKey: 'description', className: [{ 'tdesign-class': true }] },
6262
{ title: 'Owner', colKey: 'owner', className: { 'tdesign-class': true, 'tdesign-class1': false } },
6363
];
6464
const wrapper = mount({

‎src/table/__tests__/pagination/controlled.test.jsx

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import { mockDelay } from '@test/utils';
2+
import { afterEach } from 'vitest';
3+
import {
4+
Table, BaseTable, PrimaryTable, EnhancedTable,
5+
} from '@/src/table/index.ts';
6+
import { getAjaxDataTableMount, getLocalDataTableMount, getSwitchPaginationTableMount } from './mount';
7+
8+
// 4 类表格组件同时测试
9+
const TABLES = [Table, BaseTable, PrimaryTable, EnhancedTable];
10+
11+
TABLES.forEach((TTable) => {
12+
describe(TTable.name, () => {
13+
describe('ajax data pagination: data.length = pageSize', () => {
14+
afterEach(() => {
15+
document.querySelector('.t-popup')?.remove();
16+
document.querySelector('.t-table')?.remove();
17+
});
18+
19+
it('toggle pagination show', async () => {
20+
const wrapper = getSwitchPaginationTableMount(TTable);
21+
expect(wrapper.find('.t-table__pagination').exists()).toBeFalsy();
22+
expect(wrapper.findAll('.t-table tbody tr').length).toBe(38);
23+
await wrapper.find('.toggle-pagination input[type=checkbox]').setChecked(true);
24+
await wrapper.vm.$nextTick();
25+
expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy();
26+
expect(wrapper.findAll('.t-table tbody tr').length).toBe(5);
27+
await wrapper.find('.toggle-pagination input[type=checkbox]').setChecked(false);
28+
expect(wrapper.find('.t-table__pagination').exists()).toBeFalsy();
29+
});
30+
31+
it('pagination props change', async () => {
32+
const wrapper = getAjaxDataTableMount(TTable);
33+
34+
const firstSerialNumberClass = '.t-table tbody tr td:first-child';
35+
const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name';
36+
expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy();
37+
expect(wrapper.findAll('.t-table tbody tr').length).toBe(5);
38+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1');
39+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10_5');
40+
41+
await wrapper.find('.next-page').trigger('click');
42+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6');
43+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5');
44+
45+
await wrapper.find('.next-page').trigger('click');
46+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11');
47+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance30_5');
48+
49+
await wrapper.find('.prev-page').trigger('click');
50+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6');
51+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5');
52+
53+
await wrapper.find('.change-page-size').trigger('click');
54+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11');
55+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_10');
56+
});
57+
58+
it('pagination inner change', async () => {
59+
const wrapper = getAjaxDataTableMount(TTable);
60+
61+
const firstSerialNumberClass = '.t-table tbody tr td:first-child';
62+
const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name';
63+
expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy();
64+
expect(wrapper.findAll('.t-table tbody tr').length).toBe(5);
65+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1');
66+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10_5');
67+
68+
await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click');
69+
await wrapper.vm.$nextTick();
70+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6');
71+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5');
72+
73+
await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click');
74+
await wrapper.vm.$nextTick();
75+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11');
76+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance30_5');
77+
78+
await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click');
79+
await wrapper.vm.$nextTick();
80+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6');
81+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5');
82+
83+
await wrapper.find('.t-pagination__select .t-select-input > .t-input__wrap').trigger('click');
84+
document.querySelector('.t-select__list li.t-select-option:nth-child(2)').click();
85+
await wrapper.vm.$nextTick();
86+
expect(wrapper.findAll('.t-table tbody tr').length).toBe(10);
87+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11');
88+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_10');
89+
90+
await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click');
91+
await wrapper.vm.$nextTick();
92+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('21');
93+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance30_10');
94+
});
95+
});
96+
97+
describe('local data pagination: data.length > pageSize ', () => {
98+
afterEach(() => {
99+
document.querySelector('.t-popup')?.remove();
100+
document.querySelector('.t-table')?.remove();
101+
});
102+
103+
it('pagination props change', async () => {
104+
const wrapper = getLocalDataTableMount(TTable);
105+
106+
const firstSerialNumberClass = '.t-table tbody tr td:first-child';
107+
const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name';
108+
expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy();
109+
expect(wrapper.findAll('.t-table tbody tr').length).toBe(5);
110+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1');
111+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance0');
112+
113+
await wrapper.find('.next-page').trigger('click');
114+
await wrapper.vm.$nextTick();
115+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6');
116+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5');
117+
118+
await wrapper.find('.next-page').trigger('click');
119+
await wrapper.vm.$nextTick();
120+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11');
121+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10');
122+
123+
await wrapper.find('.prev-page').trigger('click');
124+
await wrapper.vm.$nextTick();
125+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6');
126+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5');
127+
128+
await wrapper.find('.change-page-size').trigger('click');
129+
await wrapper.vm.$nextTick();
130+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11');
131+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10');
132+
});
133+
134+
it('pagination inner change', async () => {
135+
const wrapper = getLocalDataTableMount(TTable);
136+
137+
const firstSerialNumberClass = '.t-table tbody tr td:first-child';
138+
const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name';
139+
expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy();
140+
expect(wrapper.findAll('.t-table tbody tr').length).toBe(5);
141+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1');
142+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance0');
143+
144+
await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click');
145+
await wrapper.vm.$nextTick();
146+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6');
147+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5');
148+
149+
await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click');
150+
await wrapper.vm.$nextTick();
151+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11');
152+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10');
153+
154+
await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click');
155+
await wrapper.vm.$nextTick();
156+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6');
157+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5');
158+
159+
await wrapper.find('.t-pagination__select .t-select-input > .t-input__wrap').trigger('click');
160+
await wrapper.vm.$nextTick();
161+
document.querySelector('.t-select__list li.t-select-option:nth-child(2)').click();
162+
await mockDelay(60);
163+
expect(wrapper.findAll('.t-table tbody tr').length).toBe(10);
164+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11');
165+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10');
166+
167+
await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click');
168+
expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('21');
169+
expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20');
170+
});
171+
});
172+
});
173+
});

0 commit comments

Comments
 (0)