Skip to content

关于Table组件中使用模板语法在bodyCell插槽类型无法生效的问题 #8306

@huchenghepang

Description

@huchenghepang

在template使用Table组件的bodycell插槽渲染内容时,无法正常获取类型推导。

自定义类型工具。方便使用的TS工具类型。

import type { TableColumnType } from 'ant-design-vue';

export type CustomerColumnType<T> = TableColumnType<T> & {
    index?: keyof T | (keyof T)[];
    key?: keyof T | (keyof T)[] | 'action' | 'operation';
};

export type MyTableColumnsType<T> = CustomerColumnType<T>[];

export type MyBodyCell<T> = { column: CustomerColumnType<T>; record: T; text: any; value: any; index: number; }
    <ATable :data-source="users" :columns="columns" :pagination="pagination" row-key="id" bordered
      @change="changePagination">
      <template #bodyCell="{ column, record }: MyBodyCell<UserEntity>">
      </template>
    </ATable>

最初遇到写到这里遇到问题,

没有与此调用匹配的重载。
  最后一个重载给出了以下错误。
    类型“(_: MyBodyCell<UserEntity>) => any”的参数不能赋给类型“(props: { text: any; value: any; record: Record<string, any>; index: number; column: ColumnType<any>; }) => void”的参数。
      参数“_”和“props” 的类型不兼容。
        不能将类型“{ text: any; value: any; record: Record<string, any>; index: number; column: ColumnType<any>; }”分配给类型“MyBodyCell<UserEntity>”。
          属性“column”的类型不兼容。

实际上是bodyCell的类型写死了。
官方类型定义文件,ant-design-vue\es\table\index.d.ts 505-511:

        bodyCell?: (props: {
            text: any;
            value: any;
            record:Record<string, any>;
            index: number;
            column:import("./interface").ColumnType<any>;
        }) => void;

当修改为泛型时,默认填充时,不报错:

        bodyCell?: (props: {
            text: any;
            value: any;
            record:R = Record<string, any>;
            index: number;
            column:C = import("./interface").ColumnType<any>;
        }) => void;

现在我能解决这个问题但是需要修改官方源码的类型定义,希望官方能够添加更新以方便处理该问题,方便类型推导和代码提醒。

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions