React と antd はプロジェクトで使用されます。段階的に学習する方法はありません。ここにはいくつかの点しか記録できません。皆さんに修正していただければ幸いです。
1. その他
文章
//actionRef，操作表单的预设方法，包括：刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项
const actionRef = useRef();
//刷新界面
actionRef?.current?.reload();
//重置表单数据
formRef?.current?.resetFields()
//富文本展示
<div dangerouslySetInnerHTML={
{
__html: contentInfo}}/>
1.ProTable デモ
これは antd によって提供される高度なフォームです。フォームがバックエンドと対話する必要がある場合は、これがより良い選択です。
1.1 リクエスト
テーブルは主にバックエンドと対話するため、これは protable で最も重要な API です。
リクエストはオブジェクトを受け取ります。データと成功はオブジェクトに含める必要があり、手動ページングが必要な場合は合計も必要です。
<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列
//引入方法
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<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. サブタイトル
文章
在这里插入代码片
4. サブタイトル
文章
在这里插入代码片
5. サブタイトル
文章
在这里插入代码片