react+antd封装表格组件2.0

react+antd封装表格组件2.0

  • 1.0版本 仅仅封装组件，不涉及方法
    • 需要掌握知识点
      • useImperativeHandle
  • 组件代码
  • 引用

1.0版本 仅仅封装组件，不涉及方法

1.0 仅封装组件
此方法把所用方法集体封装，以后就可以无脑开发拉！

  • 只需传入路径，组件列表请求、增删改后更新属性均在组件内发生
  • 当前页不是第一页且删除后无数据，则自动跳转到上一页
  • 查询时防止多次点击，点击一次后加遮罩，数据返回后放开
  • 已有查询条件时，再次分页带上查询条件

需要掌握知识点

useImperativeHandle

一个用于暴露自定义ref属性和自定义方法的钩子函数。可以使得父组件可以通过ref访问子组件中定义的方法和属性，从而实现对子组件的精细控制

！！使用useImperativeHandle时必须与forwardRef搭配使用，否则会报错

  • 具体使用步骤如下
//在子组件中定义需要暴露给父组件的方法和属性，并将这些方法和属性放在一个对象中
import { useImperativeHandle, forwardRef } from 'react';const Child = forwardRef((props, ref) => {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1);};// 定义需要暴露给父组件的方法和属性useImperativeHandle(ref, () => ({increment,count,}));return <div>{count}</div>;
});
//在父组件中使用子组件，并给子组件传递一个ref属性，
import { useRef } from 'react';
import Child from './Child';const Parent = () => {// 创建一个refconst childRef = useRef();// 在父组件中通过ref访问子组件的方法和属性const handleClick = () => {childRef.current.increment();};return (<div><button onClick={handleClick}>Click me</button><Child ref={childRef} /></div>);
};
//父组件中的handleClick方法通过childRef.current访问了Child组件中的increment方法和count属性。

组件代码

