【debug】ElementPlus table组件column传入formatter类型报错

karshey2024-10-16 15:40

报错如下：

不能将类型"((row: ShortUserPayType) => string) | ((row: ShortUserPayType) => number) | undefined"分配给类型"((row: any, column: TableColumnCtx<any>, cellValue: any, index: number) => string | VNode<RendererNode, RendererElement, { ...; }>) | undefined"。

组件要求传入的formatter函数必须定义为：

javascript 复制代码

((row: any, column: TableColumnCtx`<any>`, cellValue: any, index: number) => string | VNode<RendererNode, RendererElement, { ...; }>) | undefined"

但我不需要这么多属性，我只需要row属性。

解决方法，自定义一个Column类型：

javascript 复制代码

export interface Column {
  key: string
  title: string
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  formatter?: (...args: any) => any
}

这使得formatter 函数可以接受 ElementPlus 所期望的四个参数，也可以只接受一个参数，或者根本不接受参数。

javascript 复制代码

const columns: Column[] = [...]

html 复制代码

<el-table-column
  v-for="column in columns"
  :key="column.key"
  :prop="column.key"
  :label="column.title"
  :formatter="column.formatter"
/>