feat: basicTable 组件的类型问题

pull/35/head
xingyu 2023-09-18 18:09:42 +08:00
parent afd2d946c5
commit 6034ffecf2
5 changed files with 22 additions and 17 deletions

View File

@ -15,7 +15,7 @@ function handleItem(item: BasicColumn, ellipsis: boolean) {
item.align = item.align || DEFAULT_ALIGN item.align = item.align || DEFAULT_ALIGN
if (ellipsis) { if (ellipsis) {
if (!key) if (!key)
item.key = dataIndex as any item.key = typeof dataIndex == 'object' ? dataIndex.join('-') : dataIndex
if (!isBoolean(item.ellipsis)) { if (!isBoolean(item.ellipsis)) {
Object.assign(item, { Object.assign(item, {

View File

@ -185,7 +185,7 @@ export function useDataSource(
}) })
} }
function insertTableDataRecord(record: Recordable | Recordable[], index: number): Recordable[] | undefined { function insertTableDataRecord(record: Recordable | Recordable[], index?: number): Recordable[] | undefined {
// if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
index = index ?? dataSourceRef.value?.length index = index ?? dataSourceRef.value?.length
const _record = isObject(record) ? [record as Recordable] : (record as Recordable[]) const _record = isObject(record) ? [record as Recordable] : (record as Recordable[])

View File

@ -1,13 +1,18 @@
import type { ComputedRef, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import { computed, nextTick, ref, toRaw, unref, watch } from 'vue' import { computed, nextTick, ref, toRaw, unref, watch } from 'vue'
import { omit } from 'lodash-es' import { omit } from 'lodash-es'
import type { Key } from 'ant-design-vue/lib/table/interface'
import type { BasicTableProps, TableRowSelection } from '../types/table' import type { BasicTableProps, TableRowSelection } from '../types/table'
import { ROW_KEY } from '../const' import { ROW_KEY } from '../const'
import { isFunction } from '@/utils/is'
import { findNodeAll } from '@/utils/helper/treeHelper' import { findNodeAll } from '@/utils/helper/treeHelper'
import { isFunction } from '@/utils/is'
export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, tableData: Ref<Recordable[]>, emit: EmitType) { export function useRowSelection(
const selectedRowKeysRef = ref<string[]>([]) propsRef: ComputedRef<BasicTableProps>,
tableData: Ref<Recordable[]>,
emit: EmitType,
) {
const selectedRowKeysRef = ref<Key[]>([])
const selectedRowRef = ref<Recordable[]>([]) const selectedRowRef = ref<Recordable[]>([])
const getRowSelectionRef = computed((): TableRowSelection | null => { const getRowSelectionRef = computed((): TableRowSelection | null => {
@ -17,7 +22,7 @@ export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, tableDat
return { return {
selectedRowKeys: unref(selectedRowKeysRef), selectedRowKeys: unref(selectedRowKeysRef),
onChange: (selectedRowKeys: string[]) => { onChange: (selectedRowKeys: Key[]) => {
setSelectedRowKeys(selectedRowKeys) setSelectedRowKeys(selectedRowKeys)
}, },
...omit(rowSelection, ['onChange']), ...omit(rowSelection, ['onChange']),
@ -26,7 +31,7 @@ export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, tableDat
watch( watch(
() => unref(propsRef).rowSelection?.selectedRowKeys, () => unref(propsRef).rowSelection?.selectedRowKeys,
(v: string[]) => { (v?: Key[]) => {
setSelectedRowKeys(v) setSelectedRowKeys(v)
}, },
) )
@ -59,8 +64,8 @@ export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, tableDat
return unref(getAutoCreateKey) ? ROW_KEY : rowKey return unref(getAutoCreateKey) ? ROW_KEY : rowKey
}) })
function setSelectedRowKeys(rowKeys: string[]) { function setSelectedRowKeys(rowKeys?: Key[]) {
selectedRowKeysRef.value = rowKeys selectedRowKeysRef.value = rowKeys || []
const allSelectedRows = findNodeAll( const allSelectedRows = findNodeAll(
toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))), toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))),
item => rowKeys?.includes(item[unref(getRowKey) as string]), item => rowKeys?.includes(item[unref(getRowKey) as string]),
@ -69,7 +74,7 @@ export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, tableDat
}, },
) )
const trueSelectedRows: any[] = [] const trueSelectedRows: any[] = []
rowKeys?.forEach((key: string) => { rowKeys?.forEach((key: Key) => {
const found = allSelectedRows.find(item => item[unref(getRowKey) as string] === key) const found = allSelectedRows.find(item => item[unref(getRowKey) as string] === key)
found && trueSelectedRows.push(found) found && trueSelectedRows.push(found)
}) })

View File

@ -4,7 +4,7 @@ import type { BasicTableProps } from '../types/table'
import { ROW_KEY } from '../const' import { ROW_KEY } from '../const'
export function useTableExpand(propsRef: ComputedRef<BasicTableProps>, tableData: Ref<Recordable[]>, emit: EmitType) { export function useTableExpand(propsRef: ComputedRef<BasicTableProps>, tableData: Ref<Recordable[]>, emit: EmitType) {
const expandedRowKeys = ref<string[]>([]) const expandedRowKeys = ref<(string | number)[]>([])
const getAutoCreateKey = computed(() => { const getAutoCreateKey = computed(() => {
return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey
@ -34,7 +34,7 @@ export function useTableExpand(propsRef: ComputedRef<BasicTableProps>, tableData
expandedRowKeys.value = keys expandedRowKeys.value = keys
} }
function expandRows(keys: string[]) { function expandRows(keys: (string | number)[]) {
// use row ID expands the specified table row // use row ID expands the specified table row
const { isTreeTable } = unref(propsRef) const { isTreeTable } = unref(propsRef)
if (!isTreeTable) if (!isTreeTable)

View File

@ -1,5 +1,5 @@
import type { Ref, VNodeChild } from 'vue' import type { Ref, VNodeChild } from 'vue'
import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface' import type { TableRowSelection as ITableRowSelection, Key } from 'ant-design-vue/lib/table/interface'
import type { ColumnProps } from 'ant-design-vue/lib/table' import type { ColumnProps } from 'ant-design-vue/lib/table'
import type { PaginationProps } from './pagination' import type { PaginationProps } from './pagination'
@ -19,7 +19,7 @@ export interface TableRowSelection<T = any> extends ITableRowSelection {
* Callback executed when selected rows change * Callback executed when selected rows change
* @type Function * @type Function
*/ */
onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => any
/** /**
* Callback executed when select/deselect one row * Callback executed when select/deselect one row
@ -37,7 +37,7 @@ export interface TableRowSelection<T = any> extends ITableRowSelection {
* Callback executed when row selection is inverted * Callback executed when row selection is inverted
* @type Function * @type Function
*/ */
onSelectInvert?: (selectedRows: string[] | number[]) => any onSelectInvert?: (selectedRows: Key[]) => any
} }
export interface TableCustomRecord<T> { export interface TableCustomRecord<T> {
@ -83,7 +83,7 @@ export interface TableActionType {
getSelectRows: <T = Recordable>() => T[] getSelectRows: <T = Recordable>() => T[]
clearSelectedRowKeys: () => void clearSelectedRowKeys: () => void
expandAll: () => void expandAll: () => void
expandRows: (keys: string[] | number[]) => void expandRows: (keys: (string | number)[]) => void
collapseAll: () => void collapseAll: () => void
scrollTo: (pos: string) => void // pos: id | "top" | "bottom" scrollTo: (pos: string) => void // pos: id | "top" | "bottom"
getSelectRowKeys: () => string[] getSelectRowKeys: () => string[]
@ -101,7 +101,7 @@ export interface TableActionType {
setLoading: (loading: boolean) => void setLoading: (loading: boolean) => void
setProps: (props: Partial<BasicTableProps>) => void setProps: (props: Partial<BasicTableProps>) => void
redoHeight: () => void redoHeight: () => void
setSelectedRowKeys: (rowKeys: string[] | number[]) => void setSelectedRowKeys: (rowKeys: Key[]) => void
getPaginationRef: () => PaginationProps | boolean getPaginationRef: () => PaginationProps | boolean
getSize: () => SizeType getSize: () => SizeType
getRowSelection: () => TableRowSelection<Recordable> getRowSelection: () => TableRowSelection<Recordable>