- 博客(553)
- 收藏
- 关注
RSS订阅原创 ant design table表头分组 给指定的几个一级表头自定义样式
在AntDesign的Table组件中，可以通过多种方式为分组表头设置自定义样式：1.使用columns的className属性添加CSS类；2.通过render函数返回带样式的JSX元素；3.利用onHeaderCellAPI直接设置样式对象。示例展示了如何为"Name"、"Age"等表头设置不同背景色、文字颜色和字体大小，推荐组合使用这些方法实现灵活的表头样式定制，同时建议通过CSS覆盖AntDesign默认样式时添加!important确保生效。
2025-09-28 15:24:21
176
原创 在 Ant Design 的 Table 组件中，onHeaderCell 属性为表头单元格设置自定义属性和事件处理函数
摘要：本文介绍了在Ant Design的Table组件中如何使用onHeaderCell属性实现表头点击功能。通过在columns配置中为特定列添加onHeaderCell，返回包含onClick事件和cursor:pointer样式的对象，即可将该列表头设为可点击状态。示例中Age和Address列的表头点击时会触发alert提示，而未配置的Name列保持默认不可点击状态。这种方法可灵活实现表头的自定义交互效果。
2025-09-28 15:19:27
314
原创 ant design树结构的数据 如何在选中节点时进行比较是不是在同一级
摘要：本文介绍了在AntDesign树组件中比较两个节点是否同层级的方法。通过分析节点的pos属性（位置路径，如"0-0-0"），使用pos.split('-').length获取节点层级深度进行比对。示例代码展示了在onSelect事件中实现这一功能，适用于选中两个节点时的层级比较场景。该方法简单有效，但需注意pos属性可能受组件版本影响，且示例仅适用于两个节点的基本比较场景。
2025-09-28 15:16:01
299
原创 momentjs获取某个时间点往前推第7天的时间点、当月第一天、当月最后一天的时间
本文介绍了使用moment.js处理时间的两个常见场景：1)获取目标时间前7天的时间点，通过subtract(7,'days')方法实现；2)获取当月第一天和最后一天，分别使用startOf('month')和endOf('month')方法。代码示例展示了如何格式化输出结果为'YYYY-MM-DD HH:mm:ss'格式。这些方法为日期计算和范围获取提供了简便的解决方案。
2025-09-28 15:04:03
274
原创 echarts立体柱形图的实现配置项
摘要：该代码配置了一个包含柱状图和顶部/底部圆形装饰的ECharts图表，展示内蒙古各城市数据。主要配置包括：x轴显示呼和浩特等5个城市名称，y轴隐藏标签；柱体使用蓝绿渐变色，宽度20px；顶部和底部添加10px高的圆形装饰；图表包含标题"单位：万"和数值标签提示。通过grid、tooltip等参数优化了图表布局和交互效果，整体风格简洁现代。
2025-09-28 14:53:50
157
原创 React页面使用ant design Spin加载遮罩指示符自定义成进度条的形式
本文展示了如何使用Ant Design的Spin组件实现自定义进度条加载效果。通过结合Spin和Progress组件，创建了一个带有进度动画的加载指示器。关键实现包括：1)使用useState管理加载状态和进度值；2)通过useEffect设置定时器模拟进度增长（采用非线性随机增量，接近完成时放缓）；3)加载完成后快速填充到100%并隐藏。进度条具有渐变色效果，同时加入了100ms延迟显示以避免闪烁。这种实现方式比传统旋转指示器能更直观地展示加载进度。
2025-08-27 11:22:23
270
原创 MapBox GL调整标记点的位置，比如地图有部分被其他模块遮住，漏出来的地图部分只有上半部分，这时想要标记点的位置位于漏出来的这部分地图的中心点上的解决方案
【摘要】针对地图被面板遮挡导致标记点视觉效果偏移的问题，提供了三种解决方案：1）直接调整坐标值（简单但影响实际数据）；2）传递偏移参数（灵活但需手动计算）；3）使用padding调整视图（最佳方案）。第三种方法通过设置padding参数（如{top:100}）实现像素级精确控制，既能保持原始坐标不变，又能获得最佳视觉效果，推荐优先采用。所有方案均结合flyTo动画实现平滑过渡，提升用户体验。
2025-08-27 10:53:16
334
原创 MapBox GL地图上绘制圆形区域，在区域中心点添加标记点及文本提示的实现方法
本文介绍了在MapBoxGL地图上绘制圆形区域并添加中心标记的实现方法。通过addArea函数，首先根据传入的经纬度坐标和半径创建圆形多边形，然后添加填充层和边框层。在中心点添加自定义标记图标，并创建动态文字提示框显示半径信息。文字提示框会随地图移动自动更新位置。clearLayers函数用于清理图层和标记，避免重复添加。该方法支持通过参数配置中心点坐标和半径，实现灵活的地图标注功能。
2025-08-27 10:35:38
280
原创 ant design Table渲染时控制台报错：Uncaught TypeError: rawData.some is not a function
Ant Design Table组件出现"UncaughtTypeError:rawData.someisnotafunction"错误，通常是因为数据源不是数组类型。排查发现是由于Table组件的dataSource属性中引用了未定义的变量data所致。建议检查数据源定义和传递过程，确保使用有效的数组数据。
2025-08-27 10:26:19
110
原创 ant design Table可展开行设置单元格有内容时展示加号图标，没有内容时隐藏加号图标
本文提供了四种实现Ant Design Table展开行图标条件显示的方法。当单元格有内容时显示加号图标，无内容时隐藏。核心方案是在expandable配置中使用rowExpandable属性：1）简洁检查法用Boolean转换；2）严格类型检查确保字符串非空；3）推荐的数据预处理方案，在数据源中统一处理null值；4）更严格的内容检查，排除null/undefined/空字符串。这些方法都能有效控制展开图标的显示逻辑，其中数据预处理方案最为推荐。
2025-08-27 10:24:21
202
原创 react + ant-design实现数字对比动画效果：当新获取的数字比之前展示的数字多或少2时，显示“+2”或“-2”的动画效果
react + ant-design实现数字对比动画效果：当新获取的数字比之前展示的数字多或少2时，显示“+2”或“-2”的动画效果。
2025-06-27 16:34:13
212
原创 Echarts实现立体柱形图
摘要：本文展示了一个使用ECharts实现的柱状图可视化代码，包含2016-2019年的两组数据对比。代码配置了绿色渐变柱体、顶部/底部椭圆形装饰，以及虚线网格等样式效果。主要参数包括：柱子宽度40px，单位显示，图例禁用点击交互，X/Y轴标签样式设置，以及鼠标悬停时的渐变高亮效果。通过pictorialBar类型实现了柱体两端椭圆形的特殊视觉效果，整体采用绿-青渐变配色方案。
2025-06-27 16:23:51
236
原创 css实现高度可变、上下边框是渐变色、左右边框是纯色的div容器
这段代码实现了一个带有渐变边框和滚动功能的固定宽度容器。容器采用浮动布局，宽度500px，高度范围136-746px，超出内容可垂直滚动。通过伪元素::before和::after在顶部和底部添加了渐变色边框线（#2865D5到#4ab9f4渐变），同时保持左右3px实线边框。内容区域设置了23px上下和30px左右的内边距，并通过min-height补偿了padding对高度的影响。容器还设置了10px圆角和相对定位，整体设计既美观又实用。
2025-06-27 15:58:32
231
原创 ECharts使用图片自定义 axisLine 的样式
摘要：本文介绍了三种在ECharts中绘制带图片的坐标轴线的方法：1)使用axisLine.lineStyle的color属性配置渐变或图案填充；2)通过axisLine.symbol在轴线两端添加图片；3)利用graphic元素完全自定义轴线。对于需要调整轴标签与轴线间距的情况，可通过设置axisLabel的margin属性和graphic的位置属性来实现。每种方法均提供了相应的代码示例，适用于不同复杂度的图片轴线需求。
2025-06-27 15:51:18
309
原创 CSS3实现同心圆效果
【CSS同心圆装饰文本实现】通过伪元素和box-shadow属性创建了一个带有同心圆装饰的文本效果：外层为30px半透明圆（使用9px模糊半径实现），内层为12px实色圆。关键代码使用::before伪元素定位，通过translateY垂直居中，并利用box-shadow模拟外圆效果。文本通过40px左内边距与圆保持间距，整体实现简洁优雅的视觉装饰效果。
2025-06-27 15:11:11
305
原创 js将树结构的嵌套数据递归扁平化为数组对象list这种格式[{},{}]
本文介绍了一种将树形结构数据扁平化的方法。通过递归函数flattenData遍历树形数据（包含测试1、测试2两个父节点及其子节点），将嵌套的children数组转换为扁平化数组。该方法会跳过父节点，仅保留子节点信息，最终输出包含所有子节点（测试1-1、测试1-2、测试1-3、测试2-1、测试2-2、测试2-3）的数组，每个节点保留key、title和parentKey属性。这种处理方式适用于需要简化树形结构数据的场景。
2025-06-27 15:08:53
115
原创 react ant-design通用页面自适应适配不同分辨率屏幕的方法工具类
摘要：本文介绍了一种自适应的响应式缩放方案，通过计算目标分辨率与窗口尺寸的比例实现等比例缩放。该方案采用防抖函数优化性能，支持滚动条自适应，并针对不同设备像素比进行高清渲染优化。实现上创建了外层容器进行布局控制，使用3D变换提升渲染质量，通过双RAF和ResizeObserver实现高性能监听。最后展示了在React组件中的调用方式，可适用于不同尺寸的动态内容区域展示。
2025-06-27 14:52:44
442
1
原创 react监听容器宽度变化，动态计算ant-design table列宽
摘要：本文介绍了在Ant Design的Table组件中实现动态列宽分配的方法。通过监听容器宽度变化（使用ResizeObserver或resize事件），动态计算4列宽度：前两列各占30%，第三列占20%（均为动态等宽），第四列固定200px。关键点在于确保每列设置像素级width值以保证ellipsis效果。实现步骤包括：1) 监听容器宽度并重新计算列宽；2) 按比例分配列宽（取整数像素值）；3) 在columns配置中应用计算好的宽度值。代码示例展示了如何使用React Hooks完成这一功能。
2025-06-27 14:35:07
328
原创 React+MapBox GL JS引入URL服务地址实现自定义图标标记地点、区域绘制功能
本文介绍了如何在React中使用Mapbox GL JS实现自定义图标配置。通过customIcons对象定义不同类型的图标URL，支持机房、基站和断点使用不同图标标记。addCustomMarker函数用于创建带有自定义图标的标记，支持设置图标URL、标题和CSS类。专用函数addComputerRoomMarkers、addBaseStationMarkers和addBreakPointMarkers分别用于添加机房、基站和断点标记。图标样式通过CSS控制，大小为32x32像素，使用background
2025-05-23 14:51:56
603
原创 Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For in
Ant Design 表单组件 Form.Item 在使用 name 属性时，必须包裹一个单一的子元素，否则会触发控制台警告。例如，<Form.Item name="username"><Input /><span>1111</span></Form.Item> 会导致警告，因为 Form.Item 包含了多个子元素。虽然可以使用 <></> 包裹多个元素，但这可能导致表单元素 Input 不受控。为了解决这个问题，可以通过 useState 为 Input 绑定 value 并设置 onChange 事件
2025-05-23 11:54:56
368
原创 React antd连续修改表格行数据再次回填表单内容时，数据不是最新的问题的解决
在使用Ant Design Table时，若遇到编辑表单保存后再次点击修改按钮时，表单回填内容未更新的问题，可以通过优化数据传递方式解决。具体方法是在父组件向子组件传递行数据时，不使用useState变量selectedRows，而是通过修改成功后查询获得的列表数据，并过滤selectedRowKeys来获取最新数据。例如：<AddEditForm selectedRow={selectedRows.length > 0 ? data.find(item => item.id === se
2025-05-23 11:33:36
206
原创 react+Mapbox GL实现标记地点、区域的功能
本文介绍了如何在React项目中使用Mapbox GL JS创建交互式地图。首先，确保已注册Mapbox账号并获取访问令牌，然后安装必要的依赖。接着，创建基础地图组件，设置地图的中心点、缩放级别，并监听地图移动事件以更新经纬度和缩放级别。随后，通过mapboxgl.Marker添加点标记，并使用GeoJSON数据绘制多边形区域。文章还展示了如何为多边形添加点击事件和鼠标悬停效果，并提供了完整的组件示例，结合了标记地点和绘制区域的功能。最后，介绍了如何使用react-map-gl官方React封装实现类似功能
2025-05-23 11:11:53
678
原创 React 轻量级富文本编辑器推荐（中文版）
专为 Markdown 设计，适合技术写作。：由国内团队开发，专为中文优化。：功能齐全，中文文档丰富。（Markdown专用）+ 自定义中文语言包。
2025-05-15 17:48:15
1471
原创 js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡
js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡。
2025-04-22 10:02:01
383
原创 AI语音助手 React 组件使用js-audio-recorder实现，将获取到的语音转成base64发送给后端，后端接口返回文本内容
【代码】语音助手 React 组件使用js-audio-recorder实现，将获取到的语音转成base64发送给后端，后端接口返回文本内容。
2025-04-18 15:04:42
594
原创 echarts饼图中心呈现一张图片，并且能动态旋转的效果react组件
【代码】echarts饼图中心呈现一张图片，并且能动态旋转的效果react组件。
2025-04-18 14:55:56
553
原创 Echarts环形图饼图实现圆环中间有一条弧线，鼠标悬停在圆环某一段上面的时候呈现加粗效果
【代码】Echarts环形图饼图实现圆环中间有一条弧线，鼠标悬停在圆环某一段上面的时候呈现加粗效果。
2025-04-09 10:05:04
299
原创 react实现SVG地图区域中心点呈现圆柱体，不同区域数据不同，圆柱体高度不同
【代码】react实现SVG地图区域中心点呈现圆柱体，不同区域数据不同，圆柱体高度不同。
2025-04-08 13:21:34
329
原创 react ant design树穿梭框实现搜索并展开到子节点、同级节点选择及同时选择数量限制功能
【代码】react ant design树穿梭框实现搜索并展开到子节点、同级节点选择及同时选择数量限制功能。
2025-03-25 10:33:23
519
原创 将一个数组对象按照某个字段分组，组装成antd Tree数据结构
代码通过遍历原始数据，使用一个对象 map 来按 fieldId 分组，并为每个组创建一个包含 key、title 和 children 属性的对象。然后，将每个技能的 skillsId 和 skillsName 添加到相应组的 children 数组中。最后，使用 Object.values() 方法将 map 对象转换为一个数组，得到所需的树结构数据。
2025-02-17 17:33:09
320
原创 Ant Design Table实现ScrollBoard组件的轮播表效果，无缝轮播
需求：使用的时候，文本内容较长时，设置溢出隐藏，完整的文本内容通过span的title属性来设置，想要使用ant design tooltip文本提示的样式来呈现完整的文本内容，使用DataV-React无法满足要求，改成通过结合 setInterval 和 Table 的 scroll 属性来实现类似 ScrollBoard 的轮播效果。
2025-02-17 13:52:33
815
原创 react页面定时器调用一组多个接口，如果接口请求返回令牌失效，清除定时器不再触发这一组请求
在这个例子中，fetchDataGroup 函数会发起一组API请求，并使用Promise.all等待所有请求完成。对于生产环境的应用，应该考虑通过更安全的方式管理访问令牌，例如从环境变量加载或者使用身份验证库来自动刷新令牌。3. 错误处理：在API调用中加入错误处理逻辑，特别是针对401未授权的状态码（通常意味着令牌已失效）。如果应用有刷新令牌的能力，可以在handleTokenInvalid中尝试刷新令牌而不是直接清除定时器。4. 清理定时器：当检测到令牌失效时，清除定时器并停止进一步的API调用。
2025-01-24 13:40:10
644
原创 react项目表格内容轮播，DataV-React轮播表的使用
项目中想要实现表格表头固定不动，表格行内容轮播呈现的效果，antd中的table无法实现，使用DataV-React轮播表来实现。1）样式文件中使用:global{}包裹元素选择器，设置样式。
2025-01-24 13:34:05
920
原创 antd日期时间选择datepicker使用两个分别作为开始时间、结束时间，设置禁用日期和时间点
请注意，在上面的代码中，假设正在使用 moment.js 进行日期处理。功能要求：使用两个antd日期时间选择datepicker分别作为开始时间、结束时间，开始时间的禁用日期设置为今天的前一天，禁用时间设置为今天当前时间点之前的时间，结束时间不能早于开始时间。1. 设置开始时间DatePicker的规则，禁用今天前一天及之前的所有日期，并且禁用今天当前时间点之前的时间，如果选择的日期是今天之后的日期，时间点不做禁用限制。2. 设置结束时间 DatePicker 的规则，结束时间不能早于开始时间。
2025-01-23 17:37:52
858
原创 antd datepicker禁用日期设置为今天的前一天，禁用时间设置为当前时间点之前的时间
如果使用的是最新的 antd 版本，它可能内置支持 ES6 Date 对象，因此可能不需要使用 moment.js。在使用 Ant Design (antd) 的 DatePicker 组件时，可以通过 disabledDate 和 showTime 的 disabledHours, disabledMinutes, disabledSeconds 属性来禁用特定的日期和时间。为了禁用今天的前一天及之前的所有日期，需要比较 current 和今天的日期。需要根据当前时间动态地设置这些属性。
2025-01-23 11:00:13
674
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人