做项目用到react和antd,没办法循序渐进的学习,只能把一些点记录在这里,希望大家指正。
正文
//actionRef,操作表单的预设方法,包括:刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项
const actionRef = useRef();
这是antd提供的一种高级表格,如果我们的表格需要和后端交互,这是较好的一种选择。
表格主要是和后端交互,所以为这是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,
};
}}
/>
//引入方法
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.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>
正文
在这里插入代码片
正文
在这里插入代码片
正文
在这里插入代码片