首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Antd -如何为表格行设置圆角边框?

Antd 是一个基于 React 的企业级 UI 组件库,提供了丰富的组件,包括表格组件。要为 Antd 表格的行设置圆角边框,可以通过自定义 CSS 样式来实现。

下面是一个示例代码,演示如何使用 Antd 的 Table 组件,并为表格行设置圆角边框:

代码语言:txt
复制
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/)了解更多关于表格组件的详细信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券