antd
文章平均质量分 50
蓝枫秋千
前人栽树,后人乘凉。既然我乘了前人的树,那么就栽更多的树给后人~共勉!
展开
-
antd表单1行使用多个组件(控件)
引言在antd的表单组件中,自己封装好了一系列的函数和高阶函数,自带的样式和方法等都能满足自己的需求。但是各种案例中都只能够是一个控件,并且文档中也说明了:注意:一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,help required validateStatus 无法自动生成。业务场景那么假如想要有这么一个效果。方案我初步设想的是这样的布局:使用div的flex布局然后发现需要改挺多样式的,并且报原创 2021-08-19 21:40:33 · 3727 阅读 · 1 评论 -
处理antd中Table组件过滤或者筛选事件触发翻页回调
背景在使用antd的Table组件的时候,本来只有正常的翻页需求,然后加了一个表头的筛选功能。如图本来我以为是挺简单的事情。但是发现写完之后,请求了两次接口,一次带筛选一次不带筛选找原因我本以为筛选触发的onChange事件和pagination触发的翻页事件是相互独立的,经过测试发现并不是。并且翻页事件先于筛选事件触发(事件有先后,但是请求不一定),就有了两次请求。并且,两次请求是没有绝对先后顺序的,并且请求完成回来拿到数组进行渲染也是没有绝对的先后顺序的,这个点让我苦恼了好一阵子。通过原创 2021-03-01 11:13:16 · 2295 阅读 · 3 评论 -
修改antd组件样式的几种方式
修改antd组件样式的几种方式直接在组件上添加类名,然后在css文件中添加样式;直接在组件上写style;但是很多情况下这种方式并不能生效,就要使用到下面的方式了前提:先学会如何正确的找到组件的样式选择器chrome元素查看器找到你要修改的组件(这一步很关键,因为很多时候找不到正确的元素)。比如我这里想要将上传按钮的宽度变为300px,选中button元素,然后在右边的样式表中先测试一下能不能生效,这里是生效了,那么说明改这个类选择器的样式是可以的。注意:有时候如果不生效的话试试!imp原创 2020-08-31 17:50:00 · 41347 阅读 · 10 评论 -
antd表单的使用(校验,初始化,提交)
antd V3版本和V4版本用法有点不一样V3版本使用见这里(我之前的一篇博客)这次主要讲V4版本import { Form, Input, Button, Select } from 'antd';import React from 'react';const Demo = () => { const [form] = Form.useForm(); // 表单点击提交...原创 2020-04-14 20:52:45 · 7251 阅读 · 0 评论 -
修改antd中选择器修改不了的样式
据官网的API进行修改直接添加样式进行修改重点: 如果不能直接修改样式的组件,该怎么修改它的默认样式呢?解决方案: 通过修改antd全局样式F12打开控制台的审查元素,找到需要修改的元素如图中箭头的选择器是antd的,我们的项目中如果直接是修改不了的通过global关键字来全局修改即可生效:global(.ant-tabs .ant-tabs-left-bar .ant...原创 2020-02-24 14:03:16 · 2464 阅读 · 0 评论 -
antd中Form组件表单校验使用的Form.create()
两种用法注意: 这两种方式都要return一个jsx,要不然会报错类组件class CustomizedForm extends React.Component {...代码}CustomizedForm = Form.create({})(CustomizedForm);export default CustomizedForm函数组件const aaa =(form...原创 2020-02-13 10:48:32 · 5945 阅读 · 0 评论 -
antd表格筛选功能(排序功能同理)
表格的columns配置添加this.state中添加在render方法中解构出filteredInfo, 并赋初始值编写要用到的3个方法原创 2020-01-15 21:57:24 · 2706 阅读 · 0 评论 -
antd中表单校验正则使用方式
类组件的结构(最外层需要先包裹一层语法糖)const PersonManagement = Form.create()( class extends React.Component{} ) epxort default PersonManagement从form中解构出需要的一些方法const { getFieldDecorator } = this.props.form...原创 2020-01-15 11:31:41 · 6238 阅读 · 0 评论