取消暂停svg更新

Ben Lin

2024-08-22 436b52186129e60ba72c20e43d2845bc3f899901

 src/components/Table/src/components/TableFooter.vue

@@ -1,94 +1,92 @@
<template>
  <Table
    v-if="summaryFunc || summaryData"
    v-if="!!props.summaryFunc || props.summaryData"
    :showHeader="false"
    :bordered="false"
    :pagination="false"
    :dataSource="getDataSource"
    :rowKey="(r) => r[rowKey]"
    :rowKey="props.rowKey"
    :columns="getColumns"
    tableLayout="fixed"
    :scroll="scroll"
    :scroll="props.scroll"
  />
</template>
<script lang="ts">
  import type { PropType } from 'vue';
  import { defineComponent, unref, computed, toRaw } from 'vue';
<script lang="ts" setup>
  import { unref, computed, toRaw } from 'vue';
  import { Table } from 'ant-design-vue';
  import { cloneDeep } from 'lodash-es';
  import { isFunction } from '/@/utils/is';
  import type { BasicColumn } from '../types/table';
  import { isFunction } from '@/utils/is';
  import type { BasicColumn, BasicTableProps } from '../types/table';
  import { INDEX_COLUMN_FLAG } from '../const';
  import { propTypes } from '/@/utils/propTypes';
  import { useTableContext } from '../hooks/useTableContext';
  import { ColumnType } from 'ant-design-vue/es/table/interface';
  import { parseRowKey } from '../helper';

  defineOptions({ name: 'BasicTableFooter' });

  const props = withDefaults(
    defineProps<{
      summaryFunc?: Fn | null;
      summaryData?: Recordable[] | null;
      scroll?: BasicTableProps['scroll'];
      rowKey?: BasicTableProps['rowKey'];
    }>(),
    {
      summaryFunc: null,
      summaryData: null,
      rowKey: '',
    },
  );

  const SUMMARY_ROW_KEY = '_row';
  const SUMMARY_INDEX_KEY = '_index';
  export default defineComponent({
    name: 'BasicTableFooter',
    components: { Table },
    props: {
      summaryFunc: {
        type: Function as PropType<Fn>,
      },
      summaryData: {
        type: Array as PropType<Recordable[]>,
      },
      scroll: {
        type: Object as PropType<Recordable>,
      },
      rowKey: propTypes.string.def('key'),
    },
    setup(props) {
      const table = useTableContext();
  const table = useTableContext();

      const getDataSource = computed((): Recordable[] => {
        const { summaryFunc, summaryData } = props;
        if (summaryData?.length) {
          summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
          return summaryData;
        }
        if (!isFunction(summaryFunc)) {
          return [];
        }
        let dataSource = toRaw(unref(table.getDataSource()));
        dataSource = summaryFunc(dataSource);
        dataSource.forEach((item, i) => {
          item[props.rowKey] = `${i}`;
        });
        return dataSource;
  const getDataSource = computed((): Recordable[] => {
    if (props.summaryData?.length) {
      props.summaryData.forEach((item, i) => {
        item[parseRowKey(props.rowKey, item)] = `${i}`;
      });
      return props.summaryData;
    }
    if (!isFunction(props.summaryFunc)) {
      return [];
    }
    let dataSource = toRaw(unref(table.getDataSource()));
    dataSource = props.summaryFunc(dataSource);
    dataSource.forEach((item, i) => {
      item[parseRowKey(props.rowKey, item)] = `${i}`;
    });
    return dataSource;
  });

      const getColumns = computed(() => {
        const dataSource = unref(getDataSource);
        const columns: BasicColumn[] = cloneDeep(table.getColumns());
        const index = columns.findIndex((item) => item.flag === INDEX_COLUMN_FLAG);
        const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
        const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));
  const getColumns = computed(() => {
    const dataSource = unref(getDataSource);
    const columns: BasicColumn[] = cloneDeep(table.getColumns());
    const index = columns.findIndex((item) => item.flag === INDEX_COLUMN_FLAG);
    const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
    const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));

        if (index !== -1) {
          if (hasIndexSummary) {
            columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY];
            columns[index].ellipsis = false;
          } else {
            Reflect.deleteProperty(columns[index], 'customRender');
          }
        }
    if (index !== -1) {
      if (hasIndexSummary) {
        columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY];
        columns[index].ellipsis = false;
      } else {
        Reflect.deleteProperty(columns[index], 'customRender');
      }
    }

        if (table.getRowSelection() && hasRowSummary) {
          const isFixed = columns.some((col) => col.fixed === 'left');
          columns.unshift({
            width: 60,
            title: 'selection',
            key: 'selectionKey',
            align: 'center',
            ...(isFixed ? { fixed: 'left' } : {}),
            customRender: ({ record }) => record[SUMMARY_ROW_KEY],
          });
        }
        return columns;
    if (table.getRowSelection() && hasRowSummary) {
      const isFixed = columns.some((col) => col.fixed === 'left');
      columns.unshift({
        width: 60,
        title: 'selection',
        key: 'selectionKey',
        align: 'center',
        ...(isFixed ? { fixed: 'left' } : {}),
        customRender: ({ record }) => record[SUMMARY_ROW_KEY],
      });
      return { getColumns, getDataSource };
    },
    }
    return columns as unknown as ColumnType[];
  });
</script>