Ant Design：巧用弹性布局解决表格合计行固定在底部的问题

2023-11-03 12:41:46

使用 Ant Design 实现表格合计行固定在底部

在日常开发中，我们经常需要在表格中显示合计行，并且希望合计行始终固定在表格底部。Ant Design 作为一款流行的前端 UI 框架，提供了丰富的组件和样式，可以帮助我们轻松实现这一需求。

准备工作

首先，确保已安装 Ant Design 并将其导入到项目中：

npm install antd

导入 Ant Design 的样式文件：

import 'antd/dist/antd.css';

创建表格

使用 <Table> 组件创建表格，并使用 <Table.Footer> 添加合计行：

import { Table } from 'antd';

const dataSource = ...
const columns = ...

const App = () => {
  return (
    <Table dataSource={dataSource} columns={columns} footer={() => <Table.Footer>合计行</Table.Footer>} />
  );
};

使用弹性布局固定合计行

使用弹性布局可以让合计行始终固定在表格底部：

<Table dataSource={dataSource} columns={columns} footer={() => <Table.Footer>合计行</Table.Footer>} style={{ height: 'calc(100vh - 100px)', display: 'flex', flexDirection: 'column' }} />

示例代码

import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const App = () => {
  return (
    <Table dataSource={dataSource} columns={columns} footer={() => <Table.Footer>合计行</Table.Footer>} style={{ height: 'calc(100vh - 100px)', display: 'flex', flexDirection: 'column' }} />
  );
};

export default App;