React18-模拟列表数据实现基础表格功能

已于 2024-01-31 02:11:52 修改
阅读量429 收藏
点赞数 1
分类专栏： 项目实战 文章标签： react.js
于 2024-01-31 00:30:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35812380/article/details/135944030
版权

文章目录

分页功能

在这里插入图片描述

分页组件有两种

table组件自带分页

<Table
  bordered
  rowKey="userId"
  rowSelection={{ type: 'checkbox' }}
  pagination={{
    position: ['bottomRight'],
    pageSize: pagination.pageSize,
    current: pagination.current,
    showQuickJumper: true,
    showSizeChanger: true,
    onChange: (page, pageSize) => {
      setPagination({
        current: page,
        pageSize
      })
    }
  }}
  dataSource={data}
/>

分页组件

<Pagination
  pageNum={pagination.pageNum}
  pageSize={pagination.pageSize}
  total={pagination.total}
  onChange={(pageNum: number, pageSize: number) => {
    setPagination({
      current: page,
      pageSize
    })
  }}
/>

接口参数

{
  pageNum: 1,
  pageSize: 10,
  userId: '',
  userName: '',
  state: ''
}

分页类型

export interface PageParams {
  pageNum: number | undefined
  pageSize?: number | undefined
}

用户列表参数类型

export interface Params extends PageParams {
	userId?: number
	userName?: string
	state?: number
}

模拟列表数据

const list = Array.from({length:20})
				.fill({})
				.map((item:any)=>{
					item = {...data.list[0]}
					item.userId = Math.random()
					return item
				})

分页触发方式

  1. 进入页面，模拟初始化列表
  2. 点击搜索，初始化列表
  3. 点击页码，更新列表
  4. 点击每页条数， 更新列表

实现

目录

在这里插入图片描述
system/index.tsx

import api from "@/api";
import { PageParams, User } from "@/types/api";
import { formatDate } from "@/utils";
import { Button, Form, Input, Select, Space, Table } from "antd";
import { ColumnsType } from "antd/es/table";
import { useEffect, useState } from "react";

