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

报错如下:

不能将类型"((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"
/>
相关推荐
麦麦鸡腿堡39 分钟前
Java的单例设计模式-饿汉式
java·开发语言·设计模式
哆啦A梦158839 分钟前
点击Top切换数据
前端·javascript·vue.js
简单点了40 分钟前
go前后端项目的启动 、打包和部署
开发语言·后端·golang
爱吃山竹的大肚肚1 小时前
@Valid校验 -(Spring 默认不支持直接校验 List<@Valid Entity>,需用包装类或手动校验。)
java·开发语言
汤姆yu1 小时前
2026版基于python的协同过滤音乐推荐系统
开发语言·python
程序猿追1 小时前
Vue组件化开发
前端·html
汤姆yu1 小时前
基于python的电子商务管理系统
开发语言·python
我是大咖1 小时前
C语言-贪吃蛇项目开发工具篇---ncursee库安装
c语言·开发语言
艾德金的溪2 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长2 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js