动轮 箭头carousel antd
2024-01-13 antd的tabel组件业务问题之勾选了table中的一项，然后弹出弹窗，接着关闭弹窗，刷新table，但是table选中的一项还是显示被勾选中的状态 ==》你没有改变所选中的数据（selectedRowKeys）
如图： 问题：table显示的勾选状态的数据无法被改变。 原因：你没有改变到勾选数据，你只是在勾选时把选中的值赋值给了一个变量，然后以为自己清空了变量，以为自然而然地就取消勾选状态了，实际上就是你代码没写全！ 解决方案： 原来写法： rowSelection: { onChange: handleC ......
antd中columns中配置的操作，如何，调用函数组件中的方法
不拆分的情况下 把columns配置，写在函数组件内部。 把相关的操作，也全部写在函数组件内部。 拆分的话 1.columns的render函数中，有个actionref，可以传递dom实例上的操作方法。 2.其他方法，可以使用hooks方法进行传递。 useColumns.tsx export c ......
antd-pro 使用经验
antd-pro中的很多组件，都是对antd组件的封装 所以，很多属性配置，都可以通用的！ 先说antd-pro-table遇到的问题 1.请求的时候，搜索和分页相关的参数，都会拼接到url上，这显然不好 2.使用table的，scroll属性配置，配置pro-table。可以实现pro-table ......
使用的antd的pro-table时，遇到了两种引入方法---@ant-design/pro-components和@ant-design/pro-table的区别
两种方式，同时使用的时候，会报错 npm i @ant-design/pro-components 报错 ......
antd 使用不同的条件动态验证 Form.Item
假设我们有一个 InputNumber，当进行操作1时，我们允许用户输入负数值，然而在进行操作2时，我们需要用户输入正整数。 我会用到一个名为 createValidator 的函数来实现这个需求。同时，我还会使用 Form.Item 的 dependencies 属性来更新 lowerLimitT ......
vue3版本下element-plus和antd-vue选哪个更好一些？
Vue 3 发布后，各家第三方库开始陆续重构并支持 Vue 3 ，国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢？ Element Plus 和 Ant Design Vue 3 都已不在支持 IE 了，并不是他们自己 ......
如何使用Vue实现滑动轮播图
Laravel是一个流行的PHP框架，它具有出色的可测试性，可以帮助开发人员在更短的时间内编写可靠的代码。但是，即使使用了这个框架，也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高，代码质量越高。在本文中，我们将分享几种技巧，帮助您提高Laravel应 ......
2024-01-09 改变antd组件样式（:global）
使用:global关键字来改变antd组件的样式，如要改变antd的样式.ant-table-title， 请在.ant-table-title之前再包一层样式，然后在这层样式里面去改变antd的样式就不会影响到其它.ant-table-title： .tableBox { :global { .a ......
一键导出antD dable(简单)
所需依赖: antdv $ npm install ant-design-vue@4.x --save ExcelJS $ npm install exceljs --save file-saver $ npm install file-saver --save demo.vue: <templat ......
opencv画实心箭头
opencv是一个很强大的图像工具，经常被用来做图像工作，今天分享一个opencv画二维图像的工具方法 opencv画箭头很简单，只要调用arrowedLine方法并设置相应参数就行，但是出来的效果确是这样的，如下图，这个箭头是空心的，我如果想要实心的箭头怎么办，对不起arrowedLine方法不支 ......
react+antd-mobile+vite移动端H5前端项目
React+antd-mobile+vite ($\color{red} {注意：} $)待解决问题 （1）高版本路由第一次切换tab跳路由会出现闪烁,路由切换会延迟导致tab无法触发active(预计和缓存组件不更新路由参数有关) （2）使用ReactDOM.createRoot实例化项目，在结合 ......
Warning: [antd: Modal] Static function can not consume context like dynamic theme. Please use 'App' component instead.
react 的model.confirm报错，它意味着你在使用动态主题（Dynamic Theme）时不能在静态函数中使用上下文，需要使用contextHolder const [modal, contextHolder] = Modal.useModal(); React.useEffect(() ......
TS自动轮播图
App开发中经常用到这种轮播图组件。 最近在做Vue商城类的应用时正好用到，整理记录一下一遍后续使用。主要逻辑就是通过定时器间隔一定时间移动显示内容到对应位置改变offset，需要特殊处理的地方是滚动到最后一页时，把首页拼接到后边，下一次滚动时滚到第一页然后重置，形成循环往复自动播放。本组件还添加了 ......
antd-vue Modal.confirm方法 执行确定事件弹窗没关闭
vue版本：3.4.x antd-vue版本： 4.0.8 原因：是vue更新到3.4.x版本，某些api和antd-vue不兼容 解决方式：将vue版本锁定3.3.4 ......
使用antd Popover乱飘
开发时碰到Popover遮挡Modal弹窗，以及当Popover对应元素上方元素改变高度时，Popover位置没有随着元素移动。于是做了如下处理 <Popover content={<>11111111</>} arrowPointAtCenter autoAdjustOverflow zIndex ......
css+html 实现带箭头的流程步骤条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .navs { height: 50px; line-height: 50px; padding-top: 10px ......
箭头函数
箭头函数 1. this是静态的，永远指向函数声明时所在作用域的this值，比如在全局作用域下，箭头函数的this就是window； 2. 箭头函数没有构造函数； 3. 箭头函数没有参数arguments； 4. 箭头函数的还可以进一步简写： 1). 当且仅当只有一个参数时，可以省略小括号； ......
使用css绘制箭头
使用css也能直接写出箭头符号，这样不用都使用图片能减少打包的大小。下面是一些常用箭头的css写法： // 向上的箭头 <view class="button-up"></view> // css的内容 .button-up { position: relative; padding: 5px; m ......
React 之使用 antd 实现全局 loading
使用 antd 的 Spin 实现 Loading 代码如下： fullLoading.tsx import ReactDOM from "react-dom/client"; import { Spin } from "antd"; // 全局加载 loading // 当前请求的个数 // 当同 ......
React Antd Table 数据渲染按钮触发onClick事件解决办法
react在渲染时会触发table里面的rander函数下的onClick方法 我的onClick是触发Modal 弹窗 且close后还是会一直触发Modal弹窗 初始代码如下 { title: '操作', key: 'operation', fixed: 'right', width: 100, ......
antd QRCode 二维码清晰度调整
<QRCode size={400} type="svg" bordered={false} value={qrCode} errorLevel="L" bgColor="#fff" style={{ marginBottom: 16, }} /> 可以通过 size的大小来控制清晰度也可以通过ty ......
antd 不用Form onSubmit 如何完成必填项的校验
antd Form表单校验必填项等，如果按钮不是使用 htmlType="submit"，那么可以使用validateFields来校验数据。 代码如下： try { await form.validateFields(); // 校验数据 } catch (e) { console.log('e' ......
react使用antd Table单元格中文字超出时省略
实现效果 使用antd中的Table，设置固定列宽，当文字超出时省略，先看实现效果： 部分代码 使用ellipsis进行省略，使用Tooltip(引入自antd)展示全部的内容。 const TABLE_COL_WIDTH = 200; const columns = [ { title: '项目名 ......
react+antd 需求demo实现
BoxSelectionComponent.tsx import React, { useState } from 'react'; import { Modal, Button, Table, message } from 'antd'; const BoxSelectionComponent: ......
函数写法 : 箭头函数+解构表达式
// 1. 函数参数的默认值 // 原方式 function add(a, b) { b = b || 1; return a + b; } //只传一个参数 函数里面设置了 b为 空的情况 值为1 console.log(add(10)); // 11 // 新写法 , 在参数中给定一个默认值 f ......
antD——popover气泡卡片宽度过窄，鼠标移入时第一次位置不正确
参考：https://www.jianshu.com/p/6f96f26f4a6c/ 原效果： 修改后效果： 原因： 初次渲染的时候组件未能正确的估计到图片的大小，所以会默认按照文字显示，导致气泡出现在偏移的位置。 解决方法： 在组件初次加载的时候就给它指定好宽高即可解决问题。 <Popover p ......
win11桌面图标去掉小箭头
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" /v 29 /d "%systemroot%\system32\imageres.dll,197" /t reg_s ......
react antd table react-sortable-hoc DraggableBodyRow 拖拽及禁用指定行拖拽
原文地址：基于antd树形表格table的拖拽排序效果实现 - 掘金 (juejin.cn)思路片段： const DraggableBodyRow: React.FC<any> = ({ className, style, ...restProps }) => { const index = cu ......
antd Pro组件ProFormList实现自定义action
antd Pro组件ProFormList实现自定义action ProFormList是ant design pro的结构化数据组件，通常用来实现动态表单。 现在有个需求，除了组件自带的删除和复制，还需要增加两个按钮来实现每个item位置的上下移动，如图所示： 查看官方文档，组件有提供自定义act ......