iView表格的render函数里怎么拿到当前行数据?

W″云超 阅读 60

我在用 iView 的 Table 组件时,想在某一列用 render 函数自定义内容,但不知道怎么在 render 里获取当前行的数据。文档看了半天也没搞明白,试了 this.row、params.row 都不行,控制台还报错。

这是我的代码:

<Table :columns="columns" :data="tableData"></Table>

// columns 定义
columns: [
  {
    title: '操作',
    key: 'action',
    render: (h, params) => {
      return h('Button', '编辑');
      // 这里想拿到当前行的 id,比如 params.row.id,但不确定对不对
    }
  }
]
我来解答 赞 5 收藏
二维码
手机扫码查看
2 条解答
欧阳乐萱
你的代码思路是对的,params.row 确实能拿到当前行数据。

问题应该出在箭头函数上。你用了 render: (h, params) => {} 这种箭头函数写法,在某些 iView 版本里会有问题。改成普通函数声明就OK了:

columns: [
{
title: '操作',
key: 'action',
render: function (h, params) {
return h('Button', {
on: {
click: () => {
console.log(params.row.id) // 这里就能拿到当前行id
}
}
}, '编辑');
}
}
]


简单说就是:把箭头函数改成 function (h, params) 这种写法,params 就能正常用了。

如果你想在 Button 上直接用 props 也可以这样:

render: function (h, params) {
return h('Button', {
props: {
type: 'primary'
},
on: {
click: () => {
this.handleEdit(params.row.id)
}
}
}, '编辑');
}


这里 params.row 就是当前行的数据对象,params.index 是行索引,看你需要哪个。
点赞
2026-03-20 12:02
UP主~梓萱
params.row 完全可以拿到当前行数据,你代码本身没问题。报错可能是别的原因。

直接这么用就行:

render: (h, params) => {
const row = params.row;
const id = row.id;
console.log('当前行id:', id);

return h('Button', {
on: {
click: () => {
this.handleEdit(id);
}
}
}, '编辑');
}


或者更简洁点:

render: (h, params) => {
return h('Button', {
props: { type: 'primary' },
on: { click: () => this.handleEdit(params.row.id) }
}, '编辑');
}


你之前说报错,不妨检查一下:是不是在 render 里用了 this 访问 data 里定义的数据?箭头函数里 this 指向会有问题。如果需要用组件实例的方法,直接用 params 里的信息调用就行,别用 this。

还有一种更简单的方式,新版 iView 支持 slot-scope,代码更直观:





columns 里对应的列加上 slot: 'action' 就行,比 render 函数省心多了。
点赞 1
2026-03-12 21:00