iView表格的render函数里怎么拿到当前行数据?
我在用 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,但不确定对不对
}
}
]
params.row确实能拿到当前行数据。问题应该出在箭头函数上。你用了
render: (h, params) => {}这种箭头函数写法,在某些 iView 版本里会有问题。改成普通函数声明就OK了:简单说就是:把箭头函数改成
function (h, params)这种写法,params 就能正常用了。如果你想在 Button 上直接用 props 也可以这样:
这里
params.row就是当前行的数据对象,params.index是行索引,看你需要哪个。直接这么用就行:
或者更简洁点:
你之前说报错,不妨检查一下:是不是在 render 里用了 this 访问 data 里定义的数据?箭头函数里 this 指向会有问题。如果需要用组件实例的方法,直接用 params 里的信息调用就行,别用 this。
还有一种更简单的方式,新版 iView 支持 slot-scope,代码更直观:
columns 里对应的列加上
slot: 'action'就行,比 render 函数省心多了。