JeffanChen的博客

默认antd 的 Select中间并没有竖框，但是ui design设计了，所以记录一下如何添加。这样就可以完成需要的效果了。如果需要渐变色别忘了添加。跟antd保持同步。

发现input.search， 搜索图标的左侧有个竖线，不是很好看。把它改掉, 新建一个自己的CSS。就会发现中间的竖框没有了。

ProTable 的一点小应用

JS 纯数字字符串 计算差值以及排序

git log 文件全路径获取该文件的最近几次更新记录选择想要退回的版本记录commit ID 即commit 后面的那串代码（commit 和 括号分支名之间）然后git checkout commitID 文件全路径就会告诉你修改情况然后上传更新分支就可以了如果帮助到你，能点个赞吗？...

写个前端解析excel的例子项目之前解析一般都在后端的，这次试试前端的首先使用最基础的上传组件<div> <Upload {...props}> <Button icon={<UploadOutlined />}>Click to Upload</Button> </Upload></div>然后搞一个excelTestModel大概长这个样然后加上方法 const props = {

因为默认显示的数据有点少，得滑动很多下鼠标才行，所以需要增加table高度，这样可以看到更多数据但在style中修改并没有用，虽然增加了整体长度，但是表格实际并没有拉长，还是只能一次显示那些数据所以需要修改这个地方<Table> ... scroll={{ y: 550 }} //y越大，表格高度越大</Table>如果帮助到你，能点个赞吗？...

今天突然本地调用api报错431 Request Header Fields Too Large但是上服务器部署的网页看是正常的经过多方查找清浏览数据没有用最后发现可能是node版本问题升级到最新版，问题解决附下载链接可能不适用所有情况，仅提供一条思路如果有帮助你的话，能点个赞吗？...

用antd的Statistic组件写的一个简易自动登出组件不废话直接上代码import {Statistic } from 'antd';import React,{useState} from 'react';//这里设置一小时const timeRange = 1*60*60*1000function AutoLogout() { const [deadline, setDeadline] = useState(Date.now() + timeRange) l

新发布的才发现这个问题，日期选择居然是中英文混杂的试了设置locale为zh-CN没有用,最后重新安装的moment才得以解决，附加更新moment语句yarn add moment仅提供一个思路，不一定适用所有情况如果有帮助你的话，能点个赞吗？...

随着后端的权限越加越多，虽然已经把登录分为两个api，分别读取，但最终还是超出了限制于是在今天报错了431 Request Header Fields Too Large在网上多方查找，看了这篇文章https://blog.csdn.net/qq_38652871/article/details/106101750感觉写的在理，但是当自己改的时候，把webpack-dev-server.cmd改好去发现没有用但网上大多都是vue的解决方法，在不懈努力下，终于找到了改的文件这里大概总结一下思路

Bug记录场景错误排除错误过程原因总结场景    登陆界面发送API后跳转至主界面    因为数据量大，需要拆分成两个API错误这个时候出现了错误只出现Referrer Policy 没有返回状态排除错误过程首先看日志，发现调用没有记录说明没有调用成功再用Postman call API调通了？？？再前后端联调，发现确实调用到了这个情况逐渐有趣了明明成功发了请求，并且后端确实运行了，但是日志却没有

The map() method can create a new array populated with the results of calling a provided fuction on the calling array’s every element.there is an example on the MDN:const array1 = [1, 4, 9, 16];// pass a function to mapconst map1 = array1.map(x =>

Uncaught (in promise) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or

这个问题是在保存高级搜索条件时报的错，经检查是这段代码报的错给出类似代码import React, {useEffect} from 'react';import {Form,DatePicker,} from 'antd';function example(){ const [form] = Form.useform(); useEffect(()=>{ .... //searchdata是按原样用form.getFieldsValue()保存的 let tempdata=J

useRef12useRef is a vary useful API in react hooksIt returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). And the returned object will persist for the full lifetime of the componentI have listed two

今天写react时，用到 map，但发现点击antd Table 想要选中一条数据时，map莫名其妙的刷新初始化了给出大概结构import React from 'react';import useColumns from '...';function myfunc(){ ... const inputmap = new Map(); ... return (<div> <Table dataSource={mydata} columns=

取出routes中的一段如下：{ path:'Settings', name:'主数据配置', icon:'set', routes:[ { path:'/Settings/userConfig', name:'用户主数据', component:'...' }, { path:'/Settings/groupConfig', name:'用户组主数据', component:'...'

Table 手动输入实现多条件筛选官网例子改HOOK版样例官方版本HOOK版本条件筛选关键语句更改为多条件筛选要是不想看改HOOK的部分，可以先看官方的例子，然后跳到条件筛选关键语句官网例子改HOOK版样例官方版本首先给出官网找到的例子作为参考import React from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css';import './index.css';import { Table,

ANT Form复杂动态增减表单项这里直接借用官网的例子讲解一下import React from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css';import './index.css';import { Form, Input, Button, Space, Select } from 'antd';import { MinusCircleOutlined, PlusOutlined } from '

例子直接给出未更新例子可能跟你所写的代码不一样，但是可以参考看看const [tableData,settableData]=useState(Array)const columns=[...]let change=(value)=>{ //* let tabledata=tableData tabledata.push(value) settableData(tabledata) ...}...return( <Table columns={col

后台生成Excel并命名后传送命名保存在Headers的Content-Disposition内命名保存语句Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");希望前端以该命名保存数据那么该如何保存呢源代码：我这里先在页面加了<a id="download" style={{ display: 'none' }}></a>然后在调用API返回res后if (r

先赞后看，养成习惯！！写了这么多react的学习笔记，结果忘记发最关键的如何新建项目这步，失误失误我争取把我当前的环境重现出来吧安装第一步1.yarn create umi （tyarn create umi 也行） 或 npm create umiC:\myantdproapp>yarn create umiyarn create v1.22.4[1/4] Resolving packages...[2/4] Fetching packages...info fsevents@

解构赋值const 的用法const 概念const 几种用法用法一:用法二:const 的用法在公司初次学习react，记录一点学习成果const 概念const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改;const 几种用法可以参照 菜鸟教程.用法一:const PI = 3.141592653589793;PI = 3.14; // 报错PI = PI + 10; // 报错const 声明的常量必须初始化const 的本质: con

antd table 单击一行选中当前行复选框是个挺难的地方，在网上查了好久这是官方的例子但是我的代码里不太方便用所以一直在找别的方法终于找到了onClick:event =>{ event.currentTarget.getElementsByClassName("ant-checkbox-wrapper")[0].click(); },亲测有效...

ANTD Form 读取其中Table数据首先将table中的数据保存起来，我这里使用了selectRoleRow来保存。form.item 里的name 可以先不定义let selectRoleRow=[];rowSelection={{ onChange: (selectedRowKeys, selectedRows) => { selectRoleRow=selectedRows; }, }}然后是我们的

修改Umi的菜单宽度先用网页查看器选中要改的整个菜单找到对应的class，我这里是ant-pro-sider-menu-sider然后再global.less中添加该元素，再刷新，发现依然没有改变，是因为内联的权限较高，无法改变所以再加上!important在保存刷新一下，菜单就成功改变宽度了。新手小白，如果有帮助到你，能点个赞嘛！!谢谢！！！...

ANT table 设置默认选中行查了一个上午，搜到的全是很久之前的checked,defaultChecked啥的全是很久之前的版本了，然后仔细看了看文档，（官网的服务器太差了，这几天老是访问不了）现在改成了selectedRowKeys，且需要跟onchange一起用const [defaultactionselectedtabledata, setdefaultactionselectedtabledata] = useState([]);//defaultselecteddata是你tabl

原先代码片段：const [searchvalue, setsearchvalue] = useState(new String());setinterval( setInterval(function() { logrefresh(); }, refreshsecond * 1000), );function logrefresh() { if (lword != null && lword.length &

遇到一个错误，就是点击按钮后，触发props.dispatch()请求后，这个请求 respon 404的异常，然后再点击按钮，就不再发出props.dispatch()，我这里的用的是dva+axios,附上类似的源码片段和修改后的片段//models.companyimport { Company } from '@/services/company';const company = { namespace: 'company', state: { company_data: [

父组件import {createContext} from 'react';import SearchPart from './searchpart'; //引入子组件export const FatherContext = createContext();function AAA(){ const [AA, setAA] = useState(Array); const BB= useSelector(state => state.BB.data); ..... return

父组件import {createContext，useRef} from 'react';import SearchPart from './searchpart'; //引入子组件export const FatherContext = createContext();function AAA(){ const [AA, setAA] = useState(Array); const BB= useSelector(state => state.BB.data); const

大致写了一下，挺粗糙的import {BellOutlined } from '@ant-design/icons'import {Badge, Affix } from 'antd';....return(<Affix offsetTop={60} style={{position:'absolute' ,top:60, left:'95%'}}> // <a href="#"> <Badge count={5}> <Butt

先赞后看，养成习惯！最近在写首页的数据图表，记录一下echarts 安装npm install --save echartsnpm install --save echarts-for-react要是卡的话，可以考虑cnpmecharts 的使用随便在官网找一个示例我这里找了一个饼图，公司电脑有水印就不先截图了option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left:

先赞后看，养成习惯！ant modal 的底部按钮真的有点反人类，怎么能把确定放在取消的右边呢？还好可以自定义这次举的例子就是将 ant modal 底部按钮翻转一下，让确定在左边<Modal title="yourtitle" visible={MailOutModal} //控制对话框的弹出与消失 footer={[ <Button type="primary"

这是脚手架自动安装的CheckPermissions，位于src\components\authorizedimport React from 'react';import { CURRENT } from './renderAuthorize'; // eslint-disable-next-line import/no-cycleimport PromiseRender from './PromiseRender';/** * 通用权限检查方法 * Common check permis

混合菜单新模式样例Ant Design Pro Blog 文档这个明显就比非混合的好看很多，今天就来试试改一改吧现在官网中找到ProLayout就可以找到这个混合模式的源码样例import React from 'react';import ProLayout, { PageContainer } from '@ant-design/pro-layout';import complexMenu from './complexMenu';export default () =>

这里拿我最常用的table举个例子问题：如果我们只是要把当前特定页的table背景改个颜色，而其他页面保持默认该如何办呢？解决方法：1.给当前页的table控件外包裹的最大的div添加calssName<div className='mydiv'>...<table/>...</div>2.在global.less添加css.mydiv .ant-table-expanded-row-fixed{ background-color: al

axios使用axios封装import axios from 'axios';import { notification } from 'antd';const Authorizationaxios = axios.create({ timeout: '360000',//设置连接超时});Authorizationaxios.interceptors.response.use( res => { return res; }, error => {

先赞后看，养成习惯！今天在公司写一个list ，却发现初始化时点击事件就触发了，先是源码<List.Item style={{borderBottomColor:'#000000'}} actions={[<a onClick={console.log('hello')}>打招呼</a>]}> ... </List.Item>直