perf(upload): improve upload component

vben

2020-11-15 661db0c767772bb7a30da9d3eeaf2b47858ccf0b

 src/components/Table/src/BasicTable.vue

@@ -4,12 +4,15 @@
    class="basic-table"
    :class="{
      'table-form-container': getBindValues.useSearchForm,
      inset: getBindValues.inset,
    }"
  >
    <BasicForm
      v-bind="getFormProps"
      v-if="getBindValues.useSearchForm"
      :submitOnReset="true"
      :submitButtonOptions="{ loading }"
      :tableAction="tableAction"
      @register="registerForm"
      @submit="handleSearchInfoChange"
      @advanced-change="redoHeight"
@@ -22,9 +25,7 @@
      ref="tableElRef"
      v-bind="getBindValues"
      :rowClassName="getRowClassName"
      :class="{
        hidden: !getEmptyDataIsShowTable,
      }"
      v-show="getEmptyDataIsShowTable"
      @change="handleTableChange"
    >
      <template #[item]="data" v-for="item in Object.keys($slots)">
@@ -34,22 +35,27 @@
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, watch, nextTick, toRaw } from 'vue';
  import { Table } from 'ant-design-vue';
  import { basicProps } from './props';
  import type {
    BasicTableProps,
    FetchParams,
    GetColumnsParams,
    TableActionType,
    SizeType,
    SorterResult,
    TableCustomRecord,
  } from './types/table';
  import { PaginationProps } from './types/pagination';

  import { isFunction, isString } from '/@/utils/is';

  import { defineComponent, ref, computed, unref, watch, nextTick, toRaw } from 'vue';
  import { Table } from 'ant-design-vue';
  import renderTitle from './components/renderTitle';
  import renderFooter from './components/renderFooter';
  import renderExpandIcon from './components/renderExpandIcon';
  import { BasicForm, FormProps, useForm } from '/@/components/Form/index';

  import { isFunction, isString } from '/@/utils/is';
  import { deepMerge } from '/@/utils';
  import { omit } from 'lodash-es';

  import { usePagination } from './hooks/usePagination';
  import { useColumns } from './hooks/useColumns';
@@ -58,14 +64,10 @@
  import { useRowSelection } from './hooks/useRowSelection';
  import { useTableScroll } from './hooks/useTableScroll';
  import { provideTable } from './hooks/useProvinceTable';
  import { BasicForm, FormProps, useForm } from '/@/components/Form/index';
  import { omit } from 'lodash-es';
  import { ROW_KEY } from './const';
  import { PaginationProps } from './types/pagination';
  import { deepMerge } from '/@/utils';
  import { TableCustomRecord } from 'ant-design-vue/types/table/table';
  import { useEvent } from '/@/hooks/event/useEvent';

  import { useEventListener } from '/@/hooks/event/useEventListener';
  import { basicProps } from './props';
  import { ROW_KEY } from './const';
  import './style/index.less';
  export default defineComponent({
    props: basicProps,
@@ -190,7 +192,15 @@
        return !!unref(getDataSourceRef).length;
      });

      function getRowClassName(record: TableCustomRecord<any>, index: number) {
      watch(
        () => unref(getDataSourceRef),
        () => {
          handleSummary();
        },
        { immediate: true }
      );

      function getRowClassName(record: TableCustomRecord, index: number) {
        const { striped, rowClassName } = unref(getMergeProps);
        if (!striped) return;
        if (rowClassName && isFunction(rowClassName)) {
@@ -207,12 +217,23 @@
        fetch({ searchInfo: info, page: 1 });
      }

      function handleTableChange(pagination: PaginationProps) {
        const { clearSelectOnPageChange } = unref(getMergeProps);
      function handleTableChange(
        pagination: PaginationProps,
        // @ts-ignore
        filters: Partial<Record<string, string[]>>,
        sorter: SorterResult
      ) {
        const { clearSelectOnPageChange, sortFn } = unref(getMergeProps);
        if (clearSelectOnPageChange) {
          clearSelectedRowKeys();
        }
        setPagination(pagination);

        if (sorter && isFunction(sortFn)) {
          const sortInfo = sortFn(sorter);
          fetch({ sortInfo });
          return;
        }
        fetch();
      }

@@ -225,7 +246,7 @@
            }
            const bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body') as HTMLDivElement[];
            const bodyDom = bodyDomList[0];
            useEvent({
            useEventListener({
              el: bodyDom,
              name: 'scroll',
              listener: () => {
@@ -241,14 +262,6 @@
          });
        }
      }

      watch(
        () => unref(getDataSourceRef),
        () => {
          handleSummary();
        },
        { immediate: true }
      );

      function setProps(props: Partial<BasicTableProps>) {
        innerPropsRef.value = deepMerge(unref(innerPropsRef) || {}, props);
@@ -310,6 +323,7 @@
        handleTableChange,
        getRowClassName,
        wrapRef,
        tableAction,
        ...tableAction,
      };
    },