- 博客(465)
- 收藏
- 关注
RSS订阅原创 antd select onClear onChange的使用
当用户选择一个选项时，onChange会被触发，并且新值会被记录和使用。当用户点击清除按钮时，onClear会被触发，并且value会被重置，清除时也会触发onChange事件，因此也可以在onChange事件中对newValue做判断，newValue为undefined时，进行特殊的赋值。
2024-07-25 11:26:23
101
原创 antd table斑马线
在Ant Design的Table组件中，要实现斑马线效果（即行之间的间隔样式），可以通过自定义rowClassName属性来实现。这样，表格中偶数行和奇数行将有不同的背景色，从而形成斑马线效果。可以根据需要自定义行的样式。
2024-07-22 16:40:01
304
原创 图片大小自适应 css
要实现图片大小自适应，可以使用CSS的max-width和height属性，并将width设置为100%。这样，图片会根据父元素的大小自动调整大小，但不会超过原始大小。
2024-07-22 16:37:55
101
原创 antd drawer extra中按钮点击事件获取子组件的数据
在ChildComponent内部，它通过useImperativeHandle暴露了一个getData方法，该方法返回需要传递给父组件的数据。在ParentComponent的handleButtonClick事件处理函数中，通过childRef.current.getData()调用子组件的方法来获取数据。在子组件中使用useImperativeHandle或forwardRef来暴露一个方法给父组件调用。在extra按钮的点击事件中，调用子组件暴露的方法获取数据。
2024-07-18 16:11:50
451
原创 antd table拖拽排序表格拖拽时行样式不生效
问题：antd table拖拽排序时，选中拖拽行样式跟antd官网示例不一样，加的样式没有生效。1. 将样式放在样式文件的最外层，不被其他元素包裹；2. 添加z-index属性.
2024-07-15 10:55:38
121
原创 ant design form动态增减表单项Form.List如何进行动态校验规则
在使用ant design form动态增减表单项Form.List时，Form.List中有多组表单项，一组中的最后一个表单项的校验规则是动态的，该组为最后一组时，最后一个表单项是非必填项，其他时候为必填项。假设动态增加了两组表单项，均为填写内容，在必填项校验被触发后，删除了第二组表单项，此时仅剩一组表单项，想要最后一个表单项的校验状态不再显示必填项提示。等相关代码，将规则校验放在删除表单组的操作中。使用动态校验规则，获取到最后一组的索引，使用form.validateFields重新触发校验规则。
2024-07-12 14:22:29
315
原创 react hooks antd 父组件取子组件form表单的值
来访问子组件的方法或属性。子组件包含一个表单， 使用forwardRef、useImperativeHandle：forwardRef允许组件使用ref将 DOM 节点暴露给父组件，使用useImperativeHandle暴露方法给父组件。在React中，父组件可以使用。
2024-07-11 15:38:33
356
原创 react遍历数据翻页
在React中，遍历翻页通常意味着需要处理一组数据的分页显示。可以通过维护当前页码和每页显示的项目数量来实现。请注意，上述代码没有处理边界情况，如当前页码小于1或大于总页数时的操作，实际应用中可能需要添加这样的检查。是根据总项目数和每页项目数计算得到的总页数。使用此组件时，需要传入一个。组件内部维护当前页码。是当前页面显示的项目，而。
2024-07-10 13:50:16
248
原创 git撤销push
命令后，在VSCode源代码管理器中暂存文件区域可以看到刚刚提交的文件，撤销暂存，重新编辑文件，再进行新的提交操作即可。1. 切换到刚刚push的分支。2. 撤回最近一次的 push。
2024-07-09 10:15:41
265
1
原创 antd select组件下拉菜单渲染错误Encountered two children with the same key
接口返回的数据用于select组件时，控制台报错：Encountered two children with the same key。鼠标在下拉菜单中来回滚动时，下拉选项出现越来越多的重复值。在select的options对象中，设置key属性，并保持其唯一即可。问题原因在于：返回数据中有相同的数据被用作value值。
2024-07-03 19:16:26
111
原创 react antd表格翻页时记录勾选状态
属性来控制勾选状态，并添加preserveSelectedRowKeys: true以保留 key。设置rowKey属性。
2024-07-03 19:12:55
534
原创 echarts不同数量级设置最大值最小值
的最大值和最小值，然后根据这些值设置了 Y 轴的最大最小值。通过乘法和其他数学运算，可以调整最大值和最小值的范围以适应不同的数据量级。属性来指定坐标轴的最大值和最小值。如果要根据不同的数据量级设置最大值和最小值，可以在设置图表配置项时，动态计算这些值。在 ECharts 中，可以通过设置。上述代码中，首先计算数据数组。
2024-06-28 17:04:30
277
原创 antd table ::-webkit-scrollbar hover时高度变高了
:-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分。::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分。::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)::-webkit-scrollbar-thumb — 滚动条上的滚动滑块。
2024-06-26 14:03:01
215
原创 antd table给某些表头设置样式
注意：可以根据需要添加更多的条件判断来定制不同表头单元格的样式。此外，components属性用于替换Table组件的子组件，在这个例子中，替换了表头单元格（header.cell）为自定义的CustomHeaderCell组件。上述代码中，创建了一个自定义的CustomHeaderCell组件，它会检查传入的列属性column.title来决定是否给单元格设置特定的样式。在Ant Design的Table组件中，可以通过columns属性中的headerCell来给特定的表头设置样式。
2024-06-20 14:40:34
485
原创 git上传文件夹push报错：error: src refspec main does not match any error: failed to push some refs to
直接克隆新建仓库到本地某个路径下，将要上传的文件拷贝到该路径下，然后执行上述2-6步骤中的命令即可，注意将6步骤中的分支名修改为main。在本地查看branch发现本地的分支名称是master，而GitLab上创建的新仓库分支是main，所以git push失败。5. 将GitLab仓库添加为远程仓库（请用你的GitLab仓库的URL替换下面的。第一种：使用下面的命令修改分支名称一致后再推送。4. 在GitLab上创建一个新的仓库。
2024-06-18 10:33:12
422
原创 react antd table点击表头事件onHeaderCell
这个属性接受一个函数，该函数返回一个对象，该对象的。在Ant Design的Table组件中，可以通过使用。属性是我们要处理的点击事件处理函数。函数将被调用，并且相关的列标题将会被打印到控制台。属性来访问表头单元格，并绑定点击事件。数组中的每个对象都调用了。方法，并对每个对象添加了。
2024-06-18 10:23:56
446
原创 vue elementUI el-date-picker [Vue warn]: Avoid mutating a prop directly since the value will be over
第一种：el-date-picker处添加属性placement="bottom-start"。第二种：指定elementUI版本为2.15.8，重新安装依赖。
2024-06-07 13:58:36
301
原创 momentjs格式化12位日期时间为连字符的样式，如YYYY-MM-DD HH:mm:ss
【代码】momentjs格式化12位日期时间为连字符的样式，如YYYY-MM-DD HH:mm:ss。
2024-06-07 13:54:20
112
原创 vue el-table :data动态绑定变量
问题：vue el-table :data想要动态绑定不同的变量作为表格数据。解决：使用三元表达式。
2024-06-07 13:51:48
130
原创 react antd table handleTableChange sortorder始终是升序
react antd table handleTableChange sortorder始终是升序，点击触发请求后，表头该字段不会显示为降序，而且升序的小箭头不会像and design上面的示例那样显示成蓝色的。表头是动态渲染生成的，而不是写死的。点击排列后，重新渲染生成最新的表头。
2024-06-05 10:41:44
129
原创 ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项
ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项。
2024-06-04 16:54:28
517
原创 ant design DatePicker RangePicker范围选择框设置禁用日期、时间、分钟
【代码】ant design DatePicker RangePicker范围选择框设置禁用日期、时间、分钟。
2024-06-04 16:36:32
205
原创 react ant design父组件中的Drawer onClose事件传给子组件，子组件通过onClose传参给父组件时参数打印出来是SyntheticBaseEvent，页面报错
react ant design父组件中的Drawer onClose事件传给子组件，子组件通过onClose传参给父组件时参数打印出来是SyntheticBaseEvent（React合成事件的一个类型）而不是useState设置的数据类型，导致页面报错。方法二：不通过onClose进行传值，而是将父组件中的useState定义的setData传到子组件，在子组件中直接使用setData(newData)获取新的数据。
2024-06-03 15:02:47
167
原创 ant design select多选时，选项中有“全选”和其他选项互斥时的处理方式
选了“全部”，选中项中就不能有省地市；选择省地市的时候，将“全部”从选中项中去除，只保留省地市。
2024-06-03 13:46:55
168
原创 antd 动态增减表单项默认呈现一组表单项
使用initialValues设置初始值，可直接设置为：initialValues={{users: [{}]}}。在Ant Design（antd）中，你可以使用。组件来动态增减表单项。
2024-06-03 11:05:05
200
原创 ant design Drawer Instance created by `useForm` is not connected to any Form element. 解决：forceRender
使用ant design中的Drawer组件和Form组件时，控制台提示：Instance created byuseFormis not connected to any Form element. Forget to passformprop?调用Form.useForm()方法时Form element还未初始化，无法挂载方法。Drawer元素上面加forceRender属性。
2024-06-03 11:00:25
115
原创 解决React Each child in a list should have a unique “key“
React页面提示：Each child in a list should have a unique “key“，排除了遍历生成的元素，最后发现是Table需要加rowKey。
2024-06-03 10:53:41
108
原创 antd RangePicker清空日期时报错
属性时，始终传递数组，即使要清空日期也要传递。事件处理函数不正确，没有正确更新组件的状态。事件处理函数中，当用户清空日期时，更新。组件的要求来进行，比如直接设置了。
2024-06-03 10:48:31
680
原创 Warning: value should in shape of { value: string | number, label?: ReactNode } when you set labelIn
修改value写法为value={{ value: currentSelectedKey, label: currentSelectedLabel }}
2024-06-03 10:47:12
181
原创 Select onChange causes warning: label of value is not same as label in Select options.
select的options中的label、value没有跟默认值对应上。
2024-06-03 10:45:15
121
原创 react antDesign DatePicker 禁用日期，禁止选择部分日期和时间 不能选择当前时间之后的日期、小时、分钟
禁止选择部分日期和时间 不能选择当前时间之后的日期、小时、分钟
2024-05-28 10:14:34
229
原创 react解决电脑分辨率及缩放导致页面变形的问题
如果使用了qiankun微服务，该应用是子应用，嵌入到主应用中时自适应效果不生效，可能是受到主应用中的配置影响，可以尝试在主应用中加入自适应方法查看效果，但是会影响主应用中页面模块的原有展示效果。另外，如果本身页面的字体已经很小，比如使用的11px、12px的字体大小，在电脑高分辨率的情况下，页面字体会显示的非常小，个人觉得用户体验不是很好。
2024-05-27 11:05:54
515
原创 Warning: A future version of React will block javascript: URLs as a security precaution. Use event h
原因：React提示在未来的版本中作为安全预防React将阻止Javascript URL，React将不再使用"javascript:;解决：将“javascript:;
2024-05-27 09:20:51
244
原创 Antd DatePicker Invalid date问题：点击DatePicker右侧图标后出现Invalid date和NaN
点击DatePicker右侧图标后出现上图的Invalid date和NaN，在时间发生变化的回调onChange事件中打印发现，date为null，dateString为''。DatePicker的value属性做空值判断即可。
2024-05-23 11:29:26
303
原创 request.js使用Promise.all等待所有请求完成再进行数据赋值
的调用，并返回一个新的promise。然后我们用一个数组映射URL数组，为每个URL创建一个promise，并将它们存储在。发送请求，并将每个请求返回的promise存储在一个数组中。来等待所有的promises完成，并处理结果或错误。在JavaScript中，使用。发送多个并发请求，并使用。首先，确保你已经安装了。
2024-05-22 14:10:30
403
原创 checkbox复选框indeterminate和checkAll控制选中、未选中和部分选中的状态转换
indeterminate为false，checkAll为false的时候，状态为未选中。indeterminate为true，checkAll为false的时候，状态为半选中。indeterminate为false，checkAll为true的时候，状态为全选中。
2024-05-22 09:58:49
280
原创 使用git的时候，终端提示warning: There are too many unreachable loose objects； run ‘git prune‘ to remove them.
使用git的时候，终端提示warning: There are too many unreachable loose objects;run 'git prune' to remove them.执行下面的命令，清理优化本地的 git 项目。提交的改动过多，导致本地的缓冲区占用太大。
2024-05-22 09:56:16
318
原创 echarts x轴label formatter截取数据 不影响tooltip时展示完整时间
在ECharts中，如果想要在X轴的标签（label）上截取数据但同时保证在tooltip中能够完整显示全部信息，可以使用axisLabel的formatter函数来自定义标签的显示格式。
2024-05-21 10:20:19
508
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人