React and antd are used in projects. There is no way to learn them step by step. I can only record some points here. I hope everyone can correct me.
1. Miscellaneous
text
//actionRef，操作表单的预设方法，包括：刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项
const actionRef = useRef();
//刷新界面
actionRef?.current?.reload();
//重置表单数据
formRef?.current?.resetFields()
//富文本展示
<div dangerouslySetInnerHTML={
{
__html: contentInfo}}/>
1.ProTable Demo
This is an advanced form provided by antd. If our form needs to interact with the backend, this is a better choice.
1.1 request
The table mainly interacts with the backend, so this is the most important API in protable.
request will receive an object. Data and success must be included in the object, and total is also required if manual paging is required.
<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>
}
}
]}
In fact, the query mainly interacts with the backend, so the list method of the query needs to be more robust and can take multiple parameters, such as the way I write it here.
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.verified
from t_smart_wx_account wxac
left 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. Subtitle
text
在这里插入代码片
4. Subtitle
text
在这里插入代码片
5. Subtitle
text
在这里插入代码片