Antd 是一个基于 React 的企业级 UI 组件库,提供了丰富的组件,包括表格组件。要为 Antd 表格的行设置圆角边框,可以通过自定义 CSS 样式来实现。
下面是一个示例代码,演示如何使用 Antd 的 Table 组件,并为表格行设置圆角边框:
import React from 'react';
import { Table } from 'antd';
// 自定义表格行样式
const rowStyle = {
borderRadius: '5px', // 圆角边框
};
const dataSource = [
{
key: '1',
name: 'John',
age: 25,
},
{
key: '2',
name: 'Mike',
age: 30,
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
];
const App = () => (
<Table
dataSource={dataSource}
columns={columns}
rowClassName={() => 'row-style'}
/>
);
export default App;
在上面的代码中,我们定义了 rowStyle
对象来设置表格行的样式,其中 borderRadius
属性用于设置圆角边框。然后,通过在 <Table>
组件的 rowClassName
属性中指定样式类名 'row-style'
,来应用这个样式。
你可以将上面的代码复制到你的 React 项目中运行,就可以看到表格行的圆角边框效果了。
此外,Antd 还提供了许多其他的组件和功能,可以根据具体需求进行选择和使用。你可以参考 Antd 官方文档(https://ant.design/components/table-cn/)了解更多关于表格组件的详细信息。
领取专属 10元无门槛券
手把手带您无忧上云