export default function UserList() {
    const [form] = Form.useForm();
    const [data, setData] = useState<User.UserItem[]>([])
    const [total, setTotal] = useState(0)
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10
    })

    // 获取用户列表
    const getUserList = async (params: PageParams) => {
        const values = form.getFieldsValue()
        const data = await api.getUserList({
            ...values,
            pageNum: params.pageNum,
            pageSize: params.pageSize
        });
        const list = Array.from({ length: 50 })// 模拟数据
            .fill({})
            .map((item: any) => {
                item = { ...data.list[0] }
                item.userId = Math.random()
                return item
            })

        // setData(data.list)
        // setTotal(data.page.total)
        setData(list) // 模拟数据
        setTotal(list.length)// 模拟数据
        setPagination({
            current: data.page.pageNum,
            pageSize: data.page.pageSize,
        })
    }

    useEffect(() => {
        getUserList({
            pageNum: pagination.current,
            pageSize:  pagination.pageSize
        })
    }, [pagination.current, pagination.pageSize])// 在Page切换时候，进行依赖收集，修改其中的pageNum，与pageSize，完成列表更新

    // 搜索
    const handleSearch = ()=>{
        getUserList({
            pageNum: 1,
            pageSize: pagination.pageSize
        })
    }

    // 重置表单
    const handleReset = ()=>{
        form.resetFields()
    }
    // const dataSource = [
    //   {
    //     _id: '',
    //     userId: 0,
    //     userName:'',
    //     userEmail: '',
    //     deptId: '',
    //     state: 0,
    //     mobile: '',
    //     job: '',
    //     role: 0,
    //     roleList: '',
    //     createId: 0,
    //     deptName: '',
    //     userImg: '',
    //   }
    // ];


    // https://ant-design.antgroup.com/components/table-cn
    const columns: ColumnsType<User.UserItem> = [
        {
            title: '用户ID',
            dataIndex: 'userId',
            key: 'userId',
        },
        {
            title: '用户名称',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '用户邮箱',
            dataIndex: 'userEmail',
            key: 'userEmail',
        },
        {
            title: '用户角色',
            dataIndex: 'role',
            key: 'role',
            render(role: number) {
                return {
                    0: '超级管理员',
                    1: '管理员',
                    2: '体验管理员',
                    3: '普通用户'
                }[role]
            }
        },
        {
            title: '用户状态',
            dataIndex: 'state',
            key: 'state',
            render(state: number) {
                return {
                    1: '在职',
                    2: '试用期',
                    3: '离职',
                }[state]
            }
        },
        {
            title: '注册时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render(createTime: string) {
                return formatDate(createTime)
            }
        },
        {
            title: '操作',
            render(record, values) {
                return <Space>
                    <Button type="text">编辑</Button>
                    <Button type="text" danger>删除</Button>
                </Space>
            }
        },
    ];
    return <div className="user-list">
        <div className="search-form">
            <Form
                layout="inline"
                form={form}
                initialValues={{ state: 0 }}
            >
                <Form.Item name="userId" label="用户ID">
                    <Input placeholder="请输入用户ID" />
                </Form.Item>

                <Form.Item name="userName" label="用户名称">
                    <Input placeholder="请输入用户名称" />
                </Form.Item>


                <Form.Item name="state" label="状态">
                    <Select style={{ width: 120 }}>
                        <Select.Option value={0}>所有</Select.Option>
                        <Select.Option value={1}>在职</Select.Option>
                        <Select.Option value={2}>试用期</Select.Option>
                        <Select.Option value={3}>离职</Select.Option>
                    </Select>
                </Form.Item>


                <Form.Item>
                    <Space>
                        <Button type="primary" onClick={handleSearch}>搜索</Button>
                        <Button type="default" onClick={handleReset}>重置</Button>
                    </Space>

                </Form.Item>
            </Form>
        </div>
        <div className="base-table">
            <div className="header-wrapper">
                <div className="title">用户列表</div>
                <div className="action">
                    <Button type="primary">新增</Button>
                    <Button type="primary" danger>批量删除</Button>
                </div>
            </div>
            <Table
                bordered
                pagination={{
                    position:['bottomRight'],
                    current: pagination.current,
                    pageSize:pagination.pageSize,
                    total,
                    showQuickJumper: true,
                    showSizeChanger:true, // 控制分页器一直有，如果不设置，那么只有total>50时，展示分页器
                    showTotal:(total)=>`总共${total}条`,
                    onChange:(page, pageSize)=>{
                        setPagination({
                            current: page,
                            pageSize: pageSize
                        })
                    }
                }}
                rowKey='userId'
                rowSelection={{
                    type: 'checkbox'
                }}
                dataSource={data}
                columns={columns}
            />
        </div>
    </div>
}

api/index.tsx

import { User } from '@/views/system/user'
import qs from 'qs'
export default {
  getUserList(params: User.Params) {
    // mock
    console.log('userList请求参数')
    console.log(qs.stringify(params))
    if (params.pageNum > 1) {
      return fetch('/system/userEmpty.json?' + qs.stringify(params))
        .then(res => res.json())
        .then(res => {
          return {
            ...res.data,
            data: {
              page: {
                pageNum: params.pageNum,
                pageSize: params.pageSize,
                total: 0
              },
              list: [{}]
            }
          }
        })
    } else {
      return fetch('/system/user.json?' + qs.stringify(params))
        .then(res => res.json())
        .then(res => res.data)
    }
  }
}

public/system/user.json

