![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Ant design实战
分享一些antd使用过程中一些典型案例,避免大家走弯路
samllplum
有智者立长志 无志者长立志
展开
-
Antd List组件增加gutter属性后出现横向滚动,如何解决
第一次使用ant design的List列表组件,设置gutter间隔属性后,页面出现了横向滚动条,查阅文档发现是由于加间隔后导致容器宽度被撑开,ant design官方默认给外层容器加了margin-left和margin-right。原创 2023-07-12 19:06:35 · 1558 阅读 · 0 评论 -
React 之antd Tree树形组件反显
近期做项目遇到一个需求:树形组件后端返回的数据包含父节点和子节点,但在子节点不全被选中的时候,不能把父节点给勾选上,否则会出现父节点被勾选,里边未被选中的子节点也全部被选中。经过网上搜索,遇到一个很好的解决方案1、const test = []; // 定义test 存放所有子节点的数组2、循环遍历出最深层子节点(包含所有的子节点及没有子节点的父节点),存放在一个数组中requestList = (data) => { data.map((item) => {原创 2020-11-26 20:02:22 · 3055 阅读 · 2 评论 -
antd-react-input 去除输入内容 记忆功能
ant-design Input 组件取消自动显示输入历史Form默认开启 aotuComplete 功能,当submit 时会记录输入历史,取消自动补充功能,只需在Form 上加autoComplete=“off”即可关闭自动提示输入历史 (这里的Complete的C需要大写)如果是原生 js 的 input 框则增加属性: autocomplete=“off” (这里的complete的C不需要大写)...原创 2021-09-27 15:40:57 · 2040 阅读 · 0 评论 -
React 之antd Checkbox.Group 组,onchange事件及赋值
每个人的需求不一样,因此功能也会不一样,在此记录了项目中的Checkbox.Group组,新增了清空所有组的复选框,通过阅读文档,可以修改对应的value值达到清空的效果onChange变化时需要把更新value的值,来对应匹配勾选中的复选框;清空时也需要将value值置空,空数组及可{Object.keys(filterConfig).map((key) => { return ( <div key={key}>原创 2021-02-03 16:37:26 · 8333 阅读 · 0 评论 -
报错 Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse
今天用JSON.parse解析字符串时发生了报错const initGroupJson = groupJson !== '' && groupJson !== undefined ? JSON.parse(groupJson) : { generate: '', rank: '' };JSON.parse解析json数据及取值的几种方式var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone原创 2020-12-17 18:05:59 · 11335 阅读 · 0 评论 -
antd表格单选
表格的单选也是通过rowSelection来进行配置的,需要selectedRowKeys和onChange: (selectedRowKeys, selectedRows) => {}方法一起使用来安成表格的单选,selectedRowKeys接受一个数组,数组内是选项的key,onChange时去修改它。代码如下:const rowSelection = { selectedRowKeys: type === 1 ? this.context.ConfigManage.gen原创 2020-12-17 17:43:18 · 3287 阅读 · 0 评论 -
React-antd table 多选
近期做一个项目中遇到多个tab下通用一个表格,对表格进行了组件封装,且表格含有选中,全选功能,勾选之后,要将不同tab下的表格行id,放数组里全部传给后端,觉得每个tab下分别存一份勾选的数据很是麻烦,于是就把所有的tab下勾选数据放到一个数组selectAll里,只有在行选中,全选两个功能函数内将selectAll对应更改。antd相关描述api如下:总结代码如下:const rowSelection = { selectedRowKeys: this.context.C原创 2020-12-17 11:49:11 · 3486 阅读 · 0 评论