antd 表格 内容展示多行时实现居中
要实现antd表格内容展示多行时居中,可以使用antd的Table组件的columns属性中的render方法来自定义渲染单元格的内容。在render方法中,可以使用CSS样式来设置单元格的文本居中。
下面是一个示例代码:
import { Table } from 'antd';
const dataSource = [
{
id: 1,
name: 'John Doe',
age: 25,
address: '123 Main St',
},
{
id: 2,
name: 'Jane Smith',
age: 30,
address: '456 Elm St',
},
];
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text) => <div style={{ textAlign: 'center' }}>{text}</div>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
render: (text) => <div style={{ textAlign: 'center' }}>{text}</div>,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
render: (text) => <div style={{ textAlign: 'center' }}>{text}</div>,
},
];
const App = () => {
return <Table dataSource={dataSource} columns={columns} />;
};
export default App;
在上面的示例代码中,我们定义了一个dataSource数组来存储表格的数据。然后,我们定义了一个columns数组来配置表格的列。在每一列的render方法中,我们使用div元素来包裹文本,并设置样式textAlign为'center'来实现文本的居中显示。
最后,我们将dataSource和columns作为Table组件的属性传递,就可以实现表格内容展示多行时的居中效果
原文地址: https://cveoy.top/t/topic/iEX7 著作权归作者所有。请勿转载和采集!