当前位置: 首页 > news >正文

React实战过程的知识了解

做项目用到react和antd,没办法循序渐进的学习,只能把一些点记录在这里,希望大家指正。

1.杂七杂八

正文

//actionRef,操作表单的预设方法,包括:刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项
const actionRef = useRef();

1.ProTable Demo

这是antd提供的一种高级表格,如果我们的表格需要和后端交互,这是较好的一种选择。

1.1 request

表格主要是和后端交互,所以为这是protable里最重要的api。
request 会接收一个对象。对象中必须要有 data 和 success,如果需要手动分页 total 也是必需的。

<ProTable<DataType, Params>// params 是需要自带的参数// 这个参数优先级更高,会覆盖查询表单的参数params={params}request={async (// 第一个参数 params 查询表单和 params 参数的结合// 第一个参数中一定会有 pageSize 和  current ,这两个参数是 antd 的规范params: T & {pageSize: number;current: number;},sort,filter,) => {// 这里需要返回一个 Promise,在返回之前你可以进行数据转化// 如果需要转化参数可以在这里进行修改const msg = await myQuery({page: params.current,pageSize: params.pageSize,});return {data: msg.result,// success 请返回 true,// 不然 table 会停止解析数据,即使有数据success: boolean,// 不传会使用 data 的长度,如果是分页一定要传total: number,};}}
/>

1.2 columns

//引入方法
import { ProTable } from '@ant-design/pro-components';//必传columns,protable会根据该字段渲染列
columns={[{title: 'appid', dataIndex: 'appid', key: 'appid'
}, {title: '公众号名称', dataIndex: 'name', key: 'name'
}, {//默认每个字段都会被查询,增加search:false,或者hideInSearch:true,就会被隐藏title: '类型', dataIndex: 'type', key: 'type', hideInSearch: true
}, {title: '是否认证', dataIndex: 'verified', key: 'verified', hideInSearch: true
}, {title: '操作', hideInSearch: true,render: (_, row) => {return <Space><WxAccountSave edit appid={row.appid}/><a onClick={() => handleDetail(row.appid)}key="link1">接入信息</a><a onClick={() => handleDel(row.appid)} key="link2">删除</a></Space>}
}
]}

