perf: table #3531

.prettierignore

@@ -28,4 +28,5 @@ components/style/color/*.less
 .huskyrc
 .gitmodules
 *.png
+v2-doc/
 

components/_util/store/PropTypes.js

@@ -1,7 +0,0 @@
-import PropTypes from '../vue-types';
-
-export const storeShape = PropTypes.shape({
-  subscribe: PropTypes.func.isRequired,
-  setState: PropTypes.func.isRequired,
-  getState: PropTypes.func.isRequired,
-});

components/_util/store/Provider.jsx

@@ -1,15 +0,0 @@
-import { provide } from 'vue';
-import { storeShape } from './PropTypes';
-import { getSlot } from '../props-util';
-export default {
-  name: 'StoreProvider',
-  props: {
-    store: storeShape.isRequired,
-  },
-  created() {
-    provide('storeContext', this.$props);
-  },
-  render() {
-    return getSlot(this);
-  },
-};

components/_util/store/connect.jsx

@@ -1,108 +0,0 @@
-import shallowEqual from '../shallowequal';
-import { inject, createVNode, watchEffect, defineComponent, provide } from 'vue';
-import omit from 'omit.js';
-import { getOptionProps } from '../props-util';
-
-function getDisplayName(WrappedComponent) {
-  return WrappedComponent.name || 'Component';
-}
-
-const defaultMapStateToProps = () => ({});
-export default function connect(mapStateToProps, injectExtraPropsKey) {
-  const shouldSubscribe = !!mapStateToProps;
-  const finalMapStateToProps = mapStateToProps || defaultMapStateToProps;
-  return function wrapWithConnect(WrappedComponent) {
-    const tempProps = omit(WrappedComponent.props || {}, ['store']);
-    const props = {};
-    Object.keys(tempProps).forEach(k => {
-      props[k] = { ...tempProps[k], required: false };
-    });
-    const Connect = {
-      name: `Connect_${getDisplayName(WrappedComponent)}`,
-      inheritAttrs: false,
-      props,
-      setup() {
-        provide(injectExtraPropsKey, undefined); // 断掉 injectExtraPropsKey 的依赖
-        return {
-          storeContext: inject('storeContext', {}),
-          injectExtraProps: injectExtraPropsKey ? inject(injectExtraPropsKey, () => ({})) : {},
-        };
-      },
-      data() {
-        this.store = this.storeContext.store;
-        this.preProps = { ...getOptionProps(this), ...this.injectExtraProps };
-        watchEffect(() => {
-          if (mapStateToProps && mapStateToProps.length === 2) {
-            this.subscribed = finalMapStateToProps(this.store.getState(), {
-              ...this.$props,
-              ...this.injectExtraProps,
-            });
-          }
-        });
-        return {
-          subscribed: finalMapStateToProps(this.store.getState(), {
-            ...this.$props,
-            ...this.injectExtraProps,
-          }),
-        };
-      },
-      mounted() {
-        this.trySubscribe();
-      },
-
-      beforeUnmount() {
-        this.tryUnsubscribe();
-      },
-      methods: {
-        handleChange() {
-          if (!this.unsubscribe) {
-            return;
-          }
-          const props = { ...getOptionProps(this), ...this.injectExtraProps };
-          const nextSubscribed = finalMapStateToProps(this.store.getState(), props);
-          if (
-            !shallowEqual(this.preProps, props) ||
-            !shallowEqual(this.subscribed, nextSubscribed)
-          ) {
-            this.subscribed = nextSubscribed;
-          }
-        },
-
-        trySubscribe() {
-          if (shouldSubscribe) {
-            this.unsubscribe = this.store.subscribe(this.handleChange);
-            this.handleChange();
-          }
-        },
-
-        tryUnsubscribe() {
-          if (this.unsubscribe) {
-            this.unsubscribe();
-            this.unsubscribe = null;
-          }
-        },
-        getWrappedInstance() {
-          return this.$refs.wrappedInstance;
-        },
-      },
-      render() {
-        const { $slots = {}, subscribed, store, $attrs } = this;
-        const props = { ...getOptionProps(this), ...this.injectExtraProps };
-        this.preProps = { ...props };
-        const wrapProps = {
-          ...$attrs,
-          ...props,
-          ...subscribed,
-          store,
-          ref: 'wrappedInstance',
-        };
-        // const slots = {};
-        // for (let [key, value] of Object.entries($slots)) {
-        //   slots[key] = () => value();
-        // }
-        return createVNode(WrappedComponent, wrapProps, $slots);
-      },
-    };
-    return defineComponent(Connect);
-  };
-}

components/_util/store/create.js

@@ -1,30 +0,0 @@
-export default function create(initialState) {
-  let state = initialState;
-  const listeners = [];
-
-  function setState(partial) {
-    state = { ...state, ...partial };
-    for (let i = 0; i < listeners.length; i++) {
-      listeners[i]();
-    }
-  }
-
-  function getState() {
-    return state;
-  }
-
-  function subscribe(listener) {
-    listeners.push(listener);
-
-    return function unsubscribe() {
-      const index = listeners.indexOf(listener);
-      listeners.splice(index, 1);
-    };
-  }
-
-  return {
-    setState,
-    getState,
-    subscribe,
-  };
-}

components/_util/store/index.js

@@ -1,5 +0,0 @@
-export { default as Provider } from './Provider';
-
-export { default as connect } from './connect';
-
-export { default as create } from './create';

components/table/SelectionBox.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import Checkbox from '../checkbox';
 import Radio from '../radio';
 import { SelectionBoxProps } from './interface';
@@ -11,52 +11,21 @@ export default defineComponent({
   inheritAttrs: false,
   props: SelectionBoxProps,
 
-  setup() {
+  setup(props) {
     return {
-      unsubscribe: null,
+      checked: computed(() => {
+        const { store, defaultSelection, rowIndex } = props;
+        let checked = false;
+        if (store.selectionDirty) {
+          checked = store.selectedRowKeys.indexOf(rowIndex) >= 0;
+        } else {
+          checked =
+            store.selectedRowKeys.indexOf(rowIndex) >= 0 || defaultSelection.indexOf(rowIndex) >= 0;
+        }
+        return checked;
+      }),
     };
   },
-  data() {
-    return {
-      checked: false,
-    };
-  },
-
-  created() {
-    this.checked = this.getCheckState(this.$props);
-  },
-
-  mounted() {
-    this.subscribe();
-  },
-
-  beforeUnmount() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  },
-  methods: {
-    getCheckState(props): boolean {
-      const { store, defaultSelection, rowIndex } = props;
-      let checked = false;
-      if (store.getState().selectionDirty) {
-        checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0;
-      } else {
-        checked =
-          store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 ||
-          defaultSelection.indexOf(rowIndex) >= 0;
-      }
-      return checked;
-    },
-    subscribe() {
-      const { store } = this;
-      this.unsubscribe = store.subscribe(() => {
-        const checked = this.getCheckState(this.$props);
-        this.setState({ checked });
-      });
-    },
-  },
-
   render() {
     const { type, rowIndex, ...rest } = { ...getOptionProps(this), ...this.$attrs } as any;
     const { checked } = this;

components/table/SelectionCheckboxAll.tsx

@@ -5,7 +5,7 @@ import Menu from '../menu';
 import classNames from '../_util/classNames';
 import { SelectionCheckboxAllProps } from './interface';
 import BaseMixin from '../_util/BaseMixin';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
 function checkSelection({
   store,
@@ -17,7 +17,7 @@ function checkSelection({
 }) {
   return byDefaultChecked
     ? 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) {
@@ -53,7 +53,7 @@ function getIndeterminateState(props) {
       byDefaultChecked: true,
     });
 
-  if (store.getState().selectionDirty) {
+  if (store.selectionDirty) {
     return someCheckedNotByDefaultChecked;
   }
   return someCheckedNotByDefaultChecked || someCheckedByDefaultChecked;
@@ -64,7 +64,7 @@ function getCheckState(props) {
   if (!data.length) {
     return false;
   }
-  if (store.getState().selectionDirty) {
+  if (store.selectionDirty) {
     return checkSelection({
       ...props,
       data,
@@ -94,28 +94,17 @@ export default defineComponent({
   inheritAttrs: false,
   props: SelectionCheckboxAllProps,
 
-  setup() {
+  setup(props) {
     return {
       defaultSelections: [],
-      unsubscribe: null,
+      checked: computed(() => {
+        return getCheckState(props);
+      }),
+      indeterminate: computed(() => {
+        return getIndeterminateState(props);
+      }),
     };
   },
-  data() {
-    const { $props: props } = this;
-
-    return {
-      checked: getCheckState(props),
-      indeterminate: getIndeterminateState(props),
-    };
-  },
-
-  watch: {
-    propsSymbol: {
-      handler() {
-        this.setCheckState(this.$props);
-      },
-    },
-  },
 
   created() {
     const { $props: props } = this;
@@ -132,55 +121,11 @@ export default defineComponent({
           },
         ];
   },
-
-  mounted() {
-    this.subscribe();
-  },
-
-  beforeUnmount() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  },
   methods: {
-    checkSelection(props, data, type, byDefaultChecked) {
-      const { store, getCheckboxPropsByItem, getRecordKey } = props || this.$props;
-      // type should be 'every' | 'some'
-      if (type === 'every' || type === 'some') {
-        return byDefaultChecked
-          ? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
-          : data[type](
-              (item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0,
-            );
-      }
-      return false;
-    },
-
-    setCheckState(props) {
-      const checked = getCheckState(props);
-      const indeterminate = getIndeterminateState(props);
-      this.setState(prevState => {
-        const newState: any = {};
-        if (indeterminate !== prevState.indeterminate) {
-          newState.indeterminate = indeterminate;
-        }
-        if (checked !== prevState.checked) {
-          newState.checked = checked;
-        }
-        return newState;
-      });
-    },
-
     handleSelectAllChange(e) {
       const { checked } = e.target;
       this.$emit('select', checked ? 'all' : 'removeAll', 0, null);
     },
-    subscribe() {
-      const { store } = this;
-      this.unsubscribe = store.subscribe(() => {
-        this.setCheckState(this.$props);
-      });
-    },
 
     renderMenus(selections) {
       return selections.map((selection, index) => {

components/table/Table.tsx

@@ -1,11 +1,10 @@
-import { defineComponent, inject, markRaw } from 'vue';
+import { defineComponent, inject, markRaw, reactive } from 'vue';
 import CaretUpFilled from '@ant-design/icons-vue/CaretUpFilled';
 import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled';
 import VcTable, { INTERNAL_COL_DEFINE } from '../vc-table';
 import classNames from '../_util/classNames';
 import shallowEqual from '../_util/shallowequal';
 import FilterDropdown from './filterDropdown';
-import createStore from './createStore';
 import SelectionBox from './SelectionBox';
 import SelectionCheckboxAll from './SelectionCheckboxAll';
 import Column from './Column';
@@ -140,11 +139,15 @@ export default defineComponent({
   ColumnGroup,
   props: defaultTableProps,
 
-  setup() {
+  setup(props) {
+    const store = reactive({
+      selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
+      selectionDirty: false,
+    });
     return {
       vcTable: null,
       checkboxPropsCache: {},
-      store: null,
+      store,
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
@@ -189,26 +192,20 @@ export default defineComponent({
     rowSelection: {
       handler(val, oldVal) {
         if (val && 'selectedRowKeys' in val) {
-          this.store.setState({
+          this.store.selectedRowKeys = val.selectedRowKeys || [];
-            selectedRowKeys: val.selectedRowKeys || [],
-          });
           const { rowSelection } = this;
           if (rowSelection && val.getCheckboxProps !== rowSelection.getCheckboxProps) {
             this.checkboxPropsCache = {};
           }
         } else if (oldVal && !val) {
-          this.store.setState({
+          this.store.selectedRowKeys = [];
-            selectedRowKeys: [],
-          });
         }
       },
       deep: true,
     },
 
     dataSource() {
-      this.store.setState({
+      this.store.selectionDirty = false;
-        selectionDirty: false,
-      });
       this.checkboxPropsCache = {};
     },
 
@@ -235,13 +232,6 @@ export default defineComponent({
       deep: true,
     },
   },
-  created() {
-    const props = getOptionProps(this);
-    this.store = createStore({
-      selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
-      selectionDirty: false,
-    });
-  },
   updated() {
     const { columns, sSortColumn: sortColumn, sSortOrder: sortOrder } = this;
     if (this.getSortOrderColumns(columns).length > 0) {
@@ -470,7 +460,7 @@ export default defineComponent({
       const { selectWay, record, checked, changeRowKeys, nativeEvent } = selectionInfo;
       const rowSelection = getRowSelection(this.$props);
       if (rowSelection && !('selectedRowKeys' in rowSelection)) {
-        this.store.setState({ selectedRowKeys });
+        this.store.selectedRowKeys = selectedRowKeys;
       }
       const data = this.getFlatData();
       if (!rowSelection.onChange && !rowSelection[selectWay]) {
@@ -583,9 +573,7 @@ export default defineComponent({
 
       this.setState(newState, () => {
         this.scrollToFirstRow();
-        this.store.setState({
+        this.store.selectionDirty = false;
-          selectionDirty: false,
-        });
         this.$emit(
           'change',
           ...this.prepareParamsArguments({
@@ -601,10 +589,8 @@ export default defineComponent({
     handleSelect(record, rowIndex, e) {
       const checked = e.target.checked;
       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 { pivot } = this.$data;
       const rows = this.getFlatCurrentPageData();
@@ -637,9 +623,7 @@ export default defineComponent({
         }
 
         this.setState({ pivot: realIndex });
-        this.store.setState({
+        this.store.selectionDirty = true;
-          selectionDirty: true,
-        });
         this.setSelectedRowKeys(selectedRowKeys, {
           selectWay: 'onSelectMultiple',
           record,
@@ -654,9 +638,7 @@ export default defineComponent({
           selectedRowKeys = selectedRowKeys.filter(i => key !== i);
         }
         this.setState({ pivot: realIndex });
-        this.store.setState({
+        this.store.selectionDirty = true;
-          selectionDirty: true,
-        });
         this.setSelectedRowKeys(selectedRowKeys, {
           selectWay: 'onSelect',
           record,
@@ -672,9 +654,7 @@ export default defineComponent({
       const nativeEvent = e.nativeEvent;
       const key = this.getRecordKey(record, rowIndex);
       const selectedRowKeys = [key];
-      this.store.setState({
+      this.store.selectionDirty = true;
-        selectionDirty: true,
-      });
       this.setSelectedRowKeys(selectedRowKeys, {
         selectWay: 'onSelect',
         record,
@@ -686,10 +666,8 @@ export default defineComponent({
 
     handleSelectRow(selectionKey, index, onSelectFunc) {
       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
         .filter((item, i) => !this.getCheckboxPropsByItem(item, i).disabled)
         .map((item, i) => this.getRecordKey(item, i));
@@ -733,10 +711,7 @@ export default defineComponent({
         default:
           break;
       }
-
+      this.store.selectionDirty = true;
-      this.store.setState({
-        selectionDirty: true,
-      });
       // when select custom selection, callback selections[n].onSelect
       const { rowSelection } = this;
       let customSelectionStartIndex = 2;
@@ -779,9 +754,7 @@ export default defineComponent({
       }
       this.setState(newState, this.scrollToFirstRow);
 
-      this.store.setState({
+      this.store.selectionDirty = false;
-        selectionDirty: false,
-      });
       this.$emit(
         'change',
         ...this.prepareParamsArguments({

components/table/__tests__/SelectionBox.test.js

@@ -1,10 +1,9 @@
 import * as Vue from 'vue';
 import { mount } from '@vue/test-utils';
-import createStore from '../createStore';
 import SelectionBox from '../SelectionBox';
 
 const getDefaultStore = selectedRowKeys => {
-  return createStore({
+  return Vue.reactive({
     selectedRowKeys: selectedRowKeys || [],
     selectionDirty: false,
   });
@@ -26,7 +25,7 @@ describe('SelectionBox', () => {
       sync: false,
     });
 
-    expect(wrapper.vm.$data).toEqual({ checked: false });
+    expect(wrapper.vm.checked).toEqual(false);
   });
 
   it('checked by selectedRowKeys ', () => {
@@ -41,7 +40,7 @@ describe('SelectionBox', () => {
       sync: false,
     });
 
-    expect(wrapper.vm.$data).toEqual({ checked: true });
+    expect(wrapper.vm.checked).toEqual(true);
   });
 
   it('checked by defaultSelection', () => {
@@ -55,8 +54,7 @@ describe('SelectionBox', () => {
       },
       sync: false,
     });
-
+    expect(wrapper.vm.checked).toEqual(true);
-    expect(wrapper.vm.$data).toEqual({ checked: true });
   });
 
   it('checked when store change', () => {
@@ -72,12 +70,10 @@ describe('SelectionBox', () => {
       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 => {

components/table/__tests__/Table.rowSelection.test.js

@@ -46,7 +46,7 @@ describe('Table.rowSelection', () => {
     checkboxAll.element.checked = true;
     checkboxAll.trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper).getState()).toEqual({
+      expect(getStore(wrapper)).toEqual({
         selectedRowKeys: [0, 1, 2, 3],
         selectionDirty: true,
       });
@@ -54,7 +54,7 @@ describe('Table.rowSelection', () => {
     checkboxes[1].element.checked = false;
     checkboxes[1].trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper).getState()).toEqual({
+      expect(getStore(wrapper)).toEqual({
         selectedRowKeys: [1, 2, 3],
         selectionDirty: true,
       });
@@ -62,7 +62,7 @@ describe('Table.rowSelection', () => {
     checkboxes[1].element.checked = true;
     checkboxes[1].trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper).getState()).toEqual({
+      expect(getStore(wrapper)).toEqual({
         selectedRowKeys: [1, 2, 3, 0],
         selectionDirty: true,
       });
@@ -77,7 +77,7 @@ describe('Table.rowSelection', () => {
     radios[0].element.checked = true;
     radios[0].trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper).getState()).toEqual({
+      expect(getStore(wrapper)).toEqual({
         selectedRowKeys: [0],
         selectionDirty: true,
       });
@@ -85,7 +85,7 @@ describe('Table.rowSelection', () => {
     radios[radios.length - 1].element.checked = true;
     radios[radios.length - 1].trigger('change');
     await asyncExpect(() => {
-      expect(getStore(wrapper).getState()).toEqual({
+      expect(getStore(wrapper)).toEqual({
         selectedRowKeys: [3],
         selectionDirty: true,
       });
@@ -163,14 +163,14 @@ describe('Table.rowSelection', () => {
   it('can be controlled', async () => {
     const wrapper = mount(Table, getTableOptions({ rowSelection: { selectedRowKeys: [0] } }));
 
-    expect(getStore(wrapper).getState()).toEqual({
+    expect(getStore(wrapper)).toEqual({
       selectedRowKeys: [0],
       selectionDirty: false,
     });
 
     wrapper.setProps({ rowSelection: { selectedRowKeys: [1] } });
     await asyncExpect(() => {
-      expect(getStore(wrapper).getState()).toEqual({
+      expect(getStore(wrapper)).toEqual({
         selectedRowKeys: [1],
         selectionDirty: false,
       });

components/table/createBodyRow.tsx

@@ -1,11 +1,10 @@
 import PropTypes from '../_util/vue-types';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
-import { Store } from './createStore';
 import { getSlot } from '../_util/props-util';
 import omit from 'omit.js';
 
 const BodyRowProps = {
-  store: Store,
+  store: PropTypes.object,
   rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   prefixCls: PropTypes.string,
 };
@@ -15,40 +14,11 @@ export default function createBodyRow(Component = 'tr') {
     name: 'BodyRow',
     inheritAttrs: false,
     props: BodyRowProps,
-    setup() {
+    setup(props) {
       return {
-        unsubscribe: null,
+        selected: computed(() => props.store?.selectedRowKeys.indexOf(props.rowKey) >= 0),
       };
     },
-    data() {
-      const { selectedRowKeys } = this.store.getState();
-
-      return {
-        selected: selectedRowKeys.indexOf(this.rowKey) >= 0,
-      };
-    },
-    mounted() {
-      this.subscribe();
-    },
-
-    beforeUnmount() {
-      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() {
       const rowProps = omit({ ...this.$props, ...this.$attrs }, [
         'prefixCls',

components/table/createStore.tsx

@@ -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;

components/table/interface.ts

@@ -1,8 +1,7 @@
-import { ExtractPropTypes, PropType } from 'vue';
+import { ExtractPropTypes, PropType, UnwrapRef } from 'vue';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import { PaginationProps as getPaginationProps, PaginationConfig } from '../pagination';
 import { SpinProps as getSpinProps } from '../spin';
-import { Store } from './createStore';
 import { tuple } from '../_util/type';
 
 const PaginationProps = getPaginationProps();
@@ -196,10 +195,13 @@ export interface TransformCellTextProps {
 //   text: PropTypes.any,
 //   onSelect: SelectionItemSelectFn;
 // }
-
+export type TableStore = UnwrapRef<{
+  selectedRowKeys: any[];
+  selectionDirty: boolean;
+}>;
 export const SelectionCheckboxAllProps = {
   propsSymbol: PropTypes.any,
-  store: Store,
+  store: PropTypes.any,
   locale: PropTypes.any,
   disabled: PropTypes.looseBool,
   getCheckboxPropsByItem: PropTypes.func,
@@ -218,7 +220,7 @@ export const SelectionCheckboxAllProps = {
 // }
 
 export const SelectionBoxProps = {
-  store: Store,
+  store: PropTypes.any,
   type: RowSelectionType,
   defaultSelection: PropTypes.array,
   rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

components/vc-table/src/BaseTable.jsx

@@ -5,7 +5,6 @@ import ColGroup from './ColGroup';
 import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import ExpandableRow from './ExpandableRow';
-import { connect } from '../../_util/store';
 function noop() {}
 const BaseTable = {
   name: 'BaseTable',
@@ -16,14 +15,14 @@ const BaseTable = {
     tableClassName: PropTypes.string.isRequired,
     hasHead: PropTypes.looseBool.isRequired,
     hasBody: PropTypes.looseBool.isRequired,
-    store: PropTypes.object.isRequired,
     expander: PropTypes.object.isRequired,
     getRowKey: PropTypes.func,
     isAnyColumnsFixed: PropTypes.looseBool,
   },
   setup() {
     return {
-      table: inject('table', {}),
+      table: inject('table', () => ({})),
+      store: inject('table-store', () => ({})),
     };
   },
   methods: {
@@ -40,9 +39,7 @@ const BaseTable = {
       }));
     },
     handleRowHover(isHover, key) {
-      this.store.setState({
+      this.store.currentHoverKey = isHover ? key : null;
-        currentHoverKey: isHover ? key : null,
-      });
     },
 
     renderRows(renderData, indent, ancestorKeys = []) {
@@ -180,4 +177,4 @@ const BaseTable = {
   },
 };
 
-export default connect()(BaseTable);
+export default BaseTable;

components/vc-table/src/ExpandableRow.jsx

@@ -1,8 +1,8 @@
 import PropTypes, { withUndefined } from '../../_util/vue-types';
 import ExpandIcon from './ExpandIcon';
 import BaseMixin from '../../_util/BaseMixin';
-import { connect } from '../../_util/store';
 import { getSlot } from '../../_util/props-util';
+import { computed, inject } from 'vue';
 
 const ExpandableRow = {
   mixins: [BaseMixin],
@@ -16,7 +16,6 @@ const ExpandableRow = {
     indentSize: PropTypes.number,
     needIndentSpaced: PropTypes.looseBool.isRequired,
     expandRowByClick: PropTypes.looseBool,
-    expanded: PropTypes.looseBool.isRequired,
     expandIconAsCell: PropTypes.looseBool,
     expandIconColumnIndex: PropTypes.number,
     childrenColumnName: PropTypes.string,
@@ -26,6 +25,12 @@ const ExpandableRow = {
     // onRowClick: PropTypes.func,
     // children: PropTypes.func.isRequired,
   },
+  setup(props) {
+    const store = inject('table-store', () => ({}));
+    return {
+      expanded: computed(() => store.expandedRowKeys.includes(props.rowKey)),
+    };
+  },
 
   beforeUnmount() {
     this.handleDestroy();
@@ -117,6 +122,4 @@ const ExpandableRow = {
   },
 };
 
-export default connect(({ expandedRowKeys }, { rowKey }) => ({
+export default ExpandableRow;
-  expanded: expandedRowKeys.includes(rowKey),
-}))(ExpandableRow);

components/vc-table/src/ExpandableTable.jsx

@@ -1,10 +1,10 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { connect } from '../../_util/store';
 import shallowEqual from '../../_util/shallowequal';
 import TableRow from './TableRow';
 import { remove } from './utils';
 import { initDefaultProps, getOptionProps, getSlot } from '../../_util/props-util';
+import { inject } from 'vue';
 
 export const ExpandableTableProps = () => ({
   expandIconAsCell: PropTypes.looseBool,
@@ -21,7 +21,6 @@ export const ExpandableTableProps = () => ({
   // onExpand: PropTypes.func,
   // onExpandedRowsChange: PropTypes.func,
   columnManager: PropTypes.object.isRequired,
-  store: PropTypes.object.isRequired,
   prefixCls: PropTypes.string.isRequired,
   data: PropTypes.array,
   getRowKey: PropTypes.func,
@@ -40,8 +39,8 @@ const ExpandableTable = {
     childrenColumnName: 'children',
     indentSize: 15,
   }),
-
+  setup(props) {
-  data() {
+    const store = inject('table-store', () => ({}));
     const {
       data,
       childrenColumnName,
@@ -49,7 +48,7 @@ const ExpandableTable = {
       expandedRowKeys,
       defaultExpandedRowKeys,
       getRowKey,
-    } = this;
+    } = props;
 
     let finalExpandedRowKeys = [];
     let rows = [...data];
@@ -63,15 +62,11 @@ const ExpandableTable = {
     } else {
       finalExpandedRowKeys = expandedRowKeys || defaultExpandedRowKeys;
     }
-
+    Object.assign(store, {
-    // this.columnManager = props.columnManager
-    // this.store = props.store
-
-    this.store.setState({
       expandedRowsHeight: {},
       expandedRowKeys: finalExpandedRowKeys,
     });
-    return {};
+    return { store };
   },
   mounted() {
     this.handleUpdated();
@@ -82,9 +77,7 @@ const ExpandableTable = {
   watch: {
     expandedRowKeys(val) {
       this.$nextTick(() => {
-        this.store.setState({
+        this.store.expandedRowKeys = val;
-          expandedRowKeys: val,
-        });
       });
     },
   },
@@ -99,7 +92,7 @@ const ExpandableTable = {
         event.stopPropagation();
       }
 
-      let { expandedRowKeys } = this.store.getState();
+      let { expandedRowKeys } = this.store;
 
       if (expanded) {
         // row was expaned
@@ -113,7 +106,7 @@ const ExpandableTable = {
       }
 
       if (!this.expandedRowKeys) {
-        this.store.setState({ expandedRowKeys });
+        this.store.expandedRowKeys = expandedRowKeys;
       }
       // De-dup of repeat call
       if (!this.latestExpandedRows || !shallowEqual(this.latestExpandedRows, expandedRowKeys)) {
@@ -164,7 +157,7 @@ const ExpandableTable = {
         {
           key: 'extra-row',
           customRender: () => {
-            const { expandedRowKeys } = this.store.getState();
+            const { expandedRowKeys } = this.store;
             const expanded = expandedRowKeys.includes(parentKey);
             return {
               props: { colSpan: colCount },
@@ -245,4 +238,4 @@ const ExpandableTable = {
   },
 };
 
-export default connect()(ExpandableTable);
+export default ExpandableTable;

components/vc-table/src/Table.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { provide, markRaw, defineComponent, nextTick } from 'vue';
+import { provide, markRaw, defineComponent, nextTick, reactive } from 'vue';
 import shallowequal from '../../_util/shallowequal';
 import merge from 'lodash-es/merge';
 import classes from '../../_util/component-classes';
@@ -8,7 +8,6 @@ import PropTypes from '../../_util/vue-types';
 import { debounce, getDataAndAriaProps } from './utils';
 import warning from '../../_util/warning';
 import addEventListener from '../../vc-util/Dom/addEventListener';
-import { Provider, create } from '../../_util/store';
 import ColumnManager from './ColumnManager';
 import HeadTable from './HeadTable';
 import BodyTable from './BodyTable';
@@ -85,6 +84,19 @@ export default defineComponent({
       customHeaderRow: () => {},
     },
   ),
+  setup() {
+    const store = reactive({
+      currentHoverKey: null,
+      fixedColumnsHeadRowsHeight: [],
+      fixedColumnsBodyRowsHeight: {},
+      expandedRowsHeight: {},
+      expandedRowKeys: [],
+    });
+    provide('table-store', store);
+    return {
+      store,
+    };
+  },
   data() {
     this.preData = [...this.data];
     return {
@@ -146,11 +158,6 @@ export default defineComponent({
       }
     },
   },
-
-  // static childContextTypes = {
-  //   table: PropTypes.any,
-  //   components: PropTypes.any,
-  // },
   created() {
     provide('table', this);
     // ['rowClick', 'rowDoubleclick', 'rowContextmenu', 'rowMouseenter', 'rowMouseleave'].forEach(
@@ -169,12 +176,6 @@ export default defineComponent({
 
     // this.columnManager = new ColumnManager(this.columns, this.$slots.default)
 
-    this.store = create({
-      currentHoverKey: null,
-      fixedColumnsHeadRowsHeight: [],
-      fixedColumnsBodyRowsHeight: {},
-    });
-
     this.setScrollPosition('left');
 
     this.debouncedWindowResize = debounce(this.handleWindowResize, 150);
@@ -299,10 +300,12 @@ export default defineComponent({
         ? this.ref_headTable.querySelectorAll('thead')
         : this.ref_bodyTable.querySelectorAll('thead');
       const bodyRows = this.ref_bodyTable.querySelectorAll(`.${prefixCls}-row`) || [];
-      const fixedColumnsHeadRowsHeight = [].map.call(headRows, row =>
+      const fixedColumnsHeadRowsHeight = [].map.call(headRows, row => {
-        row.getBoundingClientRect().height ? row.getBoundingClientRect().height - 0.5 : 'auto',
+        return row.getBoundingClientRect().height
-      );
+          ? row.getBoundingClientRect().height - 0.5
-      const state = this.store.getState();
+          : 'auto';
+      });
+      const state = this.store;
       const fixedColumnsBodyRowsHeight = [].reduce.call(
         bodyRows,
         (acc, row) => {
@@ -322,10 +325,8 @@ export default defineComponent({
       ) {
         return;
       }
-      this.store.setState({
+      this.store.fixedColumnsHeadRowsHeight = fixedColumnsHeadRowsHeight;
-        fixedColumnsHeadRowsHeight,
+      this.store.fixedColumnsBodyRowsHeight = fixedColumnsBodyRowsHeight;
-        fixedColumnsBodyRowsHeight,
-      });
     },
 
     resetScrollX() {
@@ -343,10 +344,6 @@ export default defineComponent({
     },
 
     handleBodyScrollLeft(e) {
-      // Fix https://github.com/ant-design/ant-design/issues/7635
-      if (e.currentTarget !== e.target) {
-        return;
-      }
       const target = e.target;
       const { scroll = {} } = this;
       const { ref_headTable, ref_bodyTable } = this;
@@ -566,32 +563,30 @@ export default defineComponent({
       getRowKey,
     };
     return (
-      <Provider store={this.store}>
+      <ExpandableTable
-        <ExpandableTable
+        {...expandableTableProps}
-          {...expandableTableProps}
+        v-slots={{
-          v-slots={{
+          default: expander => {
-            default: expander => {
+            this.expander = expander;
-              this.expander = expander;
+            return (
-              return (
+              <div
-                <div
+                ref={this.saveTableNodeRef}
-                  ref={this.saveTableNodeRef}
+                class={tableClassName}
-                  class={tableClassName}
+                style={props.style}
-                  style={props.style}
+                id={props.id}
-                  id={props.id}
+                {...dataAndAriaProps}
-                  {...dataAndAriaProps}
+              >
-                >
+                {this.renderTitle()}
-                  {this.renderTitle()}
+                <div class={`${prefixCls}-content`}>
-                  <div class={`${prefixCls}-content`}>
+                  {this.renderMainTable()}
-                    {this.renderMainTable()}
+                  {hasLeftFixed && this.renderLeftFixedTable()}
-                    {hasLeftFixed && this.renderLeftFixedTable()}
+                  {hasRightFixed && this.renderRightFixedTable()}
-                    {hasRightFixed && this.renderRightFixedTable()}
-                  </div>
                 </div>
-              );
+              </div>
-            },
+            );
-          }}
+          },
-        />
+        }}
-      </Provider>
+      />
     );
   },
 });

components/vc-table/src/TableHeaderRow.jsx

@@ -1,6 +1,6 @@
 import classNames from '../../_util/classNames';
 import PropTypes from '../../_util/vue-types';
-import { connect } from '../../_util/store';
+import { computed, inject } from 'vue';
 
 const TableHeaderRow = {
   name: 'TableHeaderRow',
@@ -12,10 +12,31 @@ const TableHeaderRow = {
     rows: PropTypes.array,
     row: PropTypes.array,
     components: PropTypes.object,
-    height: PropTypes.any,
     customHeaderRow: PropTypes.func,
     prefixCls: PropTypes.prefixCls,
   },
+  setup(props) {
+    const store = inject('table-store', () => ({}));
+    return {
+      height: computed(() => {
+        const { fixedColumnsHeadRowsHeight } = store;
+        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;
+      }),
+    };
+  },
   render() {
     const { row, index, height, components, customHeaderRow, prefixCls } = this;
     const HeaderRow = components.header.row;
@@ -67,26 +88,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);

components/vc-table/src/TableRow.jsx

@@ -1,10 +1,10 @@
 import classNames from '../../_util/classNames';
 import PropTypes, { withUndefined } from '../../_util/vue-types';
-import { connect } from '../../_util/store';
 import TableCell from './TableCell';
 import { initDefaultProps, findDOMNode } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 import warning from '../../_util/warning';
+import { computed, inject } from 'vue';
 function noop() {}
 const TableRow = {
   name: 'TableRow',
@@ -22,16 +22,12 @@ const TableRow = {
       prefixCls: PropTypes.string,
       // onHover: PropTypes.func,
       columns: PropTypes.array,
-      height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       index: PropTypes.number,
       rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
       className: PropTypes.string,
       indent: PropTypes.number,
       indentSize: PropTypes.number,
       hasExpandIcon: PropTypes.func,
-      hovered: PropTypes.looseBool.isRequired,
-      visible: PropTypes.looseBool.isRequired,
-      store: PropTypes.object.isRequired,
       fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])),
       renderExpandIcon: PropTypes.func,
       renderExpandIconCell: PropTypes.func,
@@ -54,8 +50,45 @@ const TableRow = {
     },
   ),
 
+  setup(props) {
+    const store = inject('table-store', () => ({}));
+    const visible = computed(() => {
+      const { expandedRowKeys } = store;
+      const { ancestorKeys } = props;
+      return !!(ancestorKeys.length === 0 || ancestorKeys.every(k => expandedRowKeys.includes(k)));
+    });
+    const height = computed(() => {
+      const { expandedRowsHeight, fixedColumnsBodyRowsHeight } = store;
+      const { fixed, rowKey } = props;
+
+      if (!fixed) {
+        return null;
+      }
+
+      if (expandedRowsHeight[rowKey]) {
+        return expandedRowsHeight[rowKey];
+      }
+
+      if (fixedColumnsBodyRowsHeight[rowKey]) {
+        return fixedColumnsBodyRowsHeight[rowKey];
+      }
+
+      return null;
+    });
+    const hovered = computed(() => {
+      const { currentHoverKey } = store;
+      const { rowKey } = props;
+      return currentHoverKey === rowKey;
+    });
+    return {
+      store,
+      visible,
+      hovered,
+      height,
+    };
+  },
+
   data() {
-    // this.shouldRender = this.visible
     this.rowRef = null;
     return {
       shouldRender: this.visible,
@@ -119,25 +152,23 @@ const TableRow = {
 
     setExpandedRowHeight() {
       const { store, rowKey } = this;
-      let { expandedRowsHeight } = store.getState();
+      let { expandedRowsHeight } = store;
       const height = this.rowRef.getBoundingClientRect().height;
       expandedRowsHeight = {
         ...expandedRowsHeight,
         [rowKey]: height,
       };
-      store.setState({ expandedRowsHeight });
+      store.expandedRowsHeight = expandedRowsHeight;
     },
 
     setRowHeight() {
       const { store, rowKey } = this;
-      const { fixedColumnsBodyRowsHeight } = store.getState();
+      const { fixedColumnsBodyRowsHeight } = store;
       const height = this.rowRef.getBoundingClientRect().height;
-      store.setState({
+      store.fixedColumnsBodyRowsHeight = {
-        fixedColumnsBodyRowsHeight: {
+        ...fixedColumnsBodyRowsHeight,
-          ...fixedColumnsBodyRowsHeight,
+        [rowKey]: height,
-          [rowKey]: height,
+      };
-        },
-      });
     },
 
     getStyle() {
@@ -269,33 +300,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);

package.json

@@ -157,7 +157,7 @@
     "pretty-quick": "^2.0.0",
     "prismjs": "^1.20.0",
     "querystring": "^0.2.0",
-    "raw-loader": "^4.0.1",
+    "raw-loader": "^4.0.2",
     "reqwest": "^2.0.5",
     "rimraf": "^3.0.0",
     "rucksack-css": "^1.0.2",
@@ -187,6 +187,7 @@
     "vue-infinite-scroll": "^2.0.2",
     "vue-jest": "^5.0.0-alpha.3",
     "vue-loader": "^16.1.1",
+    "vue-request": "^1.0.2",
     "vue-router": "^4.0.0",
     "vue-server-renderer": "^2.6.11",
     "vue-style-loader": "^4.1.2",

v2-doc

@@ -1 +1 @@
-Subproject commit 93f8ec64f669520f7bdd060206422719631220b3
+Subproject commit 0468ad3010f71ad6b267c66c4f5e28c89c19d83e

webpack.config.js

@@ -51,16 +51,15 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(vue|md)$/,
+        test: /\.md$/,
+        loader: 'raw-loader',
+      },
+      {
+        test: /\.(vue)$/,
         loader: 'vue-loader',
-        exclude: /\.(en-US.md|zh-CN.md)$/,
       },
       {
-        test: /\.(en-US.md|zh-CN.md)$/,
+        test: /\.(ts|tsx)?$/,
-        use: [{ loader: 'vue-loader' }, { loader: './loader.js' }],
-      },
-      {
-        test: /\.tsx?$/,
         use: [
           {
             loader: 'babel-loader',
@@ -68,6 +67,11 @@ module.exports = {
           },
           {
             loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: ['\\.vue$'],
+              happyPackMode: false,
+            },
           },
         ],
         exclude: /node_modules/,