要实现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 著作权归作者所有。请勿转载和采集!