react-ant-design-component-table-6

今天我们继续讲解Ant Design中的Table组件，今天的主题是如何为Table组件添加操作功能，这里的操作是针对每一行数据而言的，比如我们可以编辑、删除某一行数据，或者查看详情等。

要实现这些操作，我们需要在Table组件的列定义中添加一个操作列（操作列通常位于最后一列），这个操作列通常会包含一些按钮或者链接，用户可以通过点击这些按钮来执行相应的操作。

因为操作列并不是数据（Table组件中的dataSource）的一部分，所以这一列并不需要dataIndex属性，我们可以直接在columns数组的末尾添加一个新的列对象，设置其title为“操作”，并使用render渲染具体的操作内容，比如编辑和删除按钮。

const columns = [
  // ...
  {
    title: '操作',
    key: 'action',
    render: (_: any, record: User) => (
      <span>
        <a onClick={() => console.log('Edit', record)}>编辑</a>
        <span style={{ margin: '0 8px' }}>|</span>
        <a onClick={() => console.log('Delete', record)}>删除</a>
      </span>
    ),
  },
];

有的时候，因为render函数对应的代码比较多，我们可以单独将其提取出来，作为一个单独的函数来处理，这样可以使代码更清晰。

const renderActions = (record: User) => (
  <span>
    <a onClick={() => console.log('Edit', record)}>编辑</a>
    <span style={{ margin: '0 8px' }}>|</span>
    <a onClick={() => console.log('Delete', record)}>删除</a>
  </span>
);

const columns = [
  // ...
  {
    title: '操作',
    key: 'action',
    render: renderActions,
  },
];

我们向render函数传入了当前行的数据（record），这样我们就可以在操作中使用这行数据了，上面例子中，我们只是简单地打印了编辑和删除的记录，但在实际应用中，我们可能会调用后台api来执行编辑或删除操作。

由于已经拿到了当前行数据record，所以我们也可以拿到这行数据对应的id，有了id，我们就可以在点击编辑或删除按钮时，将id传递给相应的后台API来做真实的编辑和删除操作了。

最后，我们看一下render函数的定义，它接收三个参数，分别是：

value: 当前单元格的值
record: 当前行的数据记录
index: 当前行的索引
在我们的例子中，我们并没有使用value和index，但它们在某些情况下可能会有用，比如当你需要根据行索引来处理某些逻辑时。

1	render?: (value: any, record: RecordType, index: number) => React.ReactNode \| RenderedCell<RecordType>;

render函数的返回值可以是一个React节点（比如一个按钮或链接），也可以是一个自定义的渲染组件。目前我们用到的都是第一种情况，返回一个React节点。

好了，今天就到这里了，我们明天再见！