ant design pro
Richard Yates Boy
盡可嬉戲玩鬧棒球帽
展开
-
封装一个可回车事件,不能输入配置项options没有的值的AutoComplete
但是我们可以追踪到AutoComplete组件的源码,虽然并不能看很懂,但是可以看出组件是InternalSelectProps,RefSelectProps的共同构成,这里就不探究dataSource结构了。当CustomAutoComplete外面包裹着form表单时候,虽然CustomAutoComplete的值清空了,但是form表单给CustomAutoComplete的那个绑定name并没有清空,如何能让form表单绑定name也对应清空,目前我还没想出办法,也许可能要改造form表单,心累。原创 2024-03-25 16:16:01 · 325 阅读 · 0 评论 -
antd实现tree动态增删改和拖拽效果
react antd tree组件原创 2022-11-21 17:35:40 · 1244 阅读 · 2 评论 -
antd Upload上传实现自定义上传
众所周知,Upload上传有个action的坑,就是你选择文件之后自动调用地址然后就会执行上传接口,这在某些情况的却是很好用的一个组件。但是如果要实现自定义的上传,如下图所示,就要阻止默认上传的事件。现在我们要实现点击保存按钮才进行上传,所以我们就需要在beforeUpload这个钩子函数里面阻止默认上传。 beforeUpload: file => { const fileType = file.name.split('.').pop(); if原创 2021-12-29 14:55:12 · 6498 阅读 · 0 评论 -
对象属性过滤,基于antd 表格 Form 食用
当我们在使用antd 的 form 组件时候 是不是想一口气得到所有表单的值 然后传给接口就完事了, 但是某些表单并非必填项 ,这就需要我们过滤掉一些值为"",undefined,null的数据了。const objectPropertyTransfer = obj => { if (!obj || !typeof obj === 'object') return; const keys = Object.keys(obj); for (var key of keys)原创 2021-09-15 15:07:33 · 262 阅读 · 0 评论 -
antd ProTable 高级表单实现行编辑表格(能直接用调用接口那种)
代码全部如下:import React, { useState } from 'react';import { EditableProTable } from '@ant-design/pro-table';import ProField from '@ant-design/pro-field';import { ProFormRadio } from '@ant-design/pro-form';import ProCard from '@ant-design/pro-card';import原创 2020-12-23 18:50:47 · 8170 阅读 · 10 评论 -
antd 高级表单使用报错解决
因为之后有分布表单的需求,所以今天抽空就看了看例子,照着官方文档把那些需要的包安装导入完成后,发现一直报几个大错,页面一直空白,报错如下我是把需要的包安了装装了安都不好使,最后把antd这个包重新安装才可以的。我的antd的版本是4.4.0,升级之后是4.9.4,然后就可以了,这他娘的真是坑死人了。...原创 2020-12-22 16:34:58 · 1492 阅读 · 0 评论 -
react antd锚点自定义样式,图标
在页面导航里经常会看到这种样式的组件,antd里面有锚点和时间线可以办到,今天我主要使用锚点完成这种特效,但官方锚点的样式和那个小圆点是在太丑了啦,这里需要自己修改样式代码如下:import React, { useState, useEffect } from 'react';import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';import { Anchor } from 'antd'.原创 2020-12-21 17:12:58 · 2333 阅读 · 7 评论 -
关于antd table展开行expandable的坑和解决办法
最近遇到了antd 表格展开行的需求,然后遇到了非常恶心的事情,首先官方文档中只有expandedRowRender可以渲染组件,此为渲染层,这个属性方法有四个参数function(record, index, indent, expanded),分别为当前行,下标,缩进,当前行状态(true为展开,false为关闭)。这个方法点击每个展开行都会执行一遍,默认不管是关闭和打开。然后我的需求是点击展开行要用到当前行id去请求一个接口渲染图表,此为异步操作,我一开始不想请求数据的逻辑写在expandedRow原创 2020-12-14 16:11:33 · 14025 阅读 · 0 评论 -
react antd select 下拉框实现可选择可自由输入
import React from 'react';import { Button, List, Avatar, Select } from "antd";const fontSizeArr = [ { value: 8 }, { value: 10 }, { value: 12 }, { value: 13 }, { value: 14 }, { value: 16 }, { value: 18 }, { value: 20 }, { value: 24 },原创 2020-12-02 16:40:07 · 6885 阅读 · 4 评论 -
react中给antd design表格中title加上tooltips提示
如果表格中有很多状态展示,这时候可以在表格title中加上tooltips提示。antd 官方文档中表格的Column已经早就有了api代码如下:表头tooltips提示效果:原创 2020-11-09 15:52:47 · 1523 阅读 · 0 评论 -
antd 穿梭框的用法
效果如图使用: const [mockData, setMockData] = React.useState([]); const [targetKeys, setTargetKeys] = React.useState([]);const searchData = () =>{ QueryCache().then(res=>{ console.log(res); const userArray = res; const us原创 2020-11-03 16:30:56 · 4965 阅读 · 3 评论 -
在antd design pro 项目里使用iconfont图标
因为antd 官方的一些图标无法满足开发需求,需要在矢量图标库里引入一些图标,但是怎么导入pro项目呢,很简单。首先在矢量图标库生成自己的图标库链接,接着在pro项目中的defaultSetting.js里面修改iconfontUrl,如下接着在config.js文件的路由那块加上自己的图标就可以了。...原创 2020-09-04 17:13:42 · 1256 阅读 · 4 评论 -
ant design pro 踩坑之路
新入手react 我司要用蚂蚁金服那个框架 从头开始熟悉。慢慢踩坑之路。实时更新1.使用静态文件资源 <img src={require('../assets/picture.png')} />2.关闭自带eslint检查找到package.json 文件 删除里面的 “pre-commit”: “npm run lint-staged”3.proxy代理proxy里面的代理的千万不要和你的地址里面的东西冲撞了'/devApi': { target:'http:原创 2020-07-24 11:59:28 · 1249 阅读 · 0 评论