{
    "code": 0,
    "data": {
      "page": {
        "pageNum": 1,
        "pageSize": 10,
        "total": 10
      },
      "list": [
        {
          "userImg": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          "createTime": "2023-11-22T10:44:25.532Z",
          "userId": 1000016,
          "userName": "JackMa",
          "userEmail": "jackma@mars.com",
          "mobile": "17011221122",
          "sex": 0,
          "deptId": "",
          "deptName": "",
          "job": "前端工程师",
          "state": 1,
          "role": 2,
          "createId": 1000002,
          "lastLoginTime": "2024-01-30T15:47:11.116Z",
          "roleList": "655dbedb11c02c8597dce76f"
        },
        {
          "userId": 100017,
          "userName": "JackBean",
          "userEmail": "jackbean@mars.com",
          "deptId": "655dbef811c02c8597dce77a",
          "deptName": "大前端",
          "state": 1,
          "role": 1,
          "roleList": "655dbedb11c02c8597dce76f",
          "createId": 1000002,
          "userImg": "",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2023-11-22T09:21:22.314Z",
          "__v": 0
        },
        {
          "userId": 100018,
          "userName": "9549587",
          "userEmail": "9549587@mars.com",
          "deptId": "",
          "deptName": "",
          "state": 1,
          "role": 1,
          "roleList": "",
          "createId": 1000002,
          "userImg": "http://api-driver.marsview.cc/3f9393c68f57ac57704652f00.png",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2024-01-30T06:53:57.530Z",
          "__v": 0,
          "job": "测试"
        },
        {
          "userId": 100020,
          "userName": "1366143860",
          "userEmail": "1366143860@mars.com",
          "deptId": "6568c7254a54800ac8d5b18e",
          "deptName": "部门5",
          "state": 1,
          "role": 1,
          "roleList": "",
          "createId": 1000002,
          "userImg": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2023-12-21T07:41:46.976Z",
          "mobile": "13072361279",
          "job": "前端1"
        },
        {
          "userId": 100022,
          "userName": "413401333",
          "userEmail": "413401333@mars.com",
          "deptId": "6582ae994a54800ac8d76b80",
          "deptName": "前端",
          "state": 1,
          "role": 1,
          "roleList": "6582aeb44a54800ac8d76b88",
          "createId": 1000002,
          "userImg": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2024-01-02T02:16:53.036Z",
          "job": "前端"
        },
        {
          "userId": 100023,
          "userName": "1050732226",
          "userEmail": "1050732226@mars.com",
          "deptId": "",
          "deptName": "大前端",
          "state": 1,
          "role": 1,
          "roleList": "",
          "createId": 1000002,
          "userImg": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2024-01-06T05:55:34.501Z"
        },
        {
          "userId": 100024,
          "userName": "191337035",
          "userEmail": "191337035@mars.com",
          "deptId": "",
          "deptName": "大前端",
          "state": 1,
          "role": 1,
          "roleList": "",
          "createId": 1000002,
          "userImg": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2024-01-06T05:56:01.926Z"
        },
        {
          "userId": 100025,
          "userName": "717210290",
          "userEmail": "717210290@mars.com",
          "deptId": "",
          "deptName": "大前端",
          "state": 1,
          "role": 1,
          "roleList": "",
          "createId": 1000002,
          "userImg": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2024-01-06T05:56:16.764Z"
        },
        {
          "userId": 100027,
          "userName": "475721797",
          "userEmail": "475721797@mars.com",
          "deptId": "",
          "deptName": "大前端",
          "state": 1,
          "role": 1,
          "roleList": "",
          "createId": 1000002,
          "userImg": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2024-01-06T06:10:25.195Z"
        },
        {
          "userId": 100028,
          "userName": "1667519970",
          "userEmail": "1667519970@mars.com",
          "deptId": "",
          "deptName": "大前端",
          "state": 1,
          "role": 1,
          "roleList": "",
          "createId": 1000002,
          "userImg": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
          "createTime": "2023-11-22T08:52:47.963Z",
          "lastLoginTime": "2024-01-06T06:02:09.986Z"
        }
      ]
    },
    "msg": ""
  }

public/system/userEmpty.json

{
    "code": 0,
    "data": {},
    "msg": ""
  }

在切换分页时候看到参数发生变化
在这里插入图片描述

搜索时候可以看到搜索参数传入
在这里插入图片描述
代码地址