import { Table, Pagination, Button, Dropdown, Checkbox, message } from 'antd';
import { useDispatch } from 'umi';
import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { PicRightOutlined } from '@ant-design/icons';import './index.less';const TableComponent = forwardRef((props, ref) => {const dispatch = useDispatch();const [open, setOpen] = useState(false); //动态控制列的下拉显隐const [items, setItems] = useState([]); //当前的下拉选择状态const [loading, setLoading] = useState(true); //当前的加载状态const [dataSource, setDataSource] = useState([]); //列表数据const [total, setTotal] = useState(0); //分页总数const [size, setSize] = useState(10); //分页页数const [current, setCurrent] = useState(1); //分页当前页// 抛出获取列表方法useImperativeHandle(ref, () => ({getList,}));// 表格列表const [columns, setColumns] = useState(props.columns.map((item) => {return {...item,align: 'center',ellipsis: {showTitle: false,},};}),);//控制列的初始值const [starCol, setStarCol] = useState(props.columns.map((item) => {return {...item,check: true,align: 'center',ellipsis: {showTitle: false,},};}),);useEffect(() => {changItem(starCol);}, [props]);useEffect(() => {if (props.columns || props.columns.length > 0) {setColumns(props.columns.map((item) => {return {...item,align: 'center',ellipsis: {showTitle: false,},};}),);setStarCol(props.columns.map((item) => {return {...item,check: true,align: 'center',ellipsis: {showTitle: false,},};}),);}}, [props.columns]);useEffect(() => {// 初始请求列表if (props.url) {getList();}}, [props.url]);useEffect(() => {// 新增编辑后列表刷新if (props.list) {const list = props.list?.map((item, index) => {return {index: serialNumber(current, size, index + 1),...item,};});setDataSource(list);}}, [props.list]);useEffect(() => {if (props.search) {dispatch({type: 'utils/searchLoadingEvent',payload: true,});// 搜索请求列表getList(1, size, props.search, true);}}, [props.search]); //监听列表传入查询条件const getList = (pageCurrent, pageSize, values, isClickSearch) => {if (!isClickSearch) {// 获取列表时 没点击查询按钮 加载列表setLoading(true);}const payload = {current: pageCurrent || current,size: pageSize || size,...values,};dispatch({type: props.url,payload: payload,callback: (res) => {if (res) {setTotal(res.total);setSize(res.size);setCurrent(res.current);const list = res.data?.map((item, index) => {return {index: serialNumber(res.current, res.size, index + 1),...item,};});setDataSource(list);setLoading(false);props.listPaginationChange(payload); //更新接口条件// 处理列表最后一条数据删除时请求上一页数据if (res.data?.length == 0 && res.total > 0) {getList(res.current - 1, res.size, props.search);}//点击查询按钮 获取到数据后 关闭局部加载if (isClickSearch) {dispatch({type: 'utils/searchLoadingEvent',payload: false,});}}},});};// 分页查询列表const paginationChange = (pageCurrent, pageSize) => {getList(pageCurrent, pageSize, props.search || null);};//这个方法可加可不加，是因为前端需要展示序号，而后端不返回，所以就自己计算啦！const serialNumber = (pageIndex, pageSize, index) => {return (pageIndex - 1) * pageSize + index;};// 控制显示列的操作const onClick = ({ key }) => {if (key == 'all') {const newDrop = starCol;newDrop.map((o, index) => {o.check = true;});changItem(starCol);setColumns(props.columns.map((item) => {return {...item,check: true,align: 'center',ellipsis: {showTitle: false,},};}),);} else {const newDrop = starCol;newDrop.map((o, index) => {if (index == key) {o.check = !o.check;}});let newColumns = newDrop.filter((o) => o.check);if (newColumns.length == 0) {message.warning('请至少选择一列');} else {setStarCol(newDrop);changItem(newDrop);setColumns(newColumns); //列状态}}};// 列的选中状态改变const changItem = (data) => {let opitems = data.map((item, index) => {return {key: index,label: <Checkbox checked={item.check}>{item.title}</Checkbox>,};});opitems.unshift({key: 'all',label: <Button>{'全选列'}</Button>,},{type: 'divider',},);setItems(opitems); //当前的下拉状态};return (<div className="table">{!props?.selectIf && (<Dropdownmenu={{items,onClick,}}overlayClassName="drop"trigger={['click']}onOpenChange={() => setOpen(!open)}open={open}arrowplacement="bottomRight"><a onClick={(e) => e.preventDefault()}><Button icon={<PicRightOutlined />} title="显示/隐藏列"></Button></a></Dropdown>)}<Tableborderedcolumns={columns}rowSelection={props?.rowSelection}// dataSource={isShow ? dataSource : null}dataSource={dataSource}rowKey={(item) => item.id || item.categoryId || item.modelId}pagination={false}className="insiadeTable"scroll={{y: 450,...props?.scroll,}}onRow={props?.onRow}rowClassName={props?.rowClassName}summary={props?.summary}loading={loading}/><div className="pagination"><PaginationshowQuickJumperdefaultCurrent={current}total={total}showTotal={(total) => `共 ${total} 条`}size={size}current={current}onChange={paginationChange}pageSizeOptions={[10, 50, 100, 500]}/></div></div>);
});export default TableComponent;

引用

