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

W″云超提问于 2026-03-12 20:46:21 阅读 2

组件

我在用 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，但不确定对不对
    }
  }
]

iView Table配置

我来解答赞 0 收藏

反馈

1 条解答

UP主～梓萱 Lv1

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 函数省心多了。

2026-03-12 21:00