antd Procomponent 使用总结记录

已于 2023-09-13 13:59:57 修改
阅读量860 收藏 1
点赞数 1
文章标签： react
于 2023-09-13 13:57:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45674255/article/details/132851627
版权
本文总结了在工作中使用 antd Procomponent 的经验，包括ProTable的动态列显隐、ProForm的便捷映射、ModalForm与DrawerForm的页脚定制以及ProFormTimePicker和ProFormText.Password的特定用法。对于ProTable，其提供了参数以简化搜索区域和列的配置。而对于ProForm系列，可以方便地调整页脚按钮位置，ProFormTimePicker能限制时间不早于当前，而ProFormText.Password解决了浏览器自动填充问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

antd Procomponent 是基于 Ant Design 封装的高阶组件，开箱即用。本文只是对在工作中使用 antdPro 的小小记录，若需使用 antd Procomponent，请移步官网

ProTable

Antd Table 的高阶组件，添加可配置化搜索区域，自带 request 请求实现表格的搜索，在使用的过程中发现了在 antd 的 Table 升级的地方：

1. 在新增和查看表单的时候，两个表单页面是共用的，但通常在查看表单页面表格的列会与新增的不同，这就涉及到了表格列的动态显隐，ProTable 提供了一个很好的参数：hideInTable，用起来太爽了吧，少了很少 if 条件去动态判断 columns。


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    

      

        

            

              
                
                  胖小秋
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
Antd Design Pro Components ProTable批量操作获取当前选中的key

				
			

			

				

					ayun1996的博客
				

				

					12-22
					
					4823
					
				

			

		

		

			
				
Antd Design Pro Components ProTable批量操作获取当前选中的key

			
		

	



                

            
              



	

		

			

				
					
Antd Procomponent 之 proForm - 高级表单

				
			

			

				

					奇舞周刊
				

				

					11-06
					
					1523
					
				

			

		

		

			
				
本文作者系360奇舞团前端开发工程师ProForm 在原来的 Form 基础上增加一些语法糖和更多的布局设置，帮助我们快速的开发一个表单。同时添加一些默认行为，让我们的表单默认好用。分步表单，Modal 表单，Drawer 表单，查询表单，轻量筛选等多种 layout 可以覆盖大部分的使用场景，脱离复杂而且繁琐的表单布局工作，更少的代码完成更多的功能。ProForm 高级表单使用 initialV...

			
		

	



              


  
              

                


	

		

			

				
					
升级的antd proComponent系列

				
			

			

				

					hzxOnlineOk的博客
				

				

					04-12
					
					1540
					
				

			

		

		

			
				
https://procomponents.ant.design/components/table


			
		

	





	

		

			

				
					
ant design Pro组件的使用---ProTable的核心和进阶使用

					
最新发布

				
			

			

				

					2303_81135627的博客
				

				

					04-01
					
					1974
					
				

			

		

		

			
				
ProTable 是 Ant Design Pro 提供的一个高级表格组件，它基于 Ant Design 的 Table 组件进行了扩展和封装。ProTable 提供了更多便捷功能，如数据请求、列配置、批量操作、搜索表单等，使得在 React 应用中创建和管理复杂表格变得更加简单和高效。它特别适合用于企业级后台管理系统的数据展示和操作。

			
		

	



		

			
		



	

		

			

				
					
Ant-Design-Pro-Components：ProTable组件后台请求数据，表格实现跨页多选,修改行信息，批量提交修改。

				
			

			

				

					~~~
				

				

					05-25
					
					1398
					
				

			

		

		

			
				
Ant-Design-Pro-Components：ProTable组件后台请求数据，表格实现跨页多选,修改行信息，批量提交修改。

			
		

	





	

		

			

				
					
Antd Pro的组件ProForm

				
			

			

				

					weixin_67150966的博客
				

				

					05-24
					
					786
					
				

			

		

		

			
				
表单的布局：横排，竖排等。

			
		

	





	

		

			

				
					
Antd Pro使用过程的总结记录

				
			

			

				

					ws995339251的博客
				

				

					03-03
					
					4646
					
				

			

		

		

			
				
前端文件
基于Ant Design Pro
这里是Antd Pro使用过程中的总结

关于和服务端连接的问题。
Antd Pro与后端相连的方法都集中在model文件夹内，采用redux和Promise异步操作来获取服务器数据。关于这方面的知识，参考 页面加载原理及过程，@connect 装饰器
总结来说，

