曲鸟

有时我们需要对一个容器的宽高度进行动态的修改，最简单直接的方法一般为：用户可以拖拽容器的边缘来改变其大小，例如下面这样的效果：在react中，我们可以使用这个三方库来快速的实现上面的效果。

我们有一个需求是在用户输入用例名称的时候，系统根据名称去匹配公共用例库中的用例模块展示在下拉框中，然后用户可选择想要的模块导入其中的用例：但是如果用户每输入一个字符就去调用接口查询的话，这样就太频繁了，会给服务端造成不小的压力，所以就需要使用防抖方法来进行限流控制。这里的方案如下：因为antd提供了方法能够很方便的在表格中实现编辑行的操作，这里也就不重新造轮子了，然后结合lodash提供的debounce。

一、临时方案cmd或终端执行：export NODE_OPTIONS=--openssl-legacy-provider二、修改系统环境变量新建一个系统环境变量配置，配置信息如下：NODE_OPTIONS--openssl-legacy-provider

Vue好像也有类似umi这样的应用框架叫做nuxt,这里为了想系统的学习一下Vue，自己搭建项目的每个基础组件和架构就没有使用。小伙伴们可以根据自己需要选择。Vite。

百度无果后尝试升级node、yarn、等还是无用，最后分析了文件字节码发现是公司电脑加密的原因。在打包编译的时候由于加密无法进行编译，解决的话就得联系运维来帮忙处理了。

【代码】Vue3使用路由及配置vite.alias简化导入写法。

anytitle : '列C' , dataIndex : 'decs' , renderFormItem :({if(data) {} };placeholder = "请输入值" value = {anyif(data) {} };placeholder = "请输入值" value = {这样我们在修改列C值的同时将列A的值也做了修改了，上述的代码会将列A值改为123。

封装删除方法，在删除的数据不是第一页且是最后一条数据时则修改current//在非首页的最后一条数据被删除时，改变页码为前一页进行请求 setHandlePagination({});};

ant-design是非常不错、方便的一款前端组件库，而这次用到的ProComponents则是在 Ant Design 上进行了自己的封装，更加易用，与 Ant Design 设计体系一脉相承，无缝对接 antd 项目，样式风格与 antd 一脉相承，无需魔改，浑然天成。一些预设行为也达到了更少的代码，更少的 Bug的目的。

子元素选择器通过>关键标识使用，可以对元素的子元素进行样式属性的调整。它与后代选择器有点相似，但子元素选择器只能选择作为某元素子元素的元素，而后代选择器可以对子子代，子子子代等都会生效（因为都是后代）。

一年一度的中秋节马上就要来了，中秋节时，月亮圆满，象征着团圆。可惜像我们在外漂泊打拼的人们很少有机会在中秋节回家团圆。但我们还是可以给家人送上一些问候和祝福来弥补。在这里也提前祝大家中秋快乐，愿你过的每一天都象十五的月亮一样成功圆满！下面是我通过百度历年的“中秋”关键词搜索数据并结合antd-echarts绘制柱状图来可视化的呈现数据，并做了一些简单的分析。具体过程如下。...............

经过上述分析发现普通函数的功能会比箭头函数更强大一些，但这也不是说我们就要避免使用箭头函数。而是应该根据实际的应用场景来选择。对于使用react hooks来开发前端的我而言，基本很少使用普通函数，大部分的箭头函数使用也未造成开发的影响，代码反而简洁了不少。这两者也没有谁优谁劣的说法，看个人喜好来选择也是可以的。没必要在这些问题上花费过多的时间去争论，哪种让自己用起来更舒服用哪种就行。...

Antd-ProComponents中的EditableProTable无法在子行继续新增子子行的临时解决方案

组件通信是React中的一个重要的知识点，下面列举一下reacthooks中常用的父子、跨组件通信的方法。

一、前言使用antd的tree组件实现下面这样的模块树，点击标题请求其下列表的数据，点击标题旁边的操作图标则执行对应的增删改功能：二、实现方案1.封装一个设置树标题的方法，通过开关改变state来控制图标按钮是否可见：2.树标题被选中时，则调用刷新列表的方法:onSelect={(value: any, e: any) => { if (e.selected) { treeSelectFunc(value[0]); } }}3.

在使用antd的过程中，遇到了一个展示的问题，日期组件中部分中文部分英文：按照官方文档的全局配置后还是不行：到这步在网上搜索了一些答案，有人说把node_modules整个删除再重新安装资源包就能够解决,尝试了后，果然解决了:经过分析发现是因为自己单独装了一个moment包，但antd自带的有moment包（node_modules/antd/node_modules目录下），通过import 'moment/locale/zh-cn'命令导入的是自己装的moment包并非antd中的，由

一、如何批量更新例如我们要通过两个状态来实现下图中的效果在【class】中是通过setState来实现的，在【hooks】中的话，可以通过unstable_batchedUpdates来实现import { useState } from 'react';import { unstable_batchedUpdates } from 'react-dom';//批量更新状态时使用import React from 'react';const Example = () => { c

一、前言最近项目中有需要使用图表展示可视化信息的需求就去查找了一些相关轮子。了解到大多都是用echarts来实现的自己框架使用的是antd ，通过阅读官方文档发现，antd-charts他们的官方库一样能实现一些可视化图表，所以做了一些尝试。antd-charts官网：https://charts.ant.design/zh-CN/demos/global打开官网发现它支持很多图表，包括一些常见的饼图，折线图，柱状图等.不常见的漏斗图、玉珏图、分面图等也支持。而且还挺好看（个人觉得挺好看！）可

下图是class通过ref使用class组件的方法：如果要让hooks通过ref使用class组件的话，可以先声明一个全局变量TableView：再在调用处这样写即可被调用组件的写法直接在componeDidMount中将自己赋值与调用组件的方法中（与class使用class组件方法的写法一致）...

antd rowSelection 分页等切换保留勾选看了网上很多实现，感觉都挺复杂的，所以写下我10行左右代码的实现方案：思路也很简单，就是让选中项与state绑定，在全选\勾选的时候改变state.select_data的值就行了，下面是代码：如果需要用hooks实现也是同理this.state={select_data:[]}//初始化选中项为空const rowSelection = {//antd组件 //选中项与state.select_data绑定 selectedR