···const [search, setSearch] = useState(null); //搜索条件const tableComponentRef = useRef(null);const list = useSelector((state) =>state.roleManagement.roleManagementList);const [search, setSearch] = useState(null);const [listChange, setListChange] = useState(list);const [listPaginationChange, setListPaginationChange] = useState(null);
···useEffect(() => {if (list) {setListChange(list); //组件内数据响应后此处更新}}, [list]);
···const onFinish = (values) => {setSearch(values); //点击搜索后设置值};···<Form onFinish={onFinish} form={form} requiredMark={'Hidden'}><Row gutter={16}><Col span={6}><Form.Itemname="keyword"label="关键字"><Input allowClear /></Form.Item></Col><Col span={4}><Space><Buttontype="primary"icon={<SearchOutlined />}htmlType="submit">搜索</Button><Buttonicon={<SyncOutlined />}onClick={() => {form.resetFields();}}>重置</Button></Space></Col></Row></Form><TableComponentref={tableComponentRef} //组件实例url="roleManagement/getRoleManagementList"search={search} //搜索条件list={listChange} //数据源listPaginationChange={(e) => {//{current:1,size:10,..查询条件} 格式setListPaginationChange(e);}}className="list"columns={columns} //列scroll={{x: 1600,}}/>
  • 新增修改组件
      <EditfillingForm={fillingForm}open={isModalOpen}setIsModalOpen={setIsModalOpen}//修改新增组件只需传入listPaginationChange，便可保留分页及查询条件listPaginationChange={listPaginationChange}/>//修改新增后调用即可 const getRoleList = () => {dispatch({type: 'roleManagement/getRoleManagementList',payload: props.listPaginationChange,};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/104002.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

go 流程控制之switch 语句介绍

go 流程控制之switch 语句介绍

go 流程控制之switch 语句介绍 文章目录 go 流程控制之switch 语句介绍一、switch语句介绍1.1 认识 switch 语句1.2 基本语法 二、Go语言switch语句中case表达式求值顺序2.1 switch语句中case表达式求值次序介绍2.2 switch语句中case表达式的求值次序特点 三、switch 语句的灵活…
阅读更多...
如何在 PyTorch 中冻结模型权重以进行迁移学习：分步教程

如何在 PyTorch 中冻结模型权重以进行迁移学习：分步教程

一、说明 迁移学习是一种机器学习技术&#xff0c;其中预先训练的模型适用于新的但类似的问题。迁移学习的关键步骤之一是能够冻结预训练模型的层&#xff0c;以便在训练期间仅更新网络的某些部分。当您想要保留预训练模型已经学习的特征时&#xff0c;冻结至关重要。在本教程中…
阅读更多...
4年软件测试，突破不了20K，太卷了。。。

4年软件测试，突破不了20K，太卷了。。。

先说一个插曲&#xff1a;上个月我有同学在深圳被裁员了&#xff0c;和我一样都是软件测试&#xff0c;不过他是平安外包&#xff0c;所以整个组都撤了&#xff0c;他工资和我差不多都是14K。 现在IT互联网已经比较寒冬&#xff0c;特别是软件测试&#xff0c;裁员先裁测试&am…
阅读更多...
【Monorepo实战】pnpm+turbo+vitepress构建公共组件库文档系统

【Monorepo实战】pnpm+turbo+vitepress构建公共组件库文档系统

Monorepo架构可以把多个独立的系统放到一起联调&#xff0c;本文记录基于pnpm > workspace功能&#xff0c;如何构建将vitepress和组件库进行联调&#xff0c;并且使用turbo进行任务顺序编排。 技术栈清单&#xff1a; pnpm 、vitepress 、turbo 一、需求分析 1、最终目标…
阅读更多...
两台linux 之间传输文件 （详细+bash脚本)

两台linux 之间传输文件 （详细+bash脚本)

两台linux设备文件直接传输&#xff0c;有很多应用场景 一、可能的方案 &#xff08;一&#xff09;先下载再上传 从linux通过ssh下载到windows下&#xff0c;然后再通过ssh上传到另一台linux。 1.优点&#xff1a;简单 2.缺点&#xff1a;效率低&#xff0c;需要额外的设备…
阅读更多...
Node.js 新特性 SEA/单文件可执行应用尝鲜

Node.js 新特性 SEA/单文件可执行应用尝鲜

#1 关于 SEA 单文件可执行应用&#xff08;SEA&#xff0c;Singe Executable Applications&#xff09;&#xff0c;是 Node.js 新版本的特性&#xff0c;最初在 v19.7.0、v18.16.0 加入&#xff0c;并在 v20.x 得到扩展。而上个月发布的全家桶 Bun.js&#xff0c;就自带了 SEA…
阅读更多...
Docker部署rustdesk

Docker部署rustdesk

查看镜像版本 https://hub.docker.com/r/rustdesk/rustdesk-server/tags 拉取镜像 docker pull rustdesk/rustdesk-server:1.1.8-2创建挂载目录 mkdir -p /opt/rustdesk/{hbbr,hbbs}/root运行hbbs –nethost 仅适用于 Linux&#xff0c;它让 hbbs/hbbr 可以看到对方真实的…
阅读更多...
正点原子嵌入式linux驱动开发——Busybox根文件系统构建

正点原子嵌入式linux驱动开发——Busybox根文件系统构建

前面已经移植了TF-A、Uboot和Linux kernel&#xff0c;就剩最后一个 rootfs(根文件系统)了&#xff0c;本章就来学习一下根文件系统的组成以及如何构建根文件系统。这是Linux系统移植的最后一步&#xff0c;根文件系统构建好以后就意味着拥有了一个完整的、可以运行的最小系统 …
阅读更多...
大数据Doris（十）：添加BE步骤

大数据Doris（十）：添加BE步骤

文章目录 添加BE步骤 一、使用mysql连接 二、​​​​​​​添加be
阅读更多...
PySpark 概述

PySpark 概述

文章最前&#xff1a; 我是Octopus&#xff0c;这个名字来源于我的中文名--章鱼&#xff1b;我热爱编程、热爱算法、热爱开源。所有源码在我的个人github &#xff1b;这博客是记录我学习的点点滴滴&#xff0c;如果您对 Python、Java、AI、算法有兴趣&#xff0c;可以关注我的…
阅读更多...
十六、 代码校验（3）

十六、 代码校验（3）

本章概要 测试驱动开发 测试驱动 vs 测试优先 日志 日志信息日志等级 测试驱动开发 之所以可以有测试驱动开发&#xff08;TDD&#xff09;这种开发方式&#xff0c;是因为如果你在设计和编写代码时考虑到了测试&#xff0c;那么你不仅可以写出可测试性更好的代码&#xff…
阅读更多...
分享一下开发回收废品小程序的步骤

分享一下开发回收废品小程序的步骤

随着人们环保意识的不断提高&#xff0c;回收利用已成为日常生活中不可或缺的一部分。回收小程序作为一种便捷、高效的回收方式&#xff0c;越来越受到人们的关注和喜爱。本文将探讨回收小程序的意义和作用&#xff0c;设计理念、功能特点、使用流程以及推广策略&#xff0c;并…
阅读更多...
boost graph之bgl_named_params

boost graph之bgl_named_params

简介 bgl_named_params作为graph中的有名参数 定义 宏BOOST_BGL_ONE_PARAM_REF 有两个定义&#xff0c;一个定义在类bgl_named_params中用于定义成员方法&#xff0c;另外一个作为全局方法 bgl_named_params类中的成员方法 #define BOOST_BGL_ONE_PARAM_REF(name, key) \t…
阅读更多...
【奇葩问题】微信小程序 We分析 访问来源Top10的总比例为什么不止100%

【奇葩问题】微信小程序 We分析 访问来源Top10的总比例为什么不止100%

今天有朋友在小程序后台开访问来源数据的时候发现三个渠道来源的比例超过了100% 搜了很多文章最终在官方社区找到了官方回复&#xff1a; 超过100%&#xff0c;是因为可能有用户&#xff0c;在当日通过多个场景&#xff0c;打开过你的小程序 比如用户A&#xff0c;上午通过【…
阅读更多...
qt qtabwidget获取当前选项卡的所有按键

qt qtabwidget获取当前选项卡的所有按键

要获取当前选项卡中的所有按键&#xff0c;可以通过以下步骤进行&#xff1a; 通过currentIndex()函数获取当前选项卡的索引。 使用widget()函数获取当前选项卡的QWidget。 连接QWidget的keyPressEvent事件&#xff0c;并在事件处理函数中获取按下的按键信息。 下面是示例代…
阅读更多...
Navicat For MySQL使用指南

Navicat For MySQL使用指南

勾选填充零后的效果&#xff0c;就是不够的位数用零来补齐&#xff01;
阅读更多...
leetcode oj

leetcode oj

150. 逆波兰表达式求值 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;定义一个名为 Solution 的类&#xff0c;并在其中定义了一个名为 evalRPN 的公共函数。这个函数接受一个由字符串组成的向量 tokens 作为输入&#xff0c;并返回一个整数。 在代码中&#xff0…
阅读更多...
sentinel的启动与运行

sentinel的启动与运行

首先我们github下载sentinel Releases alibaba/Sentinel (github.com) 下载好了后输入命令让它运行即可&#xff0c;使用cmd窗口输入一下命令即可 java -Dserver.port8089 -jar sentinel-dashboard-1.8.6.jar 账号密码默认都是sentinel 启动成功后登录进去效果如下
阅读更多...
Nacos集群搭建

Nacos集群搭建

Nacos集群搭建 1.集群结构图 Nacos集群图&#xff1a; 其中包含3个nacos节点&#xff0c;然后一个负载均衡器代理3个Nacos。这里负载均衡器可以使用nginx。 三个nacos节点的地址&#xff1a; 节点ipportnacos1192.168.150.18845nacos2192.168.150.18846nacos3192.168.150…
阅读更多...
vue-插件

vue-插件

插件 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制。 通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成 // 调用 MyPlugin.install(Vue) Vue.use(MyPlugin)new Vue({// ...组件选项 })本质&#xff1a;包含install方法的一个…
阅读更多...
最新文章

Copyright @ 2022~2023