位置: 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安装不上)

  • 怎么制作表格excel新手(怎么制作表格)(怎么制作表格excel初学者)

    怎么制作表格excel新手(怎么制作表格)(怎么制作表格excel初学者)

  • realme gt neo2是双卡双待吗

    realme gt neo2是双卡双待吗

  • 苹果id名可以修改的吗(苹果id名字能不能改)

    苹果id名可以修改的吗(苹果id名字能不能改)

  • 华为nova7se有陀螺仪吗(nova7se有没有陀螺仪)

    华为nova7se有陀螺仪吗(nova7se有没有陀螺仪)

  • oppok1关机键在哪儿(oppok1开机键失灵怎么开机)

    oppok1关机键在哪儿(oppok1开机键失灵怎么开机)

  • 手机滴滴怎么打车(怎么用手机打滴滴)

    手机滴滴怎么打车(怎么用手机打滴滴)

  • 抖音ip是什么意思(抖音ip什么意思)

    抖音ip是什么意思(抖音ip什么意思)

  • 屏蔽水晶头和非屏蔽差别大吗(屏蔽水晶头和非屏蔽水晶头护套一样吗)

    屏蔽水晶头和非屏蔽差别大吗(屏蔽水晶头和非屏蔽水晶头护套一样吗)

  • wled和led的区别(wled和led的买哪个好些)

    wled和led的区别(wled和led的买哪个好些)

  • 喜马拉雅网络请求失败是怎么回事(喜马拉雅网络请求失败是怎么回事安卓)

    喜马拉雅网络请求失败是怎么回事(喜马拉雅网络请求失败是怎么回事安卓)

  • 手机怎么设置返回键在屏幕内(手机怎么设置返回按键)

    手机怎么设置返回键在屏幕内(手机怎么设置返回按键)

  • 怎么一个手机登录两个QQ号(一个手机登两个微信怎么弄)

    怎么一个手机登录两个QQ号(一个手机登两个微信怎么弄)

  • 小米10用什么膜(小米10用什么膜最好)

    小米10用什么膜(小米10用什么膜最好)

  • uhd610相当于什么显卡(uhd610多少钱)

    uhd610相当于什么显卡(uhd610多少钱)

  • 一加7支持多少快充(一加7支持多少w)

    一加7支持多少快充(一加7支持多少w)

  • 电越充越少是哪里出了问题(电越充越少是什么问题)

    电越充越少是哪里出了问题(电越充越少是什么问题)

  • ipad没电要充多久开机(ipad没电充多久可以开机)

    ipad没电要充多久开机(ipad没电充多久可以开机)

  • 手机关机键坏了怎么重启(手机关机键坏了维修大概多少钱)

    手机关机键坏了怎么重启(手机关机键坏了维修大概多少钱)

  • oppo手机更新在哪里找(oppo手机怎么更新系统)

    oppo手机更新在哪里找(oppo手机怎么更新系统)

  • 喵喵机为啥不用加墨(喵喵机要联网吗)

    喵喵机为啥不用加墨(喵喵机要联网吗)

  • soul怎么看对方注销了(soul怎么看对方是不是会员)

    soul怎么看对方注销了(soul怎么看对方是不是会员)

  • vue怎么把视频变快(vue怎么把视频变全屏)

    vue怎么把视频变快(vue怎么把视频变全屏)

  • vivox9多少英寸(vivox9i多少寸)

    vivox9多少英寸(vivox9i多少寸)

  • win11系统设置在哪?win11打开系统设置教程(win11打开设置)

    win11系统设置在哪?win11打开系统设置教程(win11打开设置)

  • macos monterey怎么降级系统?macos monterey降级系统教程(macos monterey怎么降级)

    macos monterey怎么降级系统?macos monterey降级系统教程(macos monterey怎么降级)

  • clear命令  清除终端界面已有内容(清除命令窗口所有内容用()命令,清除变量用()命令)

    clear命令 清除终端界面已有内容(清除命令窗口所有内容用()命令,清除变量用()命令)

  • 房屋产权出典的由承典人作为房产税纳税义务人
  • 饭店发光板图片大全
  • 技术服务公司可以卖材料吗
  • 发放给员工的通讯费要上个税吗
  • 被收购的收入计什么科目
  • 发票开的是推广服务费计入什么费用?
  • 计提个税会计分录怎么理解
  • 工程材料增值税专用发票税率
  • 公司更名期间账户可以使用吗?
  • 公司变卖后员工怎么办
  • 发生工伤事故借条怎么写
  • 支付保安公司的钱违法吗
  • 税务局每年都会大数据抽查吗
  • 开发票零税率和免税是一样的意思吗
  • 小微企业减免的增值税账务处理
  • 税收折旧率
  • 个体户可以申请公章吗
  • 外贸企业增值税表二填写流程
  • 固定资产投资方案
  • 金蝶采购发票怎么红冲
  • 本月合计怎么做
  • 坏账准备确认后可以转回吗
  • 安全提取费用标准
  • 个人汇算清缴已经做了公司怎么改申报
  • 现金比率计算公式含义
  • 记账金额如何处理账户
  • centos编辑文本
  • vue组件相互引入
  • 为什么建筑企业简易计税可以扣分包款
  • 苹果多屏协同win10
  • 非货币性资产交换的记忆口诀
  • 完美解决索尼电视arc无声音
  • regsvr32 shmedia.dll
  • php文件怎么打开运行
  • 集团公司内部结构是什么
  • 预收账款的账务处理摘要
  • php静态缓存
  • 企业所得税季度申报数据怎么来
  • 转销坏账准备的会计分录有一个还是两个
  • 独立核算统负盈亏和独立核算自负盈亏的区别
  • YOLOv5 + StrongSORT with OSNet
  • css如何实现文字循环滚动左到右,再从右到左衔接循环
  • 实现扩展功能的快捷键
  • 暂时性差异可以计入哪些科目
  • 修改Dede默认投票代码 防止Request Error错误
  • 专项应付款如何核算
  • 怎么查企业历史
  • 小规模纳税人减免增值税会计处理
  • sql中身份证号码用什么类型
  • 开办费计入什么科盿
  • 股东撤资如何退还资金,用途写什么
  • 对方多开票账务会怎么样
  • 多交了社保
  • 补缴的增值税可以抵扣吗
  • 募集资金有哪些渠道
  • 利息收入记借方还是贷方
  • 进项税额转出的几种情况
  • 费用报销单怎么写 样本图片
  • 设计服务成本和信息中心的测试成本
  • 非房产企业出售土地,能否计算抵减地价款
  • 手工账明细账怎么登记
  • sql server复制数据库的方法
  • mac如何快速关闭程序
  • centos 6.5安装教程
  • winxp程序和功能在哪里
  • 安装空调
  • windows预体验版本遇到问题
  • win7旗舰版提示不是正版
  • win10系统打开任务管理器的快捷键
  • perl有什么用
  • unity怎么用
  • 深入浅出python
  • android应用结构包括哪些
  • chrome调试js
  • unity如何连接数据库
  • Android自定义控件开发入门与实战 百度网盘
  • python怎么将列表转换成数字
  • python怎么读取中文txt文本
  • 黄南同仁县海拔多少米
  • 税收优惠政策有什么公司受影响
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设