vben
2021-08-24 56a966cfbf8db5b29a42185f0f25a0e800c30dbb
src/components/Table/src/hooks/useTable.ts
@@ -2,16 +2,9 @@
import type { PaginationProps } from '../types/pagination';
import type { DynamicProps } from '/#/utils';
import type { FormActionType } from '/@/components/Form';
// import type { WatchStopHandle } from 'vue';
import type { WatchStopHandle } from 'vue';
import { getDynamicProps } from '/@/utils';
import {
  ref,
  onUnmounted,
  unref,
  // watch,
  toRaw,
} from 'vue';
import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
import { isProdMode } from '/@/utils/env';
import { error } from '/@/utils/log';
@@ -25,13 +18,13 @@
  (instance: TableActionType, formInstance: UseTableMethod) => void,
  TableActionType & {
    getForm: () => FormActionType;
  }
  },
] {
  const tableRef = ref<Nullable<TableActionType>>(null);
  const loadedRef = ref<Nullable<boolean>>(false);
  const formRef = ref<Nullable<UseTableMethod>>(null);
  // let stopWatch: WatchStopHandle;
  let stopWatch: WatchStopHandle;
  function register(instance: TableActionType, formInstance: UseTableMethod) {
    isProdMode() &&
@@ -47,25 +40,25 @@
    tableProps && instance.setProps(getDynamicProps(tableProps));
    loadedRef.value = true;
    // stopWatch?.();
    stopWatch?.();
    // stopWatch = watch(
    //   () => tableProps,
    //   () => {
    //     tableProps && instance.setProps(getDynamicProps(tableProps));
    //   },
    //   {
    //     immediate: true,
    //     deep: true,
    //   }
    // );
    stopWatch = watch(
      () => tableProps,
      () => {
        tableProps && instance.setProps(getDynamicProps(tableProps));
      },
      {
        immediate: true,
        deep: true,
      },
    );
  }
  function getTableInstance(): TableActionType {
    const table = unref(tableRef);
    if (!table) {
      error(
        'The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!'
        'The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!',
      );
    }
    return table as TableActionType;
@@ -88,6 +81,9 @@
    },
    getDataSource: () => {
      return getTableInstance().getDataSource();
    },
    getRawDataSource: () => {
      return getTableInstance().getRawDataSource();
    },
    getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
      const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
@@ -126,6 +122,12 @@
    updateTableData: (index: number, key: string, value: any) => {
      return getTableInstance().updateTableData(index, key, value);
    },
    updateTableDataRecord: (rowKey: string | number, record: Recordable) => {
      return getTableInstance().updateTableDataRecord(rowKey, record);
    },
    findTableDataRecord: (rowKey: string | number) => {
      return getTableInstance().findTableDataRecord(rowKey);
    },
    getRowSelection: () => {
      return toRaw(getTableInstance().getRowSelection());
    },