分类：Antd

2021
08-08

react antd实现动态增减表单

之前写动态表单遇到过坑，就是用index下标做key会导致bug，而且很严重！今天有空写下文章记录下：怎么处理和逻辑我用的是antd3的版本，3和4的表单有点不一样，不过差别应该不大。需求：1、选择类型切换展示固定的模板2、通过新增字段可以动态增减表单里面的每一行3、控制每一行的字段是否需要必填4、编辑时候回填参数效果图：部分关键代码：importReact,{Component}from'react';importstylesfrom'./index.less';import{... 继续阅读 >

2021
07-31

关于antd tree和父子组件之间的传值问题(react 总结)

项目需求：点击产品树节点时获取该节点的所有父节点，同时回填表格的搜索条件，完成搜索功能，搜索结果展示在下方的table中。写了三个组件：现在有个业务场景交互：在orderTree组件中点击树节点，获取当前节点以及所有的父节点的Id放入一个对象arrKeys中，并在orderForm组件中使用（回填类型下拉选择框，objId对象作为查询接口的入参）现在可以分部解决问题：1.首先获取点击的树节点以及所有父节点的id---arrKeys2.在点击树节点... 继续阅读 >

2021
06-19

基于 antd pro 的短信验证码登录功能(流程分析)

概要最近使用antdpro开发项目时遇到个新的需求,就是在登录界面通过短信验证码来登录,不使用之前的用户名密码之类登录方式.这种方式虽然增加了额外的短信费用,但是对于安全性确实提高了不少.antd中并没有自带能够倒计时的按钮,但是antdpro的ProFormcomponents中倒是提供了针对短信验证码相关的组件.组件说明可参见:https://procomponents.ant.design/components/form整体流程通过短信验证码登录的流程很简单:请... 继续阅读 >

2021
05-19

详解antd+react项目迁移vite的解决方案

antd+react+webpack往往是以react技术栈为主的前端项目的标准组合，三者都有成熟的生态和稳定的表现，但随着前端圈的技术不断革新，号称下一代构建平台vite2的发布，webpack似乎不那么香了，为什么这么说呢，因为vite太快了。经过一段时间的尝试，决定在项目中把webpack替换成vite试试，遂写成本文分享给大家。Vite是什么作为本文的主角，首先简单介绍一下vite这个构建工具，该工具是尤雨溪推出的【下一代前端开发和构建工具】，vi... 继续阅读 >

2021
04-07

React+Antd 实现可增删改表格的示例

最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antdtable表格，点击编辑，打开弹窗，弹窗内是tab切换显示不同的form表单+可编辑表格，表格内操作栏"+"，表格内新增一行可编辑的数据，编辑，保存，删除这些操作就不细说也不贴效果图了Table/index.jsimportReact,{useState}from'react'import{Row,Col,Card... 继续阅读 >

2021
04-07

详解对于React结合Antd的Form组件实现登录功能

一、React结合Antd实现登录功能引入所需的Antd组件，代码如下所示：import{Form,Icon,Input,Button,message}from'antd'在Login.jsx中，创建一个Login组件。当对外暴露组件时，需要使用Form组件进行包装，包装Form组件生成一个新的组件Form(Login)，同时新组件会向Form组件传递一个强大的对象属性form，这样就可以取到Form表单的值，这也是高阶组件和高阶函数的体现，代码如下所示：classLoginextend... 继续阅读 >

2021
04-07

React antd tabs切换造成子组件重复刷新

描述：Tabs组件在来回切换的过程中，造成TabPane中包含的相同子组件重复渲染，例如：<TabsactiveKey={tabActiveKey}onChange={(key:string)=>this.changeTab(key)}type="card"><TabPanetab={"对外授权"}key="/authed-by-me"><AuthedCollectionscollectionType={this.collectionType}/></TabPane><TabPanetab={"申请权限"}key="/authed-to-me"><AuthedCollectionscollectionType={this.... 继续阅读 >

2020
11-19

解决Antd Table表头加Icon和气泡提示的坑

对于AntdTable组件的columns数组来说，它需要接受2个属性（filterDropdown，filterIcon）才能在表头某个属性旁展示图标Icon：columns:[{title:'表达式',dataIndex:'formulaTenderAmount',key:'formulaTenderAmount',width:150,placeholder:'请输入表达式',filterDropdown:(<div></div>),filterIcon:<Tooltipplacement="top"title="气泡悬浮提示文本"><Icontype='question-circle-o'sty... 继续阅读 >

2020
11-17

antd table按表格里的日期去排序操作

表格内容根据票据日期升序（这里是已经排序后的效果）上代码代码中data的内容如下根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳newDate(aTimeString).getTime()之后再用装换后的时间戳去比较，比较用到的函数是.sort，一下是用来比较的代码data.sort(function(a,b){letaTimeString=a.paper_date;letbTimeString=b.paper_date;letaTime=newDate(aTimeString).getTime();... 继续阅读 >

2020
11-03

antd中table展开行默认展示,且不需要前边的加号操作

如下所示：前边不显示+，并且详细信息默认展开在table中配置<TableexpandedRowKeys={this.store.chargeTableData.map(item=>item.key)}//展开的行expandIconAsCell={false}expandIconColumnIndex={-1}bordered//展示边框defaultExpandAllRows={true}//初始时展开所有行pagination={{pageSize:5}}//分页器expandedRowRender={this.expandedRowRender}//额外展开的行columns={columns}//数据dataSourc... 继续阅读 >

2020
11-03

解决antd 表单设置默认值initialValue后验证失效的问题

方法一：getFieldDecorator没有第三个参数，如果写了3个参数就会出错错误代码：<Form.Item>{getFieldDecorator('userName',{initialValue:'Tom'},{rules:[{required:true,message:'请输入用户名',}],})(<Inputplaceholder='请输入用户名'/>)}</Form.Item>正确代码：<Form.Item>{getFieldDecorator('userName',{initialValue:'Tom',rules:[{required:true,message:'请输入用... 继续阅读 >

2020
11-03

在antd Form表单中select设置初始值操作

我就废话不多说了，大家还是直接看代码吧~<Form.Itemlabel="作用对象">{getFieldDecorator('targetId',{initialValue:this.state.targetId},{rules:[{required:false,message:'作用对象'}]})(<Selectplaceholder="请选择作用对象">{targetList.map(entity=><Optionkey={entity.id}value={entity.id}>{entity.name}</Option>)}</Select>)}... 继续阅读 >

2020
11-03

react+antd 递归实现树状目录操作

1.写在前面作为前端小白的我一直对算法和数据结构浅尝辄止，哝，吃亏了。使用多次递归实现数据格式化后将数据进行树状展示的目的，分享一下我这次挠头的经历~2.数据后台传过来的数据大概是这样的{"data":[{"id":1,"name":"一级节点","parentId":0,"isValid":true,"canAddChild":true,"parent":null,"children":[]},{"id":3,"name":"二级节点","parentId":1,"isValid":true,"canAddChild":true,"parent":null,"chi... 继续阅读 >

2020
11-03

antd form表单数据回显操作

index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据//index页面importReactfrom'react'import{Table,Button,message,Input,Select,Modal,}from'antd';constOption=Select.Option;importAddOrEditfrom'./AddOrEdit'classListextendsReact.Component{constructor(props){super(props);}state={id:"",selectOpt:{getPopupContain... 继续阅读 >

2020
11-03

antd Select下拉菜单动态添加option里的内容操作

antdSelect下拉菜单动态添加option里的内容，通过form表单绑定select选中的值提供一个公共的方法，每次只需去调用这个方法就行了//这里是示例数据格式letgiftScope=[{code:200,id:1,name:"张三"},{code:300,id:2,name:"李四"},{code:400,id:3,name:"王五"},{code:500,id:4,name:"赵六"},]//提供了一个在select里面添加公用Option内容的方法//第一个参数为原数据（array）//第二个为value----值为当前输... 继续阅读 >

2020
11-01

antd的select下拉框因为数据量太大造成卡顿的解决方式

相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。当然这不是我想去优化它的动力，主要是公司业务人员和后端的同事也无法忍受，于是我只能屈从于他们的淫威。。。。想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿，于是想要不卡... 继续阅读 >