【共享单车】—— React后台管理系统开发手记：AntD Table高级表格

最新推荐文章于 2024-05-15 11:08:23 发布

柳柳Elena

最新推荐文章于 2024-05-15 11:08:23 发布

阅读量729

点赞数

本文链接：https://blog.csdn.net/qq_34235864/article/details/86580864

版权

本文记录了使用React和AntD库开发后台管理系统中，如何实现表格的头部固定、左侧固定、排序及操作按钮等功能。通过示例代码详细介绍了AntD Table组件的scroll属性、固定列、排序功能以及自定义操作列的实现方法。

摘要由CSDN通过智能技术生成

【共享单车】—— React后台管理系统开发手记：AntD Table高级表格

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。

一、头部固定

scroll属性：设置横向或纵向滚动，也可用于指定滚动区域的宽和高

<Card title="头部固定">
          <Table 
                bordered
                columns={columns}
                dataSource={this.state.dataSource}
                pagination={false}
                scroll={
        {y: 240}}
           />
 </Card>

此处：y方向限制的高度240px小于表格总高度，便可纵向滚动

二、左侧固定

设置scoll属性：实现表格横向滚动

<Card title="左侧固定" style={
        {margin: '10px 0'}}>
          <Table 
                 bordered
                 columns={columns2}
                 dataSource={this.state.dataSource}
                 pagination={false}
                 scroll={
        {x: 1130}}
           />
 </Card>

此处：x方向限制的宽度1130px大于表格总宽度，便可横向滚动

在column2表头设置中：给id和username添加fixed属性为left，实现id与用户名固定在左侧

 const columns2 = [
         {
              title: 'id',   //表头标题
              key: 'id',
              width: 80,
              fixed: 'left',
              dataIndex: 'id' //数据源
         },
         {
              title: '用户名',
              key: 'userName',
              width: 80,
              fixed: 'left',
              dataIndex: 'userName'
         },

三、表格排序

onChange事件：分页、排序、筛选变化时触发

<Card title="表格排序" style={
        {margin: '10px 0'}}>
           <Table 
                    bordered
                    columns={columns3}
                    dataSource={this.state.dataSource}
                    pagination={false}
                    onChange={this.handleChange}
            />
</Card>

sorter函数：对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮

在column3表头设置中：给age年龄字段指定sorter函数，并添加sorterOrder属性

{
       title: '年龄',
       dataIndex: 'age',
       key: 'age',
       sorter: (a, b) => {
              return a.age - b.age;
       },
       sortOrder: t