github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf: table

pull/3784/head
tangjinzhou 2021-02-28 23:34:04 +08:00
parent 7f4eba3e93
commit e427ca15bf
15 changed files with 169 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/table/SelectionBox.jsx
View File

@ -8,43 +8,19 @@ export default {
name: 'SelectionBox', name: 'SelectionBox',
mixins: [BaseMixin], mixins: [BaseMixin],
props: SelectionBoxProps, props: SelectionBoxProps,
data() { computed: {
return { checked() {
checked: this.getCheckState(this.$props), const { store, defaultSelection, rowIndex } = this.$props;
};
},
mounted() {
this.subscribe();
},
beforeDestroy() {
if (this.unsubscribe) {
this.unsubscribe();
}
},
methods: {
getCheckState(props) {
const { store, defaultSelection, rowIndex } = props;
let checked = false; let checked = false;
if (store.getState().selectionDirty) { if (store.selectionDirty) {
checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0; checked = store.selectedRowKeys.indexOf(rowIndex) >= 0;
} else { } else {
checked = checked =
store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 || store.selectedRowKeys.indexOf(rowIndex) >= 0 || defaultSelection.indexOf(rowIndex) >= 0;
defaultSelection.indexOf(rowIndex) >= 0;
} }
return checked; return checked;
}, },
subscribe() {
const { store } = this;
this.unsubscribe = store.subscribe(() => {
const checked = this.getCheckState(this.$props);
this.setState({ checked });
});
}, },
},
render() { render() {
const { type, rowIndex, ...rest } = getOptionProps(this); const { type, rowIndex, ...rest } = getOptionProps(this);
const { checked } = this; const { checked } = this;

27
components/table/SelectionCheckboxAll.jsx
View File

@ -16,7 +16,7 @@ function checkSelection({
}) { }) {
return byDefaultChecked return byDefaultChecked
? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked) ? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
: data[type]((item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0); : data[type]((item, i) => store.selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
} }
function getIndeterminateState(props) { function getIndeterminateState(props) {
@ -52,7 +52,7 @@ function getIndeterminateState(props) {
byDefaultChecked: true, byDefaultChecked: true,
}); });
if (store.getState().selectionDirty) { if (store.selectionDirty) {
return someCheckedNotByDefaultChecked; return someCheckedNotByDefaultChecked;
} }
return someCheckedNotByDefaultChecked || someCheckedByDefaultChecked; return someCheckedNotByDefaultChecked || someCheckedByDefaultChecked;
@ -63,7 +63,7 @@ function getCheckState(props) {
if (!data.length) { if (!data.length) {
return false; return false;
} }
if (store.getState().selectionDirty) { if (store.selectionDirty) {
return checkSelection({ return checkSelection({
...props, ...props,
data, data,
@ -105,7 +105,6 @@ export default {
text: props.locale.selectInvert, text: props.locale.selectInvert,
}, },
]; ];
return { return {
checked: getCheckState(props), checked: getCheckState(props),
indeterminate: getIndeterminateState(props), indeterminate: getIndeterminateState(props),
@ -118,18 +117,10 @@ export default {
this.setCheckState(this.$props); this.setCheckState(this.$props);
}, },
deep: true, deep: true,
immediate: true,
}, },
}, },
mounted() {
this.subscribe();
},
beforeDestroy() {
if (this.unsubscribe) {
this.unsubscribe();
}
},
methods: { methods: {
checkSelection(props, data, type, byDefaultChecked) { checkSelection(props, data, type, byDefaultChecked) {
const { store, getCheckboxPropsByItem, getRecordKey } = props || this.$props; const { store, getCheckboxPropsByItem, getRecordKey } = props || this.$props;
@ -137,9 +128,7 @@ export default {
if (type === 'every' || type === 'some') { if (type === 'every' || type === 'some') {
return byDefaultChecked return byDefaultChecked
? data[type]((item, i) => getCheckboxPropsByItem(item, i).props.defaultChecked) ? data[type]((item, i) => getCheckboxPropsByItem(item, i).props.defaultChecked)
: data[type]( : data[type]((item, i) => store.selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
(item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0,
);
} }
return false; return false;
}, },
@ -163,12 +152,6 @@ export default {
const { checked } = e.target; const { checked } = e.target;
this.$emit('select', checked ? 'all' : 'removeAll', 0, null); this.$emit('select', checked ? 'all' : 'removeAll', 0, null);
}, },
subscribe() {
const { store } = this;
this.unsubscribe = store.subscribe(() => {
this.setCheckState(this.$props);
});
},
renderMenus(selections) { renderMenus(selections) {
return selections.map((selection, index) => { return selections.map((selection, index) => {

73
components/table/Table.jsx
View File

@ -2,7 +2,6 @@ import VcTable, { INTERNAL_COL_DEFINE } from '../vc-table';
import classNames from 'classnames'; import classNames from 'classnames';
import shallowEqual from 'shallowequal'; import shallowEqual from 'shallowequal';
import FilterDropdown from './filterDropdown'; import FilterDropdown from './filterDropdown';
import createStore from './createStore';
import SelectionBox from './SelectionBox'; import SelectionBox from './SelectionBox';
import SelectionCheckboxAll from './SelectionCheckboxAll'; import SelectionCheckboxAll from './SelectionCheckboxAll';
import Column from './Column'; import Column from './Column';
@ -21,6 +20,7 @@ import defaultLocale from '../locale-provider/default';
import warning from '../_util/warning'; import warning from '../_util/warning';
import scrollTo from '../_util/scrollTo'; import scrollTo from '../_util/scrollTo';
import TransButton from '../_util/transButton'; import TransButton from '../_util/transButton';
import Vue from 'vue';
function noop() {} function noop() {}
@ -112,6 +112,14 @@ export default {
Column, Column,
ColumnGroup, ColumnGroup,
mixins: [BaseMixin], mixins: [BaseMixin],
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
provide() {
return {
store: this.store,
};
},
props: initDefaultProps(TableProps, { props: initDefaultProps(TableProps, {
dataSource: [], dataSource: [],
useFixedHeader: false, useFixedHeader: false,
@ -127,18 +135,7 @@ export default {
childrenColumnName: 'children', childrenColumnName: 'children',
}), }),
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
// CheckboxPropsCache: {
// [key: string]: any;
// };
// store: Store;
// columns: ColumnProps<T>[];
// components: TableComponents;
data() { data() {
// this.columns = props.columns || normalizeColumns(props.children)
const props = getOptionProps(this); const props = getOptionProps(this);
warning( warning(
!props.expandedRowRender || !('scroll' in props) || !props.scroll.x, !props.expandedRowRender || !('scroll' in props) || !props.scroll.x,
@ -146,7 +143,7 @@ export default {
); );
this.CheckboxPropsCache = {}; this.CheckboxPropsCache = {};
this.store = createStore({ this.store = Vue.observable({
selectedRowKeys: getRowSelection(this.$props).selectedRowKeys || [], selectedRowKeys: getRowSelection(this.$props).selectedRowKeys || [],
selectionDirty: false, selectionDirty: false,
}); });
@ -179,26 +176,20 @@ export default {
rowSelection: { rowSelection: {
handler(val, oldVal) { handler(val, oldVal) {
if (val && 'selectedRowKeys' in val) { if (val && 'selectedRowKeys' in val) {
this.store.setState({ this.store.selectedRowKeys = val.selectedRowKeys || [];
selectedRowKeys: val.selectedRowKeys || [],
});
const { rowSelection } = this; const { rowSelection } = this;
if (rowSelection && val.getCheckboxProps !== rowSelection.getCheckboxProps) { if (rowSelection && val.getCheckboxProps !== rowSelection.getCheckboxProps) {
this.CheckboxPropsCache = {}; this.CheckboxPropsCache = {};
} }
} else if (oldVal && !val) { } else if (oldVal && !val) {
this.store.setState({ this.store.selectedRowKeys = [];
selectedRowKeys: [],
});
} }
}, },
deep: true, deep: true,
}, },
dataSource() { dataSource() {
this.store.setState({ this.store.selectionDirty = false;
selectionDirty: false,
});
this.CheckboxPropsCache = {}; this.CheckboxPropsCache = {};
}, },
@ -460,7 +451,7 @@ export default {
const { selectWay, record, checked, changeRowKeys, nativeEvent } = selectionInfo; const { selectWay, record, checked, changeRowKeys, nativeEvent } = selectionInfo;
const rowSelection = getRowSelection(this.$props); const rowSelection = getRowSelection(this.$props);
if (rowSelection && !('selectedRowKeys' in rowSelection)) { if (rowSelection && !('selectedRowKeys' in rowSelection)) {
this.store.setState({ selectedRowKeys }); this.store.selectedRowKeys = selectedRowKeys;
} }
const data = this.getFlatData(); const data = this.getFlatData();
if (!rowSelection.onChange && !rowSelection[selectWay]) { if (!rowSelection.onChange && !rowSelection[selectWay]) {
@ -573,9 +564,7 @@ export default {
this.setState(newState, () => { this.setState(newState, () => {
this.scrollToFirstRow(); this.scrollToFirstRow();
this.store.setState({ this.store.selectionDirty = false;
selectionDirty: false,
});
this.$emit( this.$emit(
'change', 'change',
...this.prepareParamsArguments({ ...this.prepareParamsArguments({
@ -591,10 +580,8 @@ export default {
handleSelect(record, rowIndex, e) { handleSelect(record, rowIndex, e) {
const checked = e.target.checked; const checked = e.target.checked;
const nativeEvent = e.nativeEvent; const nativeEvent = e.nativeEvent;
const defaultSelection = this.store.getState().selectionDirty const defaultSelection = this.store.selectionDirty ? [] : this.getDefaultSelection();
? [] let selectedRowKeys = this.store.selectedRowKeys.concat(defaultSelection);
: this.getDefaultSelection();
let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
const key = this.getRecordKey(record, rowIndex); const key = this.getRecordKey(record, rowIndex);
const { pivot } = this.$data; const { pivot } = this.$data;
const rows = this.getFlatCurrentPageData(); const rows = this.getFlatCurrentPageData();
@ -627,9 +614,7 @@ export default {
} }
this.setState({ pivot: realIndex }); this.setState({ pivot: realIndex });
this.store.setState({ this.store.selectionDirty = true;
selectionDirty: true,
});
this.setSelectedRowKeys(selectedRowKeys, { this.setSelectedRowKeys(selectedRowKeys, {
selectWay: 'onSelectMultiple', selectWay: 'onSelectMultiple',
record, record,
@ -644,9 +629,7 @@ export default {
selectedRowKeys = selectedRowKeys.filter(i => key !== i); selectedRowKeys = selectedRowKeys.filter(i => key !== i);
} }
this.setState({ pivot: realIndex }); this.setState({ pivot: realIndex });
this.store.setState({ this.store.selectionDirty = true;
selectionDirty: true,
});
this.setSelectedRowKeys(selectedRowKeys, { this.setSelectedRowKeys(selectedRowKeys, {
selectWay: 'onSelect', selectWay: 'onSelect',
record, record,
@ -662,9 +645,7 @@ export default {
const nativeEvent = e.nativeEvent; const nativeEvent = e.nativeEvent;
const key = this.getRecordKey(record, rowIndex); const key = this.getRecordKey(record, rowIndex);
const selectedRowKeys = [key]; const selectedRowKeys = [key];
this.store.setState({ this.store.selectionDirty = true;
selectionDirty: true,
});
this.setSelectedRowKeys(selectedRowKeys, { this.setSelectedRowKeys(selectedRowKeys, {
selectWay: 'onSelect', selectWay: 'onSelect',
record, record,
@ -676,10 +657,8 @@ export default {
handleSelectRow(selectionKey, index, onSelectFunc) { handleSelectRow(selectionKey, index, onSelectFunc) {
const data = this.getFlatCurrentPageData(); const data = this.getFlatCurrentPageData();
const defaultSelection = this.store.getState().selectionDirty const defaultSelection = this.store.selectionDirty ? [] : this.getDefaultSelection();
? [] const selectedRowKeys = this.store.selectedRowKeys.concat(defaultSelection);
: this.getDefaultSelection();
const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
const changeableRowKeys = data const changeableRowKeys = data
.filter((item, i) => !this.getCheckboxPropsByItem(item, i).props.disabled) .filter((item, i) => !this.getCheckboxPropsByItem(item, i).props.disabled)
.map((item, i) => this.getRecordKey(item, i)); .map((item, i) => this.getRecordKey(item, i));
@ -724,9 +703,7 @@ export default {
break; break;
} }
this.store.setState({ this.store.selectionDirty = true;
selectionDirty: true,
});
// when select custom selection, callback selections[n].onSelect // when select custom selection, callback selections[n].onSelect
const { rowSelection } = this; const { rowSelection } = this;
let customSelectionStartIndex = 2; let customSelectionStartIndex = 2;
@ -769,9 +746,7 @@ export default {
} }
this.setState(newState, this.scrollToFirstRow); this.setState(newState, this.scrollToFirstRow);
this.store.setState({ this.store.selectionDirty = false;
selectionDirty: false,
});
this.$emit( this.$emit(
'change', 'change',
...this.prepareParamsArguments({ ...this.prepareParamsArguments({

17
components/table/__tests__/SelectionBox.test.js
View File

@ -1,10 +1,9 @@
import Vue from 'vue'; import Vue from 'vue';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import createStore from '../createStore';
import SelectionBox from '../SelectionBox'; import SelectionBox from '../SelectionBox';
const getDefaultStore = selectedRowKeys => { const getDefaultStore = selectedRowKeys => {
return createStore({ return Vue.observable({
selectedRowKeys: selectedRowKeys || [], selectedRowKeys: selectedRowKeys || [],
selectionDirty: false, selectionDirty: false,
}); });
@ -26,7 +25,7 @@ describe('SelectionBox', () => {
sync: false, sync: false,
}); });
expect(wrapper.vm.$data).toEqual({ checked: false }); expect(wrapper.vm.checked).toEqual(false);
}); });
it('checked by selectedRowKeys ', () => { it('checked by selectedRowKeys ', () => {
@ -44,7 +43,7 @@ describe('SelectionBox', () => {
sync: false, sync: false,
}); });
expect(wrapper.vm.$data).toEqual({ checked: true }); expect(wrapper.vm.checked).toEqual(true);
}); });
it('checked by defaultSelection', () => { it('checked by defaultSelection', () => {
@ -62,7 +61,7 @@ describe('SelectionBox', () => {
sync: false, sync: false,
}); });
expect(wrapper.vm.$data).toEqual({ checked: true }); expect(wrapper.vm.checked).toEqual(true);
}); });
it('checked when store change', () => { it('checked when store change', () => {
@ -80,12 +79,10 @@ describe('SelectionBox', () => {
sync: false, sync: false,
}); });
store.setState({ store.selectedRowKeys = ['1'];
selectedRowKeys: ['1'], store.selectionDirty = true;
selectionDirty: true,
});
expect(wrapper.vm.$data).toEqual({ checked: true }); expect(wrapper.vm.checked).toEqual(true);
}); });
it('passes props to Checkbox', done => { it('passes props to Checkbox', done => {

16
components/table/__tests__/Table.rowSelection.test.js
View File

@ -48,7 +48,7 @@ describe('Table.rowSelection', () => {
checkboxAll.element.checked = true; checkboxAll.element.checked = true;
checkboxAll.trigger('change'); checkboxAll.trigger('change');
await asyncExpect(() => { await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({ expect(getStore(wrapper)).toEqual({
selectedRowKeys: [0, 1, 2, 3], selectedRowKeys: [0, 1, 2, 3],
selectionDirty: true, selectionDirty: true,
}); });
@ -56,7 +56,7 @@ describe('Table.rowSelection', () => {
checkboxes.at(1).element.checked = false; checkboxes.at(1).element.checked = false;
checkboxes.at(1).trigger('change'); checkboxes.at(1).trigger('change');
await asyncExpect(() => { await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({ expect(getStore(wrapper)).toEqual({
selectedRowKeys: [1, 2, 3], selectedRowKeys: [1, 2, 3],
selectionDirty: true, selectionDirty: true,
}); });
@ -64,7 +64,7 @@ describe('Table.rowSelection', () => {
checkboxes.at(1).element.checked = true; checkboxes.at(1).element.checked = true;
checkboxes.at(1).trigger('change'); checkboxes.at(1).trigger('change');
await asyncExpect(() => { await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({ expect(getStore(wrapper)).toEqual({
selectedRowKeys: [1, 2, 3, 0], selectedRowKeys: [1, 2, 3, 0],
selectionDirty: true, selectionDirty: true,
}); });
@ -79,7 +79,7 @@ describe('Table.rowSelection', () => {
radios.at(0).element.checked = true; radios.at(0).element.checked = true;
radios.at(0).trigger('change'); radios.at(0).trigger('change');
await asyncExpect(() => { await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({ expect(getStore(wrapper)).toEqual({
selectedRowKeys: [0], selectedRowKeys: [0],
selectionDirty: true, selectionDirty: true,
}); });
@ -87,7 +87,7 @@ describe('Table.rowSelection', () => {
radios.at(radios.length - 1).element.checked = true; radios.at(radios.length - 1).element.checked = true;
radios.at(radios.length - 1).trigger('change'); radios.at(radios.length - 1).trigger('change');
await asyncExpect(() => { await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({ expect(getStore(wrapper)).toEqual({
selectedRowKeys: [3], selectedRowKeys: [3],
selectionDirty: true, selectionDirty: true,
}); });
@ -164,14 +164,14 @@ describe('Table.rowSelection', () => {
it('can be controlled', async () => { it('can be controlled', async () => {
const wrapper = mount(Table, getTableOptions({ rowSelection: { selectedRowKeys: [0] } })); const wrapper = mount(Table, getTableOptions({ rowSelection: { selectedRowKeys: [0] } }));
expect(getStore(wrapper).getState()).toEqual({ expect(getStore(wrapper)).toEqual({
selectedRowKeys: [0], selectedRowKeys: [0],
selectionDirty: false, selectionDirty: false,
}); });
wrapper.setProps({ rowSelection: { selectedRowKeys: [1] } }); wrapper.setProps({ rowSelection: { selectedRowKeys: [1] } });
await asyncExpect(() => { await asyncExpect(() => {
expect(getStore(wrapper).getState()).toEqual({ expect(getStore(wrapper)).toEqual({
selectedRowKeys: [1], selectedRowKeys: [1],
selectionDirty: false, selectionDirty: false,
}); });
@ -705,7 +705,9 @@ describe('Table.rowSelection', () => {
checkboxes.at(1).element.checked = true; checkboxes.at(1).element.checked = true;
checkboxes.at(1).trigger('change'); checkboxes.at(1).trigger('change');
await asyncExpect(() => {
expect(checkboxAll.vm.$data).toEqual({ indeterminate: true, checked: false }); expect(checkboxAll.vm.$data).toEqual({ indeterminate: true, checked: false });
});
checkboxes.at(2).element.checked = true; checkboxes.at(2).element.checked = true;
checkboxes.at(2).trigger('change'); checkboxes.at(2).trigger('change');

35
components/table/createBodyRow.jsx
View File

@ -1,10 +1,8 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { Store } from './createStore';
import { getListeners } from '../_util/props-util'; import { getListeners } from '../_util/props-util';
const BodyRowProps = { const BodyRowProps = {
store: Store, store: PropTypes.any,
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
}; };
@ -13,36 +11,11 @@ export default function createBodyRow(Component = 'tr') {
const BodyRow = { const BodyRow = {
name: 'BodyRow', name: 'BodyRow',
props: BodyRowProps, props: BodyRowProps,
data() { computed: {
const { selectedRowKeys } = this.store.getState(); selected() {
return this.$props.store.selectedRowKeys.indexOf(this.$props.rowKey) >= 0;
return {
selected: selectedRowKeys.indexOf(this.rowKey) >= 0,
};
},
mounted() {
this.subscribe();
},
beforeDestroy() {
if (this.unsubscribe) {
this.unsubscribe();
}
},
methods: {
subscribe() {
const { store, rowKey } = this;
this.unsubscribe = store.subscribe(() => {
const { selectedRowKeys } = this.store.getState();
const selected = selectedRowKeys.indexOf(rowKey) >= 0;
if (selected !== this.selected) {
this.selected = selected;
}
});
}, },
}, },
render() { render() {
const className = { const className = {
[`${this.prefixCls}-row-selected`]: this.selected, [`${this.prefixCls}-row-selected`]: this.selected,

11
components/table/createStore.jsx
View File

@ -1,11 +0,0 @@
import PropTypes from '../_util/vue-types';
export const Store = PropTypes.shape({
setState: PropTypes.func,
getState: PropTypes.func,
subscribe: PropTypes.func,
}).loose;
import create from '../_util/store/create';
const createStore = create;
export default createStore;

5
components/table/interface.js
View File

@ -1,7 +1,6 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { PaginationProps as getPaginationProps } from '../pagination'; import { PaginationProps as getPaginationProps } from '../pagination';
import { SpinProps as getSpinProps } from '../spin'; import { SpinProps as getSpinProps } from '../spin';
import { Store } from './createStore';
const PaginationProps = getPaginationProps(); const PaginationProps = getPaginationProps();
const SpinProps = getSpinProps(); const SpinProps = getSpinProps();
@ -162,7 +161,7 @@ export const TableProps = {
// } // }
export const SelectionCheckboxAllProps = { export const SelectionCheckboxAllProps = {
store: Store, store: PropTypes.any,
locale: PropTypes.any, locale: PropTypes.any,
disabled: PropTypes.bool, disabled: PropTypes.bool,
getCheckboxPropsByItem: PropTypes.func, getCheckboxPropsByItem: PropTypes.func,
@ -181,7 +180,7 @@ export const SelectionCheckboxAllProps = {
// } // }
export const SelectionBoxProps = { export const SelectionBoxProps = {
store: Store, store: PropTypes.any,
type: RowSelectionType, type: RowSelectionType,
defaultSelection: PropTypes.arrayOf([PropTypes.string, PropTypes.number]), defaultSelection: PropTypes.arrayOf([PropTypes.string, PropTypes.number]),
rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

9
components/vc-table/src/BaseTable.jsx
View File

@ -5,7 +5,6 @@ import TableHeader from './TableHeader';
import TableRow from './TableRow'; import TableRow from './TableRow';
import ExpandableRow from './ExpandableRow'; import ExpandableRow from './ExpandableRow';
import { mergeProps, getListeners } from '../../_util/props-util'; import { mergeProps, getListeners } from '../../_util/props-util';
import { connect } from '../../_util/store';
function noop() {} function noop() {}
const BaseTable = { const BaseTable = {
name: 'BaseTable', name: 'BaseTable',
@ -15,13 +14,13 @@ const BaseTable = {
tableClassName: PropTypes.string.isRequired, tableClassName: PropTypes.string.isRequired,
hasHead: PropTypes.bool.isRequired, hasHead: PropTypes.bool.isRequired,
hasBody: PropTypes.bool.isRequired, hasBody: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired,
expander: PropTypes.object.isRequired, expander: PropTypes.object.isRequired,
getRowKey: PropTypes.func, getRowKey: PropTypes.func,
isAnyColumnsFixed: PropTypes.bool, isAnyColumnsFixed: PropTypes.bool,
}, },
inject: { inject: {
table: { default: () => ({}) }, table: { default: () => ({}) },
store: { from: 'table-store', default: () => ({}) },
}, },
methods: { methods: {
getColumns(cols) { getColumns(cols) {
@ -37,9 +36,7 @@ const BaseTable = {
})); }));
}, },
handleRowHover(isHover, key) { handleRowHover(isHover, key) {
this.store.setState({ this.store.currentHoverKey = isHover ? key : null;
currentHoverKey: isHover ? key : null,
});
}, },
renderRows(renderData, indent, ancestorKeys = []) { renderRows(renderData, indent, ancestorKeys = []) {
@ -187,4 +184,4 @@ const BaseTable = {
}, },
}; };
export default connect()(BaseTable); export default BaseTable;

15
components/vc-table/src/ExpandableRow.jsx
View File

@ -1,7 +1,6 @@
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import ExpandIcon from './ExpandIcon'; import ExpandIcon from './ExpandIcon';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { connect } from '../../_util/store';
const ExpandableRow = { const ExpandableRow = {
mixins: [BaseMixin], mixins: [BaseMixin],
@ -14,7 +13,6 @@ const ExpandableRow = {
indentSize: PropTypes.number, indentSize: PropTypes.number,
needIndentSpaced: PropTypes.bool.isRequired, needIndentSpaced: PropTypes.bool.isRequired,
expandRowByClick: PropTypes.bool, expandRowByClick: PropTypes.bool,
expanded: PropTypes.bool.isRequired,
expandIconAsCell: PropTypes.bool, expandIconAsCell: PropTypes.bool,
expandIconColumnIndex: PropTypes.number, expandIconColumnIndex: PropTypes.number,
childrenColumnName: PropTypes.string, childrenColumnName: PropTypes.string,
@ -24,7 +22,14 @@ const ExpandableRow = {
// onRowClick: PropTypes.func, // onRowClick: PropTypes.func,
// children: PropTypes.func.isRequired, // children: PropTypes.func.isRequired,
}, },
inject: {
store: { from: 'table-store', default: () => ({}) },
},
computed: {
expanded() {
return this.store.expandedRowKeys.includes(this.$props.rowKey);
},
},
beforeDestroy() { beforeDestroy() {
this.handleDestroy(); this.handleDestroy();
}, },
@ -128,6 +133,4 @@ const ExpandableRow = {
}, },
}; };
export default connect(({ expandedRowKeys }, { rowKey }) => ({ export default ExpandableRow;
expanded: expandedRowKeys.includes(rowKey),
}))(ExpandableRow);

24
components/vc-table/src/ExpandableTable.jsx
View File

@ -1,6 +1,5 @@
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { connect } from '../../_util/store';
import shallowEqual from 'shallowequal'; import shallowEqual from 'shallowequal';
import TableRow from './TableRow'; import TableRow from './TableRow';
import { remove } from './utils'; import { remove } from './utils';
@ -21,7 +20,6 @@ export const ExpandableTableProps = () => ({
// onExpand: PropTypes.func, // onExpand: PropTypes.func,
// onExpandedRowsChange: PropTypes.func, // onExpandedRowsChange: PropTypes.func,
columnManager: PropTypes.object.isRequired, columnManager: PropTypes.object.isRequired,
store: PropTypes.object.isRequired,
prefixCls: PropTypes.string.isRequired, prefixCls: PropTypes.string.isRequired,
data: PropTypes.array, data: PropTypes.array,
getRowKey: PropTypes.func, getRowKey: PropTypes.func,
@ -39,7 +37,9 @@ const ExpandableTable = {
childrenColumnName: 'children', childrenColumnName: 'children',
indentSize: 15, indentSize: 15,
}), }),
inject: {
store: { from: 'table-store', default: () => ({}) },
},
data() { data() {
const { const {
data, data,
@ -66,10 +66,8 @@ const ExpandableTable = {
// this.columnManager = props.columnManager // this.columnManager = props.columnManager
// this.store = props.store // this.store = props.store
this.store.setState({ this.store.expandedRowsHeight = {};
expandedRowsHeight: {}, this.store.expandedRowKeys = finalExpandedRowKeys;
expandedRowKeys: finalExpandedRowKeys,
});
return {}; return {};
}, },
mounted() { mounted() {
@ -81,9 +79,7 @@ const ExpandableTable = {
watch: { watch: {
expandedRowKeys(val) { expandedRowKeys(val) {
this.$nextTick(() => { this.$nextTick(() => {
this.store.setState({ this.store.expandedRowKeys = val;
expandedRowKeys: val,
});
}); });
}, },
}, },
@ -98,7 +94,7 @@ const ExpandableTable = {
event.stopPropagation(); event.stopPropagation();
} }
let { expandedRowKeys } = this.store.getState(); let { expandedRowKeys } = this.store;
if (expanded) { if (expanded) {
// row was expaned // row was expaned
@ -112,7 +108,7 @@ const ExpandableTable = {
} }
if (!this.expandedRowKeys) { if (!this.expandedRowKeys) {
this.store.setState({ expandedRowKeys }); this.store.expandedRowKeys = expandedRowKeys;
} }
// De-dup of repeat call // De-dup of repeat call
if (!this.latestExpandedRows || !shallowEqual(this.latestExpandedRows, expandedRowKeys)) { if (!this.latestExpandedRows || !shallowEqual(this.latestExpandedRows, expandedRowKeys)) {
@ -163,7 +159,7 @@ const ExpandableTable = {
{ {
key: 'extra-row', key: 'extra-row',
customRender: () => { customRender: () => {
const { expandedRowKeys } = this.store.getState(); const { expandedRowKeys } = this.store;
const expanded = expandedRowKeys.includes(parentKey); const expanded = expandedRowKeys.includes(parentKey);
return { return {
attrs: { attrs: {
@ -245,4 +241,4 @@ const ExpandableTable = {
}, },
}; };
export default connect()(ExpandableTable); export default ExpandableTable;

39
components/vc-table/src/Table.jsx
View File

@ -7,17 +7,20 @@ import PropTypes from '../../_util/vue-types';
import { debounce } from './utils'; import { debounce } from './utils';
import warning from '../../_util/warning'; import warning from '../../_util/warning';
import addEventListener from '../../vc-util/Dom/addEventListener'; import addEventListener from '../../vc-util/Dom/addEventListener';
import { Provider, create } from '../../_util/store';
import ColumnManager from './ColumnManager'; import ColumnManager from './ColumnManager';
import HeadTable from './HeadTable'; import HeadTable from './HeadTable';
import BodyTable from './BodyTable'; import BodyTable from './BodyTable';
import ExpandableTable from './ExpandableTable'; import ExpandableTable from './ExpandableTable';
import { initDefaultProps, getOptionProps, getListeners } from '../../_util/props-util'; import { initDefaultProps, getOptionProps, getListeners } from '../../_util/props-util';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import Vue from 'vue';
export default { export default {
name: 'Table', name: 'Table',
mixins: [BaseMixin], mixins: [BaseMixin],
provide() {
return { 'table-store': this.store, table: this };
},
props: initDefaultProps( props: initDefaultProps(
{ {
data: PropTypes.array, data: PropTypes.array,
@ -85,6 +88,13 @@ export default {
), ),
data() { data() {
this.preData = [...this.data]; this.preData = [...this.data];
this.store = Vue.observable({
currentHoverKey: null,
fixedColumnsHeadRowsHeight: [],
fixedColumnsBodyRowsHeight: {},
expandedRowsHeight: {},
expandedRowKeys: [],
});
return { return {
columnManager: new ColumnManager(this.columns), columnManager: new ColumnManager(this.columns),
sComponents: merge( sComponents: merge(
@ -158,23 +168,10 @@ export default {
'getBodyWrapper is deprecated, please use custom components instead.', 'getBodyWrapper is deprecated, please use custom components instead.',
); );
// this.columnManager = new ColumnManager(this.columns, this.$slots.default)
this.store = create({
currentHoverKey: null,
fixedColumnsHeadRowsHeight: [],
fixedColumnsBodyRowsHeight: {},
});
this.setScrollPosition('left'); this.setScrollPosition('left');
this.debouncedWindowResize = debounce(this.handleWindowResize, 150); this.debouncedWindowResize = debounce(this.handleWindowResize, 150);
}, },
provide() {
return {
table: this,
};
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
@ -298,7 +295,7 @@ export default {
const fixedColumnsHeadRowsHeight = [].map.call(headRows, row => const fixedColumnsHeadRowsHeight = [].map.call(headRows, row =>
row.getBoundingClientRect().height ? row.getBoundingClientRect().height - 0.5 : 'auto', row.getBoundingClientRect().height ? row.getBoundingClientRect().height - 0.5 : 'auto',
); );
const state = this.store.getState(); const state = this.store;
const fixedColumnsBodyRowsHeight = [].reduce.call( const fixedColumnsBodyRowsHeight = [].reduce.call(
bodyRows, bodyRows,
(acc, row) => { (acc, row) => {
@ -318,10 +315,8 @@ export default {
) { ) {
return; return;
} }
this.store.setState({ this.store.fixedColumnsHeadRowsHeight = fixedColumnsHeadRowsHeight;
fixedColumnsHeadRowsHeight, this.store.fixedColumnsBodyRowsHeight = fixedColumnsBodyRowsHeight;
fixedColumnsBodyRowsHeight,
});
}, },
resetScrollX() { resetScrollX() {
@ -591,10 +586,6 @@ export default {
}, },
}, },
}; };
return ( return <ExpandableTable {...expandableTableProps} />;
<Provider store={this.store}>
<ExpandableTable {...expandableTableProps} />
</Provider>
);
}, },
}; };

50
components/vc-table/src/TableHeaderRow.jsx
View File

@ -1,9 +1,11 @@
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import { connect } from '../../_util/store';
import { mergeProps } from '../../_util/props-util'; import { mergeProps } from '../../_util/props-util';
const TableHeaderRow = { const TableHeaderRow = {
inject: {
store: { from: 'table-store', default: () => ({}) },
},
props: { props: {
index: PropTypes.number, index: PropTypes.number,
fixed: PropTypes.string, fixed: PropTypes.string,
@ -11,11 +13,29 @@ const TableHeaderRow = {
rows: PropTypes.array, rows: PropTypes.array,
row: PropTypes.array, row: PropTypes.array,
components: PropTypes.object, components: PropTypes.object,
height: PropTypes.any,
customHeaderRow: PropTypes.func, customHeaderRow: PropTypes.func,
prefixCls: PropTypes.prefixCls, prefixCls: PropTypes.string,
}, },
name: 'TableHeaderRow', name: 'TableHeaderRow',
computed: {
height() {
const { fixedColumnsHeadRowsHeight } = this.store;
const { columns, rows, fixed } = this.$props;
const headerHeight = fixedColumnsHeadRowsHeight[0];
if (!fixed) {
return null;
}
if (headerHeight && columns) {
if (headerHeight === 'auto') {
return 'auto';
}
return `${headerHeight / rows.length}px`;
}
return null;
},
},
render(h) { render(h) {
const { row, index, height, components, customHeaderRow, prefixCls } = this; const { row, index, height, components, customHeaderRow, prefixCls } = this;
const HeaderRow = components.header.row; const HeaderRow = components.header.row;
@ -73,26 +93,4 @@ const TableHeaderRow = {
}, },
}; };
function getRowHeight(state, props) { export default TableHeaderRow;
const { fixedColumnsHeadRowsHeight } = state;
const { columns, rows, fixed } = props;
const headerHeight = fixedColumnsHeadRowsHeight[0];
if (!fixed) {
return null;
}
if (headerHeight && columns) {
if (headerHeight === 'auto') {
return 'auto';
}
return `${headerHeight / rows.length}px`;
}
return null;
}
export default connect((state, props) => {
return {
height: getRowHeight(state, props),
};
})(TableHeaderRow);

87
components/vc-table/src/TableRow.jsx
View File

@ -1,6 +1,5 @@
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import { connect } from '../../_util/store';
import TableCell from './TableCell'; import TableCell from './TableCell';
import { initDefaultProps, mergeProps, getStyle } from '../../_util/props-util'; import { initDefaultProps, mergeProps, getStyle } from '../../_util/props-util';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
@ -9,6 +8,9 @@ function noop() {}
const TableRow = { const TableRow = {
name: 'TableRow', name: 'TableRow',
mixins: [BaseMixin], mixins: [BaseMixin],
inject: {
store: { from: 'table-store', default: () => ({}) },
},
props: initDefaultProps( props: initDefaultProps(
{ {
customRow: PropTypes.func, customRow: PropTypes.func,
@ -21,16 +23,12 @@ const TableRow = {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
// onHover: PropTypes.func, // onHover: PropTypes.func,
columns: PropTypes.array, columns: PropTypes.array,
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
index: PropTypes.number, index: PropTypes.number,
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
className: PropTypes.string, className: PropTypes.string,
indent: PropTypes.number, indent: PropTypes.number,
indentSize: PropTypes.number, indentSize: PropTypes.number,
hasExpandIcon: PropTypes.func, hasExpandIcon: PropTypes.func,
hovered: PropTypes.bool.isRequired,
visible: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired,
fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
renderExpandIcon: PropTypes.func, renderExpandIcon: PropTypes.func,
renderExpandIconCell: PropTypes.func, renderExpandIconCell: PropTypes.func,
@ -53,6 +51,37 @@ const TableRow = {
}, },
), ),
computed: {
visible() {
const { expandedRowKeys } = this.store;
const { ancestorKeys } = this.$props;
return !!(ancestorKeys.length === 0 || ancestorKeys.every(k => expandedRowKeys.includes(k)));
},
height() {
const { expandedRowsHeight, fixedColumnsBodyRowsHeight } = this.store;
const { fixed, rowKey } = this.$props;
if (!fixed) {
return null;
}
if (expandedRowsHeight[rowKey]) {
return expandedRowsHeight[rowKey];
}
if (fixedColumnsBodyRowsHeight[rowKey]) {
return fixedColumnsBodyRowsHeight[rowKey];
}
return null;
},
hovered() {
const { currentHoverKey } = this.store;
const { rowKey } = this.$props;
return currentHoverKey === rowKey;
},
},
data() { data() {
// this.shouldRender = this.visible // this.shouldRender = this.visible
return { return {
@ -68,11 +97,14 @@ const TableRow = {
} }
}, },
watch: { watch: {
visible(val) { visible: {
handler(val) {
if (val) { if (val) {
this.shouldRender = true; this.shouldRender = true;
} }
}, },
immediate: true,
},
}, },
updated() { updated() {
@ -117,25 +149,23 @@ const TableRow = {
setExpandedRowHeight() { setExpandedRowHeight() {
const { store, rowKey } = this; const { store, rowKey } = this;
let { expandedRowsHeight } = store.getState(); let { expandedRowsHeight } = store;
const height = this.rowRef.getBoundingClientRect().height; const height = this.rowRef.getBoundingClientRect().height;
expandedRowsHeight = { expandedRowsHeight = {
...expandedRowsHeight, ...expandedRowsHeight,
[rowKey]: height, [rowKey]: height,
}; };
store.setState({ expandedRowsHeight }); store.expandedRowsHeight = expandedRowsHeight;
}, },
setRowHeight() { setRowHeight() {
const { store, rowKey } = this; const { store, rowKey } = this;
const { fixedColumnsBodyRowsHeight } = store.getState(); const { fixedColumnsBodyRowsHeight } = store;
const height = this.rowRef.getBoundingClientRect().height; const height = this.rowRef.getBoundingClientRect().height;
store.setState({ store.fixedColumnsBodyRowsHeight = {
fixedColumnsBodyRowsHeight: {
...fixedColumnsBodyRowsHeight, ...fixedColumnsBodyRowsHeight,
[rowKey]: height, [rowKey]: height,
}, };
});
}, },
getStyle() { getStyle() {
@ -279,33 +309,4 @@ const TableRow = {
}, },
}; };
function getRowHeight(state, props) { export default TableRow;
const { expandedRowsHeight, fixedColumnsBodyRowsHeight } = state;
const { fixed, rowKey } = props;
if (!fixed) {
return null;
}
if (expandedRowsHeight[rowKey]) {
return expandedRowsHeight[rowKey];
}
if (fixedColumnsBodyRowsHeight[rowKey]) {
return fixedColumnsBodyRowsHeight[rowKey];
}
return null;
}
export default connect((state, props) => {
const { currentHoverKey, expandedRowKeys } = state;
const { rowKey, ancestorKeys } = props;
const visible = ancestorKeys.length === 0 || ancestorKeys.every(k => expandedRowKeys.includes(k));
return {
visible,
hovered: currentHoverKey === rowKey,
height: getRowHeight(state, props),
};
})(TableRow);

1
v2-doc Submodule

@ -0,0 +1 @@
Subproject commit 0468ad3010f71ad6b267c66c4f5e28c89c19d83e