当前位置: 首页 > 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;长宽比不合理 界面模糊 …...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...