【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"
/>
相关推荐
heartmoonq4 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信5 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾5 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter5 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man9 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia14 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李15 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风16 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录17 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia18 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js