fix(table): get the selected rows of the table correctly

Vben

2021-02-24 601368921f075aa1870d1c3ce8f4a8330260206a

fix(table): get the selected rows of the table correctly

 CHANGELOG.zh_CN.md

@@ -13,6 +13,7 @@
### 🐛 Bug Fixes

- 修复验证码组件警告问题
- 修复表格不能正确的获取选中行

## 2.0.1 (2021-02-21)


 package.json

@@ -94,7 +94,7 @@
    "stylelint-config-standard": "^20.0.0",
    "stylelint-order": "^4.1.0",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.2",
    "typescript": "4.1.5",
    "vite": "2.0.2",
    "vite-plugin-compression": "^0.2.2",
    "vite-plugin-html": "^2.0.2",

 src/components/Table/src/BasicTable.vue

@@ -92,6 +92,7 @@
    ],
    setup(props, { attrs, emit, slots }) {
      const tableElRef = ref<ComponentRef>(null);
      const tableData = ref<Recordable[]>([]);

      const wrapRef = ref<Nullable<HTMLDivElement>>(null);
      const innerPropsRef = ref<Partial<BasicTableProps>>();
@@ -120,7 +121,7 @@
        getSelectRowKeys,
        deleteSelectRowByKey,
        setSelectedRowKeys,
      } = useRowSelection(getProps, emit);
      } = useRowSelection(getProps, tableData, emit);

      const {
        handleTableChange,
@@ -135,6 +136,7 @@
      } = useDataSource(
        getProps,
        {
          tableData,
          getPaginationInfo,
          setLoading,
          setPagination,

 src/components/Table/src/hooks/useCustomRow.ts

@@ -45,7 +45,6 @@
        if (!key) return;

        const isCheckbox = rowSelection.type === 'checkbox';

        if (isCheckbox) {
          if (!keys.includes(key)) {
            setSelectedRowKeys([...keys, key]);

 src/components/Table/src/hooks/useDataSource.ts

@@ -1,7 +1,17 @@
import type { BasicTableProps, FetchParams, SorterResult } from '../types/table';
import type { PaginationProps } from '../types/pagination';

import { ref, unref, ComputedRef, computed, onMounted, watch, reactive } from 'vue';
import {
  ref,
  unref,
  ComputedRef,
  computed,
  onMounted,
  watch,
  reactive,
  Ref,
  watchEffect,
} from 'vue';

import { useTimeoutFn } from '/@/hooks/core/useTimeout';

@@ -17,6 +27,7 @@
  setLoading: (loading: boolean) => void;
  getFieldsValue: () => Recordable;
  clearSelectedRowKeys: () => void;
  tableData: Ref<Recordable[]>;
}

interface SearchState {
@@ -31,6 +42,7 @@
    setLoading,
    getFieldsValue,
    clearSelectedRowKeys,
    tableData,
  }: ActionType,
  emit: EmitType
) {
@@ -45,6 +57,10 @@
  //   !api && dataSource && (dataSourceRef.value = dataSource);
  // });

  watchEffect(() => {
    tableData.value = unref(dataSourceRef);
  });

  watch(
    () => unref(propsRef).dataSource,
    () => {

 src/components/Table/src/hooks/useRowSelection.ts

@@ -1,9 +1,13 @@
import type { BasicTableProps, TableRowSelection } from '../types/table';

import { computed, ref, unref, ComputedRef } from 'vue';
import { computed, ref, unref, ComputedRef, Ref, toRaw } from 'vue';
import { ROW_KEY } from '../const';

/* eslint-disable */
export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, emit: EmitType) {
export function useRowSelection(
  propsRef: ComputedRef<BasicTableProps>,
  tableData: Ref<Recordable[]>,
  emit: EmitType
) {
  const selectedRowKeysRef = ref<string[]>([]);
  const selectedRowRef = ref<Recordable[]>([]);

@@ -27,8 +31,26 @@
    };
  });

  const getAutoCreateKey = computed(() => {
    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
  });

  const getRowKey = computed(() => {
    const { rowKey } = unref(propsRef);
    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
  });

  function setSelectedRowKeys(rowKeys: string[]) {
    selectedRowKeysRef.value = rowKeys;

    const rows = toRaw(unref(tableData)).filter((item) =>
      rowKeys.includes(item[unref(getRowKey) as string])
    );
    selectedRowRef.value = rows;
  }

  function setSelectedRows(rows: Recordable[]) {
    selectedRowRef.value = rows;
  }

  function clearSelectedRowKeys() {
@@ -65,5 +87,6 @@
    setSelectedRowKeys,
    clearSelectedRowKeys,
    deleteSelectRowByKey,
    setSelectedRows,
  };
}

 src/components/Table/src/hooks/useTable.ts

@@ -3,7 +3,7 @@
import type { DynamicProps } from '/@/types/utils';
import { getDynamicProps } from '/@/utils';

import { ref, onUnmounted, unref, watch } from 'vue';
import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
import { isProdMode } from '/@/utils/env';
import { isInSetup } from '/@/utils/helper/vueHelper';
import { error } from '/@/utils/log';
@@ -77,11 +77,11 @@
      getTableInstance().setLoading(loading);
    },
    getDataSource: () => {
      return getTableInstance().getDataSource();
      return toRaw(getTableInstance().getDataSource());
    },
    getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
      const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
      return columns;
      return toRaw(columns);
    },
    setColumns: (columns: BasicColumn[]) => {
      getTableInstance().setColumns(columns);
@@ -96,10 +96,10 @@
      getTableInstance().deleteSelectRowByKey(key);
    },
    getSelectRowKeys: () => {
      return getTableInstance().getSelectRowKeys();
      return toRaw(getTableInstance().getSelectRowKeys());
    },
    getSelectRows: () => {
      return getTableInstance().getSelectRows();
      return toRaw(getTableInstance().getSelectRows());
    },
    clearSelectedRowKeys: () => {
      getTableInstance().clearSelectedRowKeys();
@@ -111,16 +111,16 @@
      return getTableInstance().getPaginationRef();
    },
    getSize: () => {
      return getTableInstance().getSize();
      return toRaw(getTableInstance().getSize());
    },
    updateTableData: (index: number, key: string, value: any) => {
      return getTableInstance().updateTableData(index, key, value);
    },
    getRowSelection: () => {
      return getTableInstance().getRowSelection();
      return toRaw(getTableInstance().getRowSelection());
    },
    getCacheColumns: () => {
      return getTableInstance().getCacheColumns();
      return toRaw(getTableInstance().getCacheColumns());
    },
    getForm: () => {
      return (unref(formRef) as unknown) as FormActionType;
@@ -129,7 +129,7 @@
      getTableInstance().setShowPagination(show);
    },
    getShowPagination: () => {
      return getTableInstance().getShowPagination();
      return toRaw(getTableInstance().getShowPagination());
    },
  };


 yarn.lock

@@ -8610,10 +8610,10 @@
  dependencies:
    is-typedarray "^1.0.0"

typescript@^4.2.2:
  version "4.2.2"
  resolved "https://registry.npmjs.org/typescript/-/typescript-4.2.2.tgz#1450f020618f872db0ea17317d16d8da8ddb8c4c"
  integrity sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==
typescript@4.1.5:
  version "4.1.5"
  resolved "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz#123a3b214aaff3be32926f0d8f1f6e704eb89a72"
  integrity sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA==

uglify-js@^3.1.4:
  version "3.12.5"