feat(table): 添加和支持动态删除和插入数据 (#1152)

frezs

2021-09-06 59a90877287a289f746eec97d12c2d3a1d5476b0

feat(table):  添加和支持动态删除和插入数据 (#1152)

 src/components/Table/src/BasicTable.vue

@@ -141,6 +141,8 @@
        getRawDataSource,
        setTableData,
        updateTableDataRecord,
        deleteTableDataRecord,
        insertTableDataRecord,
        findTableDataRecord,
        fetch,
        getRowKey,
@@ -279,6 +281,8 @@
        setPagination,
        setTableData,
        updateTableDataRecord,
        deleteTableDataRecord,
        insertTableDataRecord,
        findTableDataRecord,
        redoHeight,
        setSelectedRowKeys,

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

@@ -160,6 +160,31 @@
    }
  }

  function deleteTableDataRecord(record: Recordable | Recordable[]): Recordable | undefined {
    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
    const records = !Array.isArray(record) ? [record] : record;
    const recordIndex = records
      .map((item) => dataSourceRef.value.findIndex((s) => s.key === item.key)) // 取序号
      .filter((item) => item !== undefined)
      .sort((a, b) => b - a); // 从大到小排序
    for (const index of recordIndex) {
      unref(dataSourceRef).splice(index, 1);
      unref(propsRef).dataSource?.splice(index, 1);
    }
    setPagination({
      total: unref(propsRef).dataSource?.length,
    });
    return unref(propsRef).dataSource;
  }

  function insertTableDataRecord(record: Recordable, index: number): Recordable | undefined {
    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
    index = index ?? dataSourceRef.value?.length;
    unref(dataSourceRef).splice(index, 0, record);
    unref(propsRef).dataSource?.splice(index, 0, record);
    return unref(propsRef).dataSource;
  }

  function findTableDataRecord(rowKey: string | number) {
    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;

@@ -314,6 +339,8 @@
    reload,
    updateTableData,
    updateTableDataRecord,
    deleteTableDataRecord,
    insertTableDataRecord,
    findTableDataRecord,
    handleTableChange,
  };

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

@@ -122,6 +122,12 @@
    updateTableData: (index: number, key: string, value: any) => {
      return getTableInstance().updateTableData(index, key, value);
    },
    deleteTableDataRecord: (record: Recordable | Recordable[]) => {
      return getTableInstance().deleteTableDataRecord(record);
    },
    insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => {
      return getTableInstance().insertTableDataRecord(record, index);
    },
    updateTableDataRecord: (rowKey: string | number, record: Recordable) => {
      return getTableInstance().updateTableDataRecord(rowKey, record);
    },

 src/components/Table/src/types/table.ts

@@ -95,6 +95,8 @@
  setPagination: (info: Partial<PaginationProps>) => void;
  setTableData: <T = Recordable>(values: T[]) => void;
  updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
  deleteTableDataRecord: (record: Recordable | Recordable[]) => Recordable | void;
  insertTableDataRecord: (record: Recordable, index?: number) => Recordable | void;
  findTableDataRecord: (rowKey: string | number) => Recordable | void;
  getColumns: (opt?: GetColumnsParams) => BasicColumn[];
  setColumns: (columns: BasicColumn[] | string[]) => void;