假设有如下数据:
const data = [
{ id: 1, name: 'John Doe', age: 30 },
{ id: 2, name: 'Jane Doe', age: 25 },
{ id: 3, name: 'Bob Smith', age: 45 }
];
我们可以使用Antd Table组件将其渲染为表格,例如:
import { Table } from 'antd';
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' }
];
const MyTable = () => (
);
然而,有时我们想要在每一行中渲染更多的属性,例如一个按钮或者链接。这时候,我们可以在数据中添加一个带有渲染逻辑的render属性,例如:
const data = [
{ id: 1, name: 'John Doe', age: 30, render: val => {val} },
{ id: 2, name: 'Jane Doe', age: 25, render: val => {val} },
{ id: 3, name: 'Bob Smith', age: 45, render: val => {val} }
];
现在,我们需要更新表格的columns属性,以便正确地渲染render属性。我们可以使用render函数,例如:
import { Table } from 'antd';
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Email',
dataIndex: 'email',
key: 'email',
render: (val, record) => record.render(val)