小李科技
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-ReactDatasheet类似Excel的数据网格react组件
08-15
在React生态系统中，有许多第三方组件库帮助开发者快速实现各种功能，其中"ReactDatasheet"就是针对数据网格和表格操作的一个优秀组件。 "ReactDatasheet"是一个类似Excel的数据网格组件，它允许用户以直观、易于...
react 表格
cccbbbmmm的博客
09-12 290
React 表格是在 React 应用程序中呈现和操作表格数据的常见任务。您可以使用 React 的组件化和状态管理功能来创建灵活且可重用的表格组件。在 React 中，您可以使用 JSX 语法编写表格的结构。组件传递不同的数据属性来在应用程序中使用这个表格组件。组件中定义了要在表格中显示的数据数组。该属性是一个包含表格数据的数组。在上面的示例中，我们创建了一个名为。的函数式组件，它接受一个名为。组件，以在应用程序中呈现表格。元素来显示每个数据字段的值。在组件的结构中，我们使用。在上面的示例中，我们在。
react-antd中表格的使用(数据的请求，带删除功能的表格)
weixin_45745641的博客
04-03 5469
最近在学习react-antd框架，表格这一块在项目中的使用频率很高，最近在学习这一块的内容，所以记录一下
自定义一个复杂的React Table表格组件-06
最新发布
编程是一门实践技术
05-26 470
> 前面基本了解了组件的基本用法，在本节会实现一个更高级的例子。另外需要注意`本节代码是采用V15版本的createClass()、React.DOM和JSX实现的`，有时间的同学可以改成类实现的方式。 html的世界中最复杂的UI控制就是表格了，原因是table它依赖本地环境来创建，不同的系统不同的浏览器对table的实现并不一样，也导致有些功能换了个浏览器不就好用了。
用react 构建电子表格（5）--给数据插上时间的翅膀
wh_xia_jun的专栏
12-02 602
使用react,我一直想：数据控制样式 而不是相反。 定位问题：table 容器定义一个position：relative后面的元素如果需要绝对定位的时候都相对于这个定位。 长度单位：采取pt,这个绝对单位，猜测绝对单位也许对今后要搞的打印有好处？ 数据的处理： 如何表现被选择的单元格：前面提到： 1、搞个边框线，把选择的单元格框起来，这样做的问题好处是 对表格没啥侵入性，缺陷是略复杂，因为要获取选择的单元个的位置信息（坐标信息），再搞线的定位。 2、修改选择单元格的样式 如修改相关单元格的边.
React导入xlsx、xls文件 读取内容 渲染表格（可编辑）
weixin_58346650的博客
12-20 1581
2、更改表格数据，重新设置表格数据的方法（changeTableData）。3、工作区改变、Select改变的方法（handleChange）。1、文件改变、工作区改变调用的方法（handleUpload）。表格数据如下：Sheet1数据9条 Sheet2数据100条 Sheet3没数据。项目需求：将Excel表格文件中的数据取出之后进行保存到数据库（前端实现）5、文件内工作区列表（Select选择框的options）4、上传文件（改变工作区的时候会用到）7、默认工作区（文件工作区的第一个）
React antd 表格新增 表格修改 删除 表格数据回显
qq_42704945的博客
06-08 5581
弹窗中就设置form的initValues就是穿过来的formValue的值，如果是新增的时候就是一个空对象，然后新增的每一项的值填写一个才有一个，如果需要默认值的话就需要设置对象合并{默认值,…这种方式就是通过判断在点击修改的数据对formValue的值判断只有这个值的key长度不为零才渲染修改的组件，这里采用了两个同一个组件的方式，通过不同的弹窗状态去判断显示是新增还是修。这种方式通过form.resetFields();form.setFieldsValue方式设置form的值。
react写法-使用js高阶函数实现多条件搜索功能
06-27
用react写法来实现，思路+步骤： 第一步：准备数据 首先，需要创建一段假数据，模拟后端接口返回的数据。 第二步：根据数据结构渲染Dom 这一步，我们要根据数据接口，看看要设计几个搜索框。 根据第一步我们设计的...
react-一个reactspring驱动类似于masonry的网格
08-15
在本文中，我们将深入探讨如何使用`react-spring`库创建一个类似Masonry的动态网格布局，以及在React开发中实现表格和数据网格的高级功能。`Masonry`布局是一种流行的瀑布流布局方式，它允许元素根据其内容大小...
react-ant-design
12-29
"react-ant-design"可能使用了Mock工具，如Mock.js，来模拟API响应，这样在没有真实后端服务的情况下也能进行前端功能的测试和验证。 5. **ECharts**：ECharts是百度开源的一个数据可视化库，支持多种图表类型，如...
react-MinAdmin基于dva框架antd的React后台模板
08-15
React-MinAdmin是一个高效、简洁且功能丰富的后台管理模板，它充分利用了React的组件化特性，结合了DVA的状态管理框架以及Ant Design UI库，为开发者提供了一个快速构建后台应用的基础平台。 **React技术栈** React...
react-BaseTable是一个react表格组件能够以高性能和灵活性的显示大型数据集
08-15
BaseTable是一个react表格组件，能够以高性能和灵活性的显示大型数据集
react-ReactTable一个快速轻量级固执己见的React数据表格
08-15
React Table - 一个快速、轻量级、固执己见的React数据表格
react-rsuitetable是一个React实现的表格Table组件
08-15
rsuite-table 是一个 React 实现的表格(Table) 组件。支持固定表头，固定列（固定在左侧）；支持自定义调整列宽；支持自定义单元格内容；支持显示树状表格；支持排序。
react-React的电子表格组件
08-15
React的电子表格组件
React-editable-table:从头开始React可编辑表格
04-19
React可编辑的员工表（数据表） 这个项目是使用任何外部模块（例如react-data-grid，react-datasheet等）从头开始创建的。 特征 在一张桌子中查看所有员工 编辑所需的单元格（内联编辑） 将任何行标记为已删除 撤消删除操作 获取更新的（如果任何属性与初始值不同）雇员的列表。 如果任何单元格的值均已更改，但随后又恢复为先前的值，则不会假定此员工为已更新。 获取标记为已删除的员工列表。 如果已更新员工，然后将其标记为已删除，则该员工将保留在已删除列表中。 重置数据（将所有更改返回到初始状态） 通过单击“提交数据”按钮查看更新和删除的员工的JSON数据 下载JSON数据 搜索功能 基本验证（日期，电话号码验证等） 分页 好好享受！ :vulcan_salute: :raising_hands:
React组件思想篇:React封装简单表格(含复选框,无多级表头,无合并行以及合并列)
YanHSama的博客
10-16 1304
表格效果图 当复选框触发时,父组件接收到的数据 实现思路 1.将表头列,数据源,是否开启复选框开放出去，通过父组件传进来 2.开启复选框,选中的数据需要传给父组件; 代码说明 //标题格式 const column = [ { keyName:'name', valueName:'姓名' }, { keyName:'age', valueName:'年龄' }, { keyName:'school', valueName:'学校'
【React教程】(3) React之表单、组件、事件处理详细代码示例
shenchengyv的博客
01-29 1481
根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做。参考文档：https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values。参考文档：https://reactjs.org/docs/refs-and-the-dom.html。参考文档：https://reactjs.org/docs/forms.html。
React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
蒋川@卡拉云
07-12 6373
在日常开发中，特别是内部使用的后台系统时，我们常常会需要用表格来展示数据，同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好，但如果要在 React 中实现一个功能丰富的表格，其实是非常不容易的。在本站之前的文章《最好的 6 个 React Table 组件详细亲测推荐》 中有提到过 react-table 这个库，如果对这个库不太了解的同学可以先了解一下，这里不再赘述。简而言之，react-table 是一个非常强大的库，它与常见的表格组件不同，它不负责渲染 HTML
React ProTable表格实时更新数据用函数组件ts怎么实现
05-05
在函数组件中实现实时更新数据可以使用React Hooks中的useState和useEffect。 首先，定义一个state用来存储表格数据，使用useState初始化为空数组： ```typescript const [tableData, setTableData] = useState([]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值