以下是一个使用Ant Design的表格组件,实现垂直和水平滚动的代码示例:
import React from 'react';
import { Table } from 'antd';
const columns = [
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '年龄', dataIndex: 'age', key: 'age' },
{ title: '地址', dataIndex: 'address', key: 'address' },
];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `John Doe ${i}`,
age: 30 + i,
address: `New York No. ${i + 1}, USA`,
});
}
const App = () => (
);
export default App;
在这个示例中,我们使用Table组件创建一个表格,并将columns和data作为属性传递给表格。scroll属性用于指定水平和垂直滚动的配置。在这个例子中,我们将水平滚动配置为500像素,垂直滚动配置为300像素。
注意:为了使用Ant Design的Table组件,你需要先安装Ant Design的依赖。可以使用npm或yarn来安装依赖。
npm install antd
# 或者
yarn add antd
然后,你可以在你的React应用程序中导入和使用Table组件。