网站建设郑州公司,芷江建设工程招投标网站,WordPress浏览量免插件,公司做网站需要提供什么资料做项目用到react和antd#xff0c;没办法循序渐进的学习#xff0c;只能把一些点记录在这里#xff0c;希望大家指正。
1.杂七杂八
正文
//actionRef#xff0c;操作表单的预设方法#xff0c;包括#xff1a;刷新、重置所有项并刷新、重置到默认项、加载更多、清空选…做项目用到react和antd没办法循序渐进的学习只能把一些点记录在这里希望大家指正。
1.杂七杂八
正文
//actionRef操作表单的预设方法包括刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项
const actionRef useRef();1.ProTable Demo
这是antd提供的一种高级表格如果我们的表格需要和后端交互这是较好的一种选择。
1.1 request
表格主要是和后端交互所以为这是protable里最重要的api。 request 会接收一个对象。对象中必须要有 data 和 success如果需要手动分页 total 也是必需的。
ProTableDataType, 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;//必传columnsprotable会根据该字段渲染列
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 SpaceWxAccountSave edit appid{row.appid}/a onClick{() handleDetail(row.appid)}keylink1接入信息/aa onClick{() handleDel(row.appid)} keylink2删除/a/Space}
}
]}查询其实主要还是跟后端互动所以查询的list方法需要健壮些可以带多个参数比如我这边的写法是这样。 ListWxAccount wxAccountList(MapString, Object req);select idwxAccountList resultTypecom.demo.admin.server.wechat.entity.db.WxAccountselect wxac.appid,wxac.name,wxac.type,wxac.verifiedfrom t_smart_wx_account wxacleft join t_smart_org tso on wxac.bind_org_code tso.UUIDwhereif testname!null and name!and wxac.name like CONCAT(%,#{name},%)/ifif testappid!null and appid!and wxac.appid like CONCAT(%,#{appid},%)/if/where/select3.子标题
正文
在这里插入代码片4.子标题
正文
在这里插入代码片5.子标题
正文
在这里插入代码片