在class外，@connect装饰器中，添加与model中某一文件中namespace...

			
		

	





	

		

			

				
					
create-nuxt-antd:使用ant-design的nuxt项目

				
			

			

				

					05-15
				

			

		

		

			
				
使用ant-design的nuxt项目 构建设置  # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn run dev # build for production and launch server $ yarn run build $ yarn start...

			
		

	





	

		

			

				
					
21 React UI框架Antd(Ant Design)的使用 以及react Antd的使用 组件

				
			

			

				

					03-01
				

			

		

		

			
				
在本教程中，我们将深入探讨如何使用Antd来提升React应用的用户体验，主要关注四个关键组件：Button、Icon、Layout和DatePicker。  1. Button组件： Antd的Button组件提供了丰富的样式和功能，可以轻松创建各种按钮...

			
		

	





	

		

			

				
					
dva中使用antd Form经验总结

				
			

			

				

					teemology的博客
				

				

					06-03
					
					4028
					
				

			

		

		

			
				
dva中使用antd Form经验总结创建表单验证自定义表单验证表单提交常用表单组件InputTextArea：富文本框ButtonSelectTreeSelectCascaderDatePicker和RangePickerRadio
创建
引入form后先初始化form
import { Form } from 'antd';
@Form.create()
export default clas...

			
		

	





	

		

			

				
					
ProComponent 用法学习

				
			

			

				

					qq_52522995的博客
				

				

					08-09
					
					3580
					
				

			

		

		

			
				
在 ProComponent 中，最为核心的就是 ProForm（表单）和 ProTable（表格）两个组件，面对数量繁多的配置项，很多人都会在文档中迷失自我，本文就来总结了一些常见的配置。

			
		

	





	

		

			

				
					
antdPro

				
			

			

				

					02-25
				

			

		

		

			
				
该项目是通过。
可用脚本
在项目目录中，可以运行：
yarn start
 在开发模式下运行应用程序。 打开在浏览器中查看。
 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。
yarn test
 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。
yarn build
 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！
 有关更多信息，请参见有关的部分。
yarn eject
 注意：这是单向操作。 eject ，您将无法返回！
 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。
 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中，因此您

			
		

	





	

		

			

				
					
antdFront：使用下一代数据管理器和钩子，纯功能组件，webpack来构建antd design pro microfrontend项目，而无需umi，cra，dva或rematch

				
			

			

				

					02-06
				

			

		

		

			
				
English |
AntdFront
 Antdfront是一套基于ant设计，拥抱react钩子，纯功能，实现按钮级访问，使用下一代数据流和微型前端框架Qiankun的多标签react微前端模板集
 本机：内置有react hook，webpack，babel，antd和其他本机组件，支持PWA
 最小的数据流：为React集成下一代状态管理器
微型前端：使用千坤实现微型前端
安装
1: gitclone https://github.com/X-neuron/antdFront.git
2: npm i or yarn
3: npm run dev
技术选择和动力
国际化
 数据流：
 

			
		

	





	

		

			

				
					
antd-components-plus:对Antd组件进行二次封装和扩展，对业务系统更加友好

				
			

			

				

					05-16
				

			

		

		

			
				
antd-components-plus
对Antd组件进行二次封装和扩展，对业务系统更加友好
Install
npm install antd-components-plus 
 // or
