![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
antd
MYG_G
这个作者很懒,什么都没留下…
展开
-
antd Form.Item 中如何获取到Select的label值
antd Form.Item 中如何获取到Select的label值原创 2024-01-26 14:34:07 · 730 阅读 · 0 评论 -
react antd message多条数据展示样式
antd message动态多行提示效果原创 2023-11-07 15:58:10 · 1758 阅读 · 0 评论 -
antd修改Tooltip背景色
Tooltip默认背景色是黑色,字体是白色。实现修改为黑字白底。原创 2021-12-01 16:27:03 · 4180 阅读 · 0 评论 -
antd4 tree带搜索框的可编辑树实现(hooks+ts)
import React, { useEffect, useState } from 'react';import { dispatch, getState } from '@@/store';import { CATEGORY } from '@/services';import { Input, Tree, Modal, Form, Menu, Dropdown, message, TreeSelect } from 'antd';import { TCategoryList, TCategor原创 2021-08-11 17:24:47 · 1889 阅读 · 3 评论 -
antd4 TreeSelect限制除了自己以外其他节点可以选
在编辑的时候,TreeSelect限制除了自己以外其他节点可以选,当前节点无法选择const renderAddTree = (data: any) => data?.length > 0 && data.map((item: any) => { if (item?.children?.length > 0) { // 编辑限制除了自己以外其他分类可以选,自己不能选 return ( <T原创 2021-08-11 09:49:48 · 521 阅读 · 0 评论 -
antd4 TreeSelect树选择关闭虚拟滚动
TreeSelect的虚拟滚动属性是默认打开的,可视区加载10条数据。如果你想关掉的话,可以设置dropdownMatchSelectWidth为false,就会加载所有的数据,不是动态加载。代码如下:import React, { useState } from 'react';import { TreeSelect } from 'antd';const { TreeNode } = TreeSelect;const Demo = () => { const [value, s原创 2021-07-26 15:30:35 · 1520 阅读 · 0 评论 -
antd4 Form.List动态增减表单项,默认展示一项
下面是antd4官方例子:https://ant.design/components/form-cn/#components-form-demo-dynamic-form-items-complex默认是没有第一项的,我们点击添加,出现第一项。如果我想默认展示第一项,如下:设置Form.List的默认值为空,就可以默认显示第一项。核心代码: initialValue={[{}]}<Form name="From1" form={form} onFin原创 2021-07-26 15:14:26 · 5295 阅读 · 8 评论 -
antd table分页每页中文设置
antd Table的分页,默认是英文的,如下图:设置中文需要引入antd的里面的中文语言包import React, { useEffect, } from 'react';import { Table, ConfigProvider } from 'antd';import zhCN from 'antd/es/locale/zh_CN';type IListProps = { data: [];};const List: React.FC<IListProps>原创 2021-07-23 11:23:47 · 4638 阅读 · 2 评论 -
antd4 Tabs所有Tabs.TabPane同时加载DOM
阿巴阿巴,最近有个需求,新增的时候有两个Tabs.TabPane,可以互相切换,每个TabPane里是需要提交的表单数据,他们有默认值,可以直接提交,我希望在第一个页面提交的时候可以获取第二个页面的表单值。就发现了TabPane默认只加载当前TabPane的DOM,第二个TabPane是在点击切换的时候,才会渲染。我去官网发现了,TabPane的forceRender属性,被隐藏时是否渲染 DOM 结构,是一个布尔值。于是,我就做了尝试,哈哈哈完美解决,上代码:forceRender={true}原创 2021-07-23 10:41:03 · 4056 阅读 · 0 评论 -
moment获取近期时间
moment官网地址:http://momentjs.cn/docs/#/parsing/now/在这里插入代码片原创 2021-06-28 17:08:34 · 1926 阅读 · 1 评论 -
antd4.0中Form使用initialValue
参考文献:https://blog.csdn.net/weixin_42661440/article/details/107581753https://blog.csdn.net/jx950915/article/details/107164894/在antd3中,initialValue是个好东西,设置默认值很方便。在antd4中,设置initialValue,这样我每次编辑回显的时候把数据传过来就行,后来发现不得行!然后我用resetFields()这个方法,每次缺点或者取消之后重置一下数据,然原创 2021-06-18 10:55:48 · 990 阅读 · 2 评论 -
js textarea换行分隔成数组和数组转换行符textarea回显
在web的前端操作中,有时候需要将 html 的 textarea 标签元素中的内容以每行的形式转成一个数组并发向后台,在编辑的时候,数组数据需要taxtarea换行显示。那么该如何做呢?下面这篇博文就来说一说,通过利用 js 将 textarea 标签元素中的内容以换行或回车进行分割并转成数组的方法。js实现textarea换行分隔成数组参考文献:https://blog.csdn.net/lxj7607/article/details/105734039/主要是通过value.split(/[原创 2021-06-17 16:23:54 · 3708 阅读 · 3 评论 -
antd中Table双/单击行事件
antd Table行操作需求:博主有个双击Table中的某一行,根据当前行数据,进入新页面的操作。onRow 用法适用于 onRow onHeaderRow onCell onHeaderCell。antd官网链接:https://3x.ant.design/components/table-cn/#onRow-%E7%94%A8%E6%B3%95<Table onRow={record => { return { onClick: event => {原创 2021-04-14 14:12:17 · 7431 阅读 · 0 评论 -
antd RangePicker展示+传给后端自定义格式
antd RangePicker展示+传给后端自定义格式默认格式:年-月-日 时-分-秒(YYYY-MM-DD HH:mm:ss’)自定义格式为:年-月-日 时-分(YYYY-MM-DD HH:mm’)1.页面选中时间,展示自定义格式 <RangePicker style={{ width: '100%' }} showTime={{ format: 'YYYY-MM-DD HH:mm', defaultValue:原创 2021-02-25 14:39:52 · 3761 阅读 · 0 评论 -
antd upload支持文件格式:.rar、.zip、.doc、.docx、.pdf,不能大于200M
antd upload相信大家在上传文件、头像、图片的时候,第一时间想到的都是antd upload。下面是我从antd拿过来的upload的属性。限制上传文件格式.rar、.zip、.doc、.docx、.pdf我们一般用来对于限制上传文件格式的属性是accept,但是在开发的过程中,博主发现了,accept对于.doc、.docx、.pdf、.png、.jpg、.rar,格式的限制是完全没有问题的。但是对于.zip的限制就有问题了,当我属性设置为 accept=".rar,.zip,.doc,原创 2020-11-30 17:30:37 · 10257 阅读 · 2 评论 -
antd table rowSelection多选框(可选择列表)
可选择列表如上图,是antd的可选择列表,我们如何将普通列表变成可选择列表呢,这就用到了一个很重要的属性rowSelection。rowSelection如下图,rowSelection属性是一个对象,他有很多的参数。下面是antd官网截图,关于rowSelection的功能配置。指定可选择列的属性作为key注意:其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项,如果你想指定key,就要在table增加rowKey={record => record.id}原创 2020-11-11 16:43:25 · 19925 阅读 · 10 评论 -
antd form validateFields的校验指定元素
参考文献:https://3x.ant.design/components/form-cn/#components-form-demo-validate-otherantd form validateFields的校验指定元素其实antd form validateFields有三种用法,用于不同的场景。下图是antd关于validateFields的介绍。1.校验form所有字段这是最常用的写法,一般在提交表单的数据时候,大多数情况用这种写法,对于所有元素的正确性进行校验,只有全部通过校验才能原创 2020-10-29 17:16:01 · 50845 阅读 · 0 评论 -
validateFirst--antd form按rules顺序校验
validateFirst(按rules顺序校验)validateFirst:true 表示,antd form按rules顺序进行校验。在输入框输入值的时候按顺序从上到下执行rules里面的规则校验。如下面的代码:getIllegalCharacter = (rule, username, callback) => { if (username.includes('!') || username.includes('@') || username.includes('#') || u原创 2020-10-13 11:21:49 · 2636 阅读 · 0 评论 -
antd的Modal的确认和取消自定义按钮
antd的Modal的确认和取消自定义按钮在modal的属性中,有一个footer的属性,表示的是弹窗底部取消,确定按钮。我们可以对footer进行设置,从而来自定义底部按钮。1. 隐藏底部确认和取消按钮使用Modal中的footer属性,如下:<Modaltitle="哈哈"visible={visible}onCancel={this.handleCancel}footer={[] // 设置footer为空,去掉 取消 确定默认按钮}></Modal>原创 2020-08-14 09:32:18 · 12368 阅读 · 0 评论 -
react+antd的upload限制只上传一个文件
原文链接:https://blog.csdn.net/weixin_43684142/article/details/107317031react+antd的upload限制只上传一个文件目前在做一个react+antd的项目,在使用antd(3.26.16版本)中的Upload上传,网上很多教程但是不太好改写为自己所用,发现antd的官方文档自带解决办法,一行搞定!!!!!!需求:只能上传一个文件,上传第二个文件时候会有提示,并保留第一个文件问题:上传第二个文件提示后,第一个文件也一起被消失了解转载 2020-07-27 14:09:04 · 4590 阅读 · 2 评论 -
antd Tree选中的时候需要获取父元素id
博主在做权限树的时候,遇到过这样一个问题。只要子元素有一个元素被选中,后端需要我把选中节点的父元素也传过去。但是antd Tree默认的checkedKeys中只有子元素全部选中的时候才会把父元素选中,checkedKeys才会包含父元素的值。解决方法:在onCheck事件里,有两个参数checkedKeys(你选中的元素), info(包含选中子节点的信息),在info里就有他父节点的信息,可以通过info.halfCheckedKeys来获取。然后把父节点元素和子节点放在一个数组,传给后端就好了。上原创 2020-06-12 16:43:04 · 5304 阅读 · 7 评论 -
antd table动态控制指定列的显隐
应用场景博主刚刚在敲代码的时候,遇到了这样一个需求:列表中有A,B,C三列,如果B没有数据的时候,将B隐藏。什么鬼????,博主使用的是antd3.0版本,用的最基础的Table插件。解决方案在column中动态添加B列,拿到数据以后,判断列表中B是否有数据,没数据不作处理,有数据动态添加B列属性到column中。上代码!!!// 先将含有A,C的column写好column = [ { title: '商品名1', dataInd原创 2020-06-11 16:04:30 · 13722 阅读 · 8 评论 -
React中antd日期选择框,指定区间禁用时间
antd datepicker禁止选中时间范围今天为时间点,但范围禁止选中区间范围可选,前后时间禁止选中今天为时间点,但范围禁止选中handleDate= current => {if (!current) {return false} else {return current > moment()//今天以后可选return current< moment()/...原创 2020-04-23 10:47:35 · 2235 阅读 · 0 评论