查询其实主要还是跟后端互动,所以查询的list方法需要健壮些,可以带多个参数,比如我这边的写法是这样。

    List<WxAccount> wxAccountList(Map<String, Object> req);<select id="wxAccountList" resultType="com.demo.admin.server.wechat.entity.db.WxAccount">select wxac.appid,wxac.name,wxac.type,wxac.verifiedfrom t_smart_wx_account wxacleft join t_smart_org tso on wxac.bind_org_code = tso.UUID<where><if test="name!=null and name!=''">and wxac.name like CONCAT('%',#{name},'%')</if><if test="appid!=null and appid!=''">and wxac.appid like CONCAT('%',#{appid},'%')</if></where></select>

3.子标题

正文

在这里插入代码片

4.子标题

正文

在这里插入代码片

5.子标题

正文

在这里插入代码片

相关文章:

React实战过程的知识了解

做项目用到react和antd&#xff0c;没办法循序渐进的学习&#xff0c;只能把一些点记录在这里&#xff0c;希望大家指正。 1.杂七杂八 正文 //actionRef&#xff0c;操作表单的预设方法&#xff0c;包括&#xff1a;刷新、重置所有项并刷新、重置到默认项、加载更多、清空选…...

F对象和Q对象

F对象和Q对象 F对象 一个F对象代表数据库中某条记录的字段的信息 作用: 通常是对数据库中的字段值在不获取的情况下进行操作 用于类属性(字段)之间的比较 语法 from django.db.models import F F(列名)解决一种极端事件的产生&#xff0c;比如用户对一条微博的点赞&#xf…...

Visio——绘制倾斜线段

一、形状 -> 图表和数学图形 -> 多行 二、放置多行线&#xff0c;可以发现存在两个折点 三、选择多行线&#xff0c;右键选择删除点&#xff0c;即可得到倾斜线段...

Linux复习-安装与熟悉环境(一)

这里写目录标题 虚拟机ubuntu系统配置镜像Linux命令vi编辑器3个模式光标命令vi模式切换命令vi拷贝与粘贴命令vi保存和退出命令vi的查找命令vi替换命令 末行模式复制、粘贴、剪切gcc编译器 虚拟机 VMware16 官网下载&#xff1a;vmware官网 网盘下载&#xff1a; 链接&#xff…...

Go基础语法:map

9 map Go 语言中提供的映射关系容器为 map &#xff0c;其内部使用 散列表&#xff08;hash&#xff09; 实现。它是一种无序的基于 key-value 的数据结构。 Go 语言中的 map 是引用类型&#xff0c;必须初始化之后才能使用。 9.1 map 定义 Go 语言中 map 的定义语法为&…...

开发板TFTP调试

问题描述 开发板和host(此处指虚拟机linux)可以平通&#xff0c;但是通过uboot tftp下载请求时一直显示T T T, 即超时 使用wireshark抓包也显示超时 措施 关闭windows和linux的防火墙 重新进行下载成功...

MySQL---优化日志

目录 一、MySQL优化 3、mysql server上的优化 3.1、MySQL查询缓存 3.2、索引和数据缓存 3.2、线程缓存 二、MySQL日志 2.1、redo log 重做日志 2.2、undo log 回滚日志 2.3、错误日志 2.4、查询日志 2.5、二进制日志 2.5.1、基于binlog数据恢复实践操作 六、慢查…...

【送面试题】深入解析Cookie和Session的请求区别及使用场景

AI绘画关于SD,MJ,GPT,SDXL百科全书 面试题分享点我直达 2023Python面试题 2023最新面试合集链接 2023大厂面试题PDF 面试题PDF版本 java、python面试题 项目实战:AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI…...

010_第一代软件开发(二)

第一代软件开发(二) 文章目录 第一代软件开发(二)项目介绍界面布局功能完善快照功能获取可用串口播放按键提示音 关键字&#xff1a; Qt、 Qml、 QSerialPort、 QPixmap、 QSoundEffect 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff…...

基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(四)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 上一节说到待办系统的监听器TaskCreateListener&#xff0c;需要在flowable全局监听配置里加入配置 1、Glo…...

RestTemplate:简化HTTP请求的强大工具

文章目录 什么是RestTemplateRestTemplate的作用代码示例 RestTemplate与HttpClient 什么是RestTemplate RestTemplate是一个在Java应用程序中发送RESTful HTTP请求的强大工具。本文将介绍RestTemplate的定义、作用以及与HttpClient的对比&#xff0c;以帮助读者更好地理解和使…...

【数据结构】什么是数据结构?

数据结构(Data Structure)是计算机存储,组织数据的方式,指相互之间存在一种或多种特定关系的数据元素的集合. 这么讲可能有些抽象,放一张图大家可能好理解一点: 上图依次是数据结构中逻辑结构中的:集合结构,线性结构,树形结构,图形结构. 而: 数据结构是一门研究非数值计算的程…...

c++源码编译过程(翻译阶段)的若干细节概要

c程序的编译主要包含两个阶段&#xff1a;源码编译(翻译阶段)和目标文件链接。 源码编译过程主要有如下这些阶段&#xff1a; 阶段1: 翻译源码文本字符 阶段2: 逻辑源码行标准化处理 阶段3: 文法处理&#xff0c;分解为不同的源码文本类型序列。例如分解为注释、预处理指…...

Go内置函数make和new的区别?

首先纠正一下make 和 new 是内置函数&#xff0c;不是关键字。 变量初始化&#xff0c;一般分为2步&#xff0c;变量声明变量内存分配&#xff0c;var 关键字就是用来声明变量的&#xff0c;new和make 函数主要是用来分配内存的。 var 声明值类型的变量时&#xff0c;系统会默…...

动手学深度学习(pytorch版)第二章-2.3线性代数Note-linear-algebra

类型 标量&#xff1a;仅包含一个数值被称为标量 向量&#xff1a;向量可以被视为标量值组成的列表 矩阵&#xff1a;正如向量将标量从零阶推广到一阶&#xff0c;矩阵将向量从一阶推广到二阶。 A torch.arange(20).reshape(5, 4) A.T //转置 张量&#xff1a;是描述具有…...

Docker CMD指令如何覆写

在Dockerfile里,CMD指令是可以被覆盖的。 在构建镜像时,可以通过docker build命令的–cmd选项覆盖Dockerfile的CMD: 例如: FROM ubuntu CMD ["echo","hello"]构建时覆盖CMD: docker build -t test --cmd "echo world" .在创建容器时,可以通过…...

动手吧,vue单独使用的复选框

单独使用的复选框可以用在两个状态之间的切换&#xff0c;如是否阅读协议、记住账号等场景。 效果&#xff1a; 1、template部分 <template><label class"v-checkbox-single"><span class"v-checkbox_input" :class"{ disabled }&qu…...

升级iOS17后可以降级吗?iOS17退回iOS16方法教程分享

iOS 17已上线几天&#xff0c;从网上用户的反馈和媒体机构的报告来看&#xff0c;iOS17系统对旧机型来说并不友好&#xff0c;除了电池续航下降以外&#xff0c;占用大量储存空间&#xff0c;BUG也不少。 苹果于 9 月 7 日发布了 iOS 16.6.1 版本&#xff0c;如果升级iOS17后发…...

基于STM32和LORA组网的养老院智能控制系统设计(第十八届研电赛)

一、整体功能 数据采集从机1采集烟雾浓度&#xff0c;PM2.5浓度&#xff0c;甲醛浓度&#xff1b;从机2采集温湿度&#xff0c;光照强度&#xff0c;噪声强度&#xff0c;老人体感温度&#xff1b;从机3收集厨房饮用水的TDS值。3个数据采集从机将采集到的数据显示在本地OLED屏…...

关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案

如果没有特殊的处理&#xff0c;Qt的UI窗口在不同的分辨率和缩放率下&#xff0c;其显示效果可能会出现问题&#xff0c;常见的有&#xff1a; 子控件堆叠&#xff0c;无法显示完整 窗口尺寸变大&#xff0c;超出屏幕的显示范围 控件变形&#xff0c;长宽比不合理 界面模糊 …...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...