yarn add antd-components-plus
Antd Version
3.x
Usage
Select
import {
    Select
} from 'antd-components-plus'
export default ()=>{
    return <div>
        <Select  dataSource={{0:'开始',1:'进行中',1:'暂停'}}/>
        <Select  dataSource={[{key:'0',label:'有效'},{key:'1',label:'无效'}]}/>
        <Select  
     

			
		

	





	

		

			

				
					
shubao：antdpro

				
			

			

				

					02-22
				

			

		

		

			
				
蚂蚁设计专业版
该项目已使用初始化。 遵循是如何使用的快速指南。
环境准备
安装node_modules ： 
npm install
 或者
yarn
提供的脚本
Ant Design Pro提供了一些有用的脚本，可帮助您快速启动和构建Web项目，代码样式检查和测试。
 package.json提供的脚本。 修改或添加其他脚本是安全的：
开始项目
npm start
建立项目
npm run build
检查代码样式
npm run lint
 您还可以使用脚本自动修复某些皮棉错误： 
npm run lint:fix
测试码
npm test
更多的
您可以在我们的上查看完整文档。 并欢迎我们在任何反馈。

			
		

	





	

		

			

				
					
Ant-Design-Pro-Components： EditableProTable、ProTable组件数据联动。

				
			

			

				

					~~~
				

				

					06-19
					
					3450
					
				

			

		

		

			
				
Ant-Design-Pro-Components： EditableProTable、ProTable组件数据联动。

			
		

	





	

		

			

				
					
需要独立使集成Antd Pro 组件

				
			

			

				

					aolv3500的博客
				

				

					03-30
					
					382
					
				

			

		

		

			
				
官方默认业务组件会发布到 npm 的 ant-design-pro 上
所以只需要：

npm install ant-design-pro@latest --save


import 'ant-design-pro/dist/ant-design-pro.css'; // 统一引入样式

然后你就可以像使用 Ant Design 组件一样调用 pro 组件了。

...

			
		

	





	

		

			

				
					
antd Component 某个样式重写

				
			

			

				

					爱孔孟
				

				

					08-16
					
					4353
					
				

			

		

		

			
				
例子,实测可用


:global {
    .ant-form-item{
      font-size: 14px; 
      background-color: 'red';
    }
  }

 

参考文:https://www.jianshu.com/p/a2e7728d8717

			
		

	





	

		

			

				
					
Vite 构建React 项目中使用antd-pro components

				
			

			

				

					weixin_45456092的博客
				

				

					04-21
					
					1016
					
				

			

		

		

			
				
antd 以及 antdPro 版本。版本如果不对会有诡异的报错。

			
		

	





	

		

			

				
					
algorithm antd react 使用

				
			

			

				

					03-28
				

			

		

		

			
				
### 如何在React项目中使用Ant Design (antd)

#### 安装和配置

为了在React项目中集成并使用Ant Design，首先需要安装`antd`库。可以通过npm或yarn来完成这一操作。

```bash
npm install antd --save
```

或者，

```bash
yarn add antd
```

一旦安装成功，在项目的入口文件（通常是`index.js`或`App.js`）引入Ant Design的核心样式[^1]：

```javascript
import 'antd/dist/reset.css'; // Ant Design v5 及以上版本推荐此方式
// 或者对于旧版可以使用如下方法：
// import 'antd/dist/antd.css';
```

#### 使用组件

Ant Design提供了丰富的UI组件集合，可以直接通过解构的方式导入所需的单个组件到应用中。例如要使用按钮组件(Button)，可以在相应的JSX文件里这样写：

```javascript
import { Button } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary">Primary Button</Button>
    </div>
  );
}

export default App;
```

上述代码展示了如何加载一个带有主要样式的按钮[^2]。

#### 动态加载与按需引入

如果希望减少打包后的体积大小，则建议采用动态加载策略或是利用工具如[babel-plugin-import]来进行按需加载。这不仅能够优化性能还能提升用户体验。

设置babel插件支持按需加载：

修改`.babelrc`或`babel.config.json`文件添加以下内容:

```json
{
  "plugins": [
    ["import", {"libraryName": "antd", "style": true}]
  ]
}
```

此时无需手动导入CSS资源，因为该插件会自动处理它所对应的样式表[^3]。

#### 实现复杂功能的例子——表格筛选与分页

下面给出一段关于如何创建具有过滤、排序以及分页能力的数据展示表格实例：

```javascript
import React, { useState } from 'react';
import { Table, Input, Button, Space } from 'antd';

const EditableTable = () => {
  const [dataSource, setDataSource] = useState([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park'
    },
    ...
  ]);

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name),
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
        <Input placeholder='Search Name' value={selectedKeys?.[0]} onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} onPressEnter={() => handleFilter(confirm)} />
      ),
      onFilter: (value, record) => record.name.includes(value),
    }, 
    /* 更多列定义 */
  ];

  function handleFilter(confirm){
     setTimeout(() => {
       confirm();
     }, 0);
  }

  return (
    <Table dataSource={dataSource} columns={columns} pagination={{ pageSize: 5 }}/>
  )
};

export default EditableTable;
```

这段代码片段演示了一个具备基本CRUD操作的可编辑表格结构，并实现了简单的前端数据管理逻辑[^4]。

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值