位置: IT常识 - 正文

antd pro 使用心得(antd pro v5)

编辑:rootadmin
最近用 antd pro 开发了一些 web 小工具。 antd pro 不仅仅是升级版的 antd 组件,更重要的是提供了全套的前端解决方案,包括前端工程的编译打包,路由配置,数据管理,样式和资源的引用,和后端的交互方式。 甚至对于网站的国际化也有支持。 本篇是近期使用antd pro 时,用到的 ...

推荐整理分享antd pro 使用心得(antd pro v5),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:antd proform,antd pro table,antd pro components,antd pro5,antd proform,antd pro v5,antd pro5,antd proform,内容如对您有帮助,希望把文章链接给更多的朋友!

最近用 antd pro 开发了一些 web 小工具。

antd pro 不仅仅是升级版的 antd 组件,更重要的是提供了全套的前端解决方案,包括前端工程的编译打包,路由配置,数据管理,样式和资源的引用,和后端的交互方式。甚至对于网站的国际化也有支持。

本篇是近期使用antd pro 时,用到的一些功能的整理,整理这些内容是因为比较常用,省得每次在 antd pro 的官方文档中去搜索。

菜单部分

antd pro一般用在后台的管理系统,所以菜单部分是重中之重,antd pro 的菜单是集中在一个文件中(config/routes.ts)配置的,非常方便。

子菜单配置

管理系统中,随着管理粒度的细分,子菜单是必不可少的,antd pro中配置菜单主要在2个地方:

config/routes.tssrc/locales/zh-CN/menu.ts

配置子菜单的路由:

{ path: 'auth', // 一级菜单路由 name: 'auth', // 一级菜单名称 icon: 'team', // 一级菜单 routes: [ { path: '/auth/user', // 二级菜单路由 name: 'user', // 二级菜单名称 component: './auth/user/UserList', // 二级菜单对应的模块 }, ],}

继续在 path: '/auth/user'中配置 routes:[ ... ]就能形成三级菜单

配置菜单的名称:

'menu.auth': '认证权限','menu.auth.user': '用户管理',隐藏的菜单

有时候,我们配置的一些路由并不希望它出现在菜单中,比如一些新增,修改页面,在页面跳转中会出现,但是不需要显示在菜单中,这时,只需如下设置:

{ path: '/data/:data_id/detail', name: 'data.detail', hideInMenu: true, // 隐藏此路由在菜单中的显示 component: './data/detail/DataDetailList', },table组件antd pro 使用心得(antd pro v5)

ProTable 是 antd pro 中的重要组件,实际上我是通过使用 ProTable 才开始逐渐使用 antd pro 的。这个组件可以方便的在表格中展示各种形态的数据,也很好的集成了分页和检索功能,基本上,只要准备好要展示的数据,配置下表格的各个列,数据的展示和基本的互动都自动完成了。

这里简单整理下数据的加载方式:

<ProTable<API.DataDetailItem> columns={columns} // columns 是定义各个列属性的变量,这里不再详细列出了 rowKey="id" rowClassName={getRowClassName} // 这里可以自定义一个函数,突出显示正在操作的行 actionRef={tableRef} headerTitle={`【${dataSource}】的明细数据`} search={{ labelWidth: 'auto', }} toolBarRender={() => [ // 这里其实可以定义一系列操作表格的按钮或其他组件 <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => { setModalAddVisible(true); }} > 新建 </Button>, ]} request={async (params: API.DataDetailItem & API.PageInfo) => { const resp = await getDataDetailList(params); // getDataDetailList 是自定义的请求后台数据的API return { data: resp.data.data_detail, total: resp.data.data_detail_aggregate.aggregate.count, }; }}/>

ProTable<API.DataDetailItem>这里其实是定义了table中要处理的数据类型。DataDetailItem不用和 table的 column完全一致,返回业务需要返回的数据即可,一般会比 column 要求的内容多。

request属性可以是一个异步函数,用来初始化 ProTable 的。它的参数中包含了分页信息API.PageInfo和返回的数据类型 API.DataDetailItem,其中API.PageInfo包含的信息很简单:

type PageInfo = { pageSize?: number; // 每页显示的数量 current?: number; // 当前是哪一页 };

而数据类型API.DataDetailItem则是和 ProTable<API.DataDetailItem> 定义的类型相对应。

路由组件

在 antd pro 中,路由就在 config/routes.ts中集中配置,并且可以和菜单关联,非常简单。这里就整理两点,一个是页面中获取带参数路由的参数,一个是页面间的路由跳转(不是通过菜单来跳转路由)。

带参数的路由

路由配置在 config/routes.ts中:

{ path: '/data/:data_id/meta', name: 'data.meta', hideInMenu: true, component: './data/meta/MetaDataList',}

在对应的页面中,可以这样获取路由中的参数 data_id

import { useParams } from 'umi';type MetaDataParams = { data_id: string;}; // 定义路由参数的类型,这里只有一个参数 data_idexport default () => { const urlParams = useParams<MetaDataParams>();console.log(urlParams.data_id);}路由跳转

通过菜单的跳转不用额外配置,只要在 config/routes.ts中定义即可。除此之外,还有一些页面跳转时不通过菜单的,比如从列表页面到明细页面,

列表页面的跳转:

import { history } from 'umi';// 省略.... ....<Button type="link" size="small" key="detail" onClick={() => { history.push('/data/' + rd.id + '/detail'); }}> 明细</Button>,// 省略.... ....

明细页面返回列表页面:

import { history } from 'umi';// 省略.... ....<Button key="back" icon={<RollbackOutlined />} onClick={() => { history.goBack(); }}> 返回</Button>,// 省略.... ....页面初始化

其实,antd pro 的数据展示组件基本都有 request属性,用来初始化其中的数据,比如上面提到的 ProTable 组件。

但是,有时候在详情或者编辑页面,还是会需要加载一些其他的数据,这时候,就需要在页面加载时初始化一些数据,本质上这是 React 的功能,而不是 antd pro 的功能。

比如,详情页面根据ID加载其他信息:

import { useState, useEffect } from 'react';import { history, useParams } from 'umi';type MetaDataParams = { data_id: string;};export default () => { const urlParams = useParams<MetaDataParams>(); const [dataSource, setDataSource] = useState(''); useEffect(() => { if (dataSource === '') { (async function initDataItem() { const d = await getDataById(urlParams.data_id); // getDataById 是访问后端API的函数 console.log(d); setDataSource(d.data.data_source_by_pk.name || ''); })(); } console.log('effect'); }, [dataSource, urlParams]);}
本文链接地址:https://www.jiuchutong.com/zhishi/313065.html 转载请保留说明!

上一篇:python如何使用skimage包提取图像(python skewness)

下一篇:phpcms安装失败怎么办(php安装不上)

  • 印花税核定征收文件
  • 支付的各项税费现金流量表怎么填
  • 核定征收需要什么条件
  • 预借差旅费附什么原始凭证
  • 叉车上牌流程需要多少时间
  • 税金及附加包括什么
  • 软件公司主营业务类别
  • 中央空调折旧年限是多久
  • 用自产货物用抵债交换是否视同销售
  • 一般纳税人注销库存需要补交税吗
  • 库存盘盈盘亏按进价还是售价
  • 充值费用优惠怎么取消
  • 税号开错了
  • 增值税普通发票有什么用
  • 总分机构如何做账
  • 企业案例描述
  • 财务保证金怎么做分录
  • 海关增值税抵扣当月忘采集
  • 固定资产减值准备属于什么科目
  • 库存虚增怎么调账
  • 年终奖个人所得税怎么扣
  • 研发费用入账
  • 非关联企业无偿拆借资金企业所得税
  • 审计调整以前年度投资收益怎么处理
  • 账户禁用无法登录怎么办
  • window10主题的颜色浅了
  • win 10动态锁是什么
  • 收到生育津贴的短信是真的吗
  • 什么是差额征税劳务费
  • mac big sur 菜单栏
  • 为什么电脑开机显示无信号然后黑屏
  • sbsetup.exe - sbsetup是什么进程 有什么用
  • 最薄的电视机是多厚
  • php读取txt文件内容
  • 公司股东年底分红怎么做账
  • 《ai人工智能》
  • php redis数据类型
  • 购税盘分录
  • nodejs 2020
  • ie11已经为了帮助保护您的计算机而关闭此网页
  • 应交增值税的账务处理有哪两种
  • 增值税收范围
  • 认证系统维护费怎么算
  • wordpress自动更新
  • 清算期间还需要报税吗
  • mysql常用查询语句大全
  • 质保金需要确认收入吗
  • 增值税发票抵扣联的作用
  • 汽修厂的发票开的是什么票
  • 政府补助分类有几种
  • 退还留抵税额政策解读
  • 民间非营利组织会计科目
  • 可转换公司债券名词解释
  • 未实现内部交易损益是什么意思
  • 公司注销资本公积
  • 工资扣税是减去五险一金吗
  • 会计信息不采集可以考初级吗
  • 建账的基本步骤
  • 如何搭建mybatis
  • sql server 操作
  • win8创建密码
  • 注册表修改大全
  • xp系统分区工具
  • 在mac设备上用到什么
  • ubuntu zed
  • xp系统操作全程图解
  • 更换主板也不用换硅脂吗
  • win10 ex4
  • windows where命令
  • Win10系统安装步骤
  • w10文件预览
  • 详细的收藏
  • 深入理解python特性pdf百度云
  • js文件里面有什么
  • 详谈左晖
  • jquery右击事件
  • 用javascript
  • python中操作PDF的库
  • 银饰品交消费税吗
  • 出国海关申报单图片
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设