ant design mobile 表格
时间: 2023-08-03 09:03:21 浏览: 67
Ant Design Mobile 提供了一个非常强大和易用的表格组件。你可以使用 `List` 组件来创建一个带有表格结构的列表,并通过 `ListItem` 组件来展示每一行的数据。
以下是一个简单的示例代码,展示了如何使用 Ant Design Mobile 的表格组件:
```jsx
import { List } from 'antd-mobile';
const data = [
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 30 },
{ id: 3, name: 'Bob Johnson', age: 40 },
];
const Example = () => (
<List renderHeader={() => 'User List'}>
{data.map(item => (
<List.Item key={item.id}>
<div>{item.name}</div>
<div>{item.age}</div>
</List.Item>
))}
</List>
);
export default Example;
```
在上面的代码中,我们使用 `List` 组件作为容器,通过 `renderHeader` 属性设置列表的标题。然后,使用 `data.map` 方法遍历数据数组,为每个数据项创建一个 `ListItem` 组件,并展示相应的姓名和年龄。
你可以根据自己的需求对表格进行自定义,例如添加更多列、样式调整等。Ant Design Mobile 的文档中有更多关于表格组件的详细信息,***