Skip to content

Commit e427ca1

Browse files
tangjinzhoutangjinzhou
committed
perf: table
1 parent 7f4eba3 commit e427ca1

15 files changed

+169
-288
lines changed

‎components/table/SelectionBox.jsx

+6-30
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,19 @@ export default {
88
name: 'SelectionBox',
99
mixins: [BaseMixin],
1010
props: SelectionBoxProps,
11-
data() {
12-
return {
13-
checked: this.getCheckState(this.$props),
14-
};
15-
},
16-
17-
mounted() {
18-
this.subscribe();
19-
},
20-
21-
beforeDestroy() {
22-
if (this.unsubscribe) {
23-
this.unsubscribe();
24-
}
25-
},
26-
methods: {
27-
getCheckState(props) {
28-
const { store, defaultSelection, rowIndex } = props;
11+
computed: {
12+
checked() {
13+
const { store, defaultSelection, rowIndex } = this.$props;
2914
let checked = false;
30-
if (store.getState().selectionDirty) {
31-
checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0;
15+
if (store.selectionDirty) {
16+
checked = store.selectedRowKeys.indexOf(rowIndex) >= 0;
3217
} else {
3318
checked =
34-
store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 ||
35-
defaultSelection.indexOf(rowIndex) >= 0;
19+
store.selectedRowKeys.indexOf(rowIndex) >= 0 || defaultSelection.indexOf(rowIndex) >= 0;
3620
}
3721
return checked;
3822
},
39-
subscribe() {
40-
const { store } = this;
41-
this.unsubscribe = store.subscribe(() => {
42-
const checked = this.getCheckState(this.$props);
43-
this.setState({ checked });
44-
});
45-
},
4623
},
47-
4824
render() {
4925
const { type, rowIndex, ...rest } = getOptionProps(this);
5026
const { checked } = this;

‎components/table/SelectionCheckboxAll.jsx

+5-22
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function checkSelection({
1616
}) {
1717
return byDefaultChecked
1818
? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
19-
: data[type]((item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
19+
: data[type]((item, i) => store.selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
2020
}
2121

2222
function getIndeterminateState(props) {
@@ -52,7 +52,7 @@ function getIndeterminateState(props) {
5252
byDefaultChecked: true,
5353
});
5454

55-
if (store.getState().selectionDirty) {
55+
if (store.selectionDirty) {
5656
return someCheckedNotByDefaultChecked;
5757
}
5858
return someCheckedNotByDefaultChecked || someCheckedByDefaultChecked;
@@ -63,7 +63,7 @@ function getCheckState(props) {
6363
if (!data.length) {
6464
return false;
6565
}
66-
if (store.getState().selectionDirty) {
66+
if (store.selectionDirty) {
6767
return checkSelection({
6868
...props,
6969
data,
@@ -105,7 +105,6 @@ export default {
105105
text: props.locale.selectInvert,
106106
},
107107
];
108-
109108
return {
110109
checked: getCheckState(props),
111110
indeterminate: getIndeterminateState(props),
@@ -118,28 +117,18 @@ export default {
118117
this.setCheckState(this.$props);
119118
},
120119
deep: true,
120+
immediate: true,
121121
},
122122
},
123123

124-
mounted() {
125-
this.subscribe();
126-
},
127-
128-
beforeDestroy() {
129-
if (this.unsubscribe) {
130-
this.unsubscribe();
131-
}
132-
},
133124
methods: {
134125
checkSelection(props, data, type, byDefaultChecked) {
135126
const { store, getCheckboxPropsByItem, getRecordKey } = props || this.$props;
136127
// type should be 'every' | 'some'
137128
if (type === 'every' || type === 'some') {
138129
return byDefaultChecked
139130
? data[type]((item, i) => getCheckboxPropsByItem(item, i).props.defaultChecked)
140-
: data[type](
141-
(item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0,
142-
);
131+
: data[type]((item, i) => store.selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
143132
}
144133
return false;
145134
},
@@ -163,12 +152,6 @@ export default {
163152
const { checked } = e.target;
164153
this.$emit('select', checked ? 'all' : 'removeAll', 0, null);
165154
},
166-
subscribe() {
167-
const { store } = this;
168-
this.unsubscribe = store.subscribe(() => {
169-
this.setCheckState(this.$props);
170-
});
171-
},
172155

173156
renderMenus(selections) {
174157
return selections.map((selection, index) => {

‎components/table/Table.jsx

+24-49
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import VcTable, { INTERNAL_COL_DEFINE } from '../vc-table';
22
import classNames from 'classnames';
33
import shallowEqual from 'shallowequal';
44
import FilterDropdown from './filterDropdown';
5-
import createStore from './createStore';
65
import SelectionBox from './SelectionBox';
76
import SelectionCheckboxAll from './SelectionCheckboxAll';
87
import Column from './Column';
@@ -21,6 +20,7 @@ import defaultLocale from '../locale-provider/default';
2120
import warning from '../_util/warning';
2221
import scrollTo from '../_util/scrollTo';
2322
import TransButton from '../_util/transButton';
23+
import Vue from 'vue';
2424

2525
function noop() {}
2626

@@ -112,6 +112,14 @@ export default {
112112
Column,
113113
ColumnGroup,
114114
mixins: [BaseMixin],
115+
inject: {
116+
configProvider: { default: () => ConfigConsumerProps },
117+
},
118+
provide() {
119+
return {
120+
store: this.store,
121+
};
122+
},
115123
props: initDefaultProps(TableProps, {
116124
dataSource: [],
117125
useFixedHeader: false,
@@ -127,26 +135,15 @@ export default {
127135
childrenColumnName: 'children',
128136
}),
129137

130-
inject: {
131-
configProvider: { default: () => ConfigConsumerProps },
132-
},
133-
// CheckboxPropsCache: {
134-
// [key: string]: any;
135-
// };
136-
// store: Store;
137-
// columns: ColumnProps<T>[];
138-
// components: TableComponents;
139-
140138
data() {
141-
// this.columns = props.columns || normalizeColumns(props.children)
142139
const props = getOptionProps(this);
143140
warning(
144141
!props.expandedRowRender || !('scroll' in props) || !props.scroll.x,
145142
'`expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
146143
);
147144
this.CheckboxPropsCache = {};
148145

149-
this.store = createStore({
146+
this.store = Vue.observable({
150147
selectedRowKeys: getRowSelection(this.$props).selectedRowKeys || [],
151148
selectionDirty: false,
152149
});
@@ -179,26 +176,20 @@ export default {
179176
rowSelection: {
180177
handler(val, oldVal) {
181178
if (val && 'selectedRowKeys' in val) {
182-
this.store.setState({
183-
selectedRowKeys: val.selectedRowKeys || [],
184-
});
179+
this.store.selectedRowKeys = val.selectedRowKeys || [];
185180
const { rowSelection } = this;
186181
if (rowSelection && val.getCheckboxProps !== rowSelection.getCheckboxProps) {
187182
this.CheckboxPropsCache = {};
188183
}
189184
} else if (oldVal && !val) {
190-
this.store.setState({
191-
selectedRowKeys: [],
192-
});
185+
this.store.selectedRowKeys = [];
193186
}
194187
},
195188
deep: true,
196189
},
197190

198191
dataSource() {
199-
this.store.setState({
200-
selectionDirty: false,
201-
});
192+
this.store.selectionDirty = false;
202193
this.CheckboxPropsCache = {};
203194
},
204195

@@ -460,7 +451,7 @@ export default {
460451
const { selectWay, record, checked, changeRowKeys, nativeEvent } = selectionInfo;
461452
const rowSelection = getRowSelection(this.$props);
462453
if (rowSelection && !('selectedRowKeys' in rowSelection)) {
463-
this.store.setState({ selectedRowKeys });
454+
this.store.selectedRowKeys = selectedRowKeys;
464455
}
465456
const data = this.getFlatData();
466457
if (!rowSelection.onChange && !rowSelection[selectWay]) {
@@ -573,9 +564,7 @@ export default {
573564

574565
this.setState(newState, () => {
575566
this.scrollToFirstRow();
576-
this.store.setState({
577-
selectionDirty: false,
578-
});
567+
this.store.selectionDirty = false;
579568
this.$emit(
580569
'change',
581570
...this.prepareParamsArguments({
@@ -591,10 +580,8 @@ export default {
591580
handleSelect(record, rowIndex, e) {
592581
const checked = e.target.checked;
593582
const nativeEvent = e.nativeEvent;
594-
const defaultSelection = this.store.getState().selectionDirty
595-
? []
596-
: this.getDefaultSelection();
597-
let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
583+
const defaultSelection = this.store.selectionDirty ? [] : this.getDefaultSelection();
584+
let selectedRowKeys = this.store.selectedRowKeys.concat(defaultSelection);
598585
const key = this.getRecordKey(record, rowIndex);
599586
const { pivot } = this.$data;
600587
const rows = this.getFlatCurrentPageData();
@@ -627,9 +614,7 @@ export default {
627614
}
628615

629616
this.setState({ pivot: realIndex });
630-
this.store.setState({
631-
selectionDirty: true,
632-
});
617+
this.store.selectionDirty = true;
633618
this.setSelectedRowKeys(selectedRowKeys, {
634619
selectWay: 'onSelectMultiple',
635620
record,
@@ -644,9 +629,7 @@ export default {
644629
selectedRowKeys = selectedRowKeys.filter(i => key !== i);
645630
}
646631
this.setState({ pivot: realIndex });
647-
this.store.setState({
648-
selectionDirty: true,
649-
});
632+
this.store.selectionDirty = true;
650633
this.setSelectedRowKeys(selectedRowKeys, {
651634
selectWay: 'onSelect',
652635
record,
@@ -662,9 +645,7 @@ export default {
662645
const nativeEvent = e.nativeEvent;
663646
const key = this.getRecordKey(record, rowIndex);
664647
const selectedRowKeys = [key];
665-
this.store.setState({
666-
selectionDirty: true,
667-
});
648+
this.store.selectionDirty = true;
668649
this.setSelectedRowKeys(selectedRowKeys, {
669650
selectWay: 'onSelect',
670651
record,
@@ -676,10 +657,8 @@ export default {
676657

677658
handleSelectRow(selectionKey, index, onSelectFunc) {
678659
const data = this.getFlatCurrentPageData();
679-
const defaultSelection = this.store.getState().selectionDirty
680-
? []
681-
: this.getDefaultSelection();
682-
const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
660+
const defaultSelection = this.store.selectionDirty ? [] : this.getDefaultSelection();
661+
const selectedRowKeys = this.store.selectedRowKeys.concat(defaultSelection);
683662
const changeableRowKeys = data
684663
.filter((item, i) => !this.getCheckboxPropsByItem(item, i).props.disabled)
685664
.map((item, i) => this.getRecordKey(item, i));
@@ -724,9 +703,7 @@ export default {
724703
break;
725704
}
726705

727-
this.store.setState({
728-
selectionDirty: true,
729-
});
706+
this.store.selectionDirty = true;
730707
// when select custom selection, callback selections[n].onSelect
731708
const { rowSelection } = this;
732709
let customSelectionStartIndex = 2;
@@ -769,9 +746,7 @@ export default {
769746
}
770747
this.setState(newState, this.scrollToFirstRow);
771748

772-
this.store.setState({
773-
selectionDirty: false,
774-
});
749+
this.store.selectionDirty = false;
775750
this.$emit(
776751
'change',
777752
...this.prepareParamsArguments({

‎components/table/__tests__/SelectionBox.test.js

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import Vue from 'vue';
22
import { mount } from '@vue/test-utils';
3-
import createStore from '../createStore';
43
import SelectionBox from '../SelectionBox';
54

65
const getDefaultStore = selectedRowKeys => {
7-
return createStore({
6+
return Vue.observable({
87
selectedRowKeys: selectedRowKeys || [],
98
selectionDirty: false,
109
});
@@ -26,7 +25,7 @@ describe('SelectionBox', () => {
2625
sync: false,
2726
});
2827

29-
expect(wrapper.vm.$data).toEqual({ checked: false });
28+
expect(wrapper.vm.checked).toEqual(false);
3029
});
3130

3231
it('checked by selectedRowKeys ', () => {
@@ -44,7 +43,7 @@ describe('SelectionBox', () => {
4443
sync: false,
4544
});
4645

47-
expect(wrapper.vm.$data).toEqual({ checked: true });
46+
expect(wrapper.vm.checked).toEqual(true);
4847
});
4948

5049
it('checked by defaultSelection', () => {
@@ -62,7 +61,7 @@ describe('SelectionBox', () => {
6261
sync: false,
6362
});
6463

65-
expect(wrapper.vm.$data).toEqual({ checked: true });
64+
expect(wrapper.vm.checked).toEqual(true);
6665
});
6766

6867
it('checked when store change', () => {
@@ -80,12 +79,10 @@ describe('SelectionBox', () => {
8079
sync: false,
8180
});
8281

83-
store.setState({
84-
selectedRowKeys: ['1'],
85-
selectionDirty: true,
86-
});
82+
store.selectedRowKeys = ['1'];
83+
store.selectionDirty = true;
8784

88-
expect(wrapper.vm.$data).toEqual({ checked: true });
85+
expect(wrapper.vm.checked).toEqual(true);
8986
});
9087

9188
it('passes props to Checkbox', done => {

0 commit comments

Comments
 (0)