antd
【Antd】表单调整输入框对齐方式：
const formItemLayout = { labelCol: {//左边文字 xs: { span: 24 }, sm: { span: 6 }, }, wrapperCol: {//右边输入框 xs: { span: 24 }, sm: { span: 16 }, }, }; const ......
【Antd】表格超出隐藏，显示三点，触碰提示
clumns 行设置： 1 onCell: () => { 2 return { 3 style: { 4 overflow: 'hidden',//控制隐藏 5 whiteSpace: 'nowrap',//控制换行 6 textOverflow: 'ellipsis',//显示三点 7 curs ......
【React+Antd】表格增删改
Modal弹框进行增改，删除直接用filter进行删除 添加： 1 setTabledate([...tabledate, newD]); 删除： setTabledate(tabledate.filter((item) => item.key !== record.key)); 修改： const ......
解决antd form表单校验错误时，设置scrollToFirstError 不能滚动到第一个校验错误位置
使用antd form表单自带属性scrollToFirstError校验不通过时自动滚动到第一个校验错误位置，但是经常没有效果，手动实现一个滚动方法来处理 // 表单滚动到第一个报错处（antd） export const scrollToFirstError = () => { document ......
react + antd table列表自动滚动
/** * @file: table列表自动滚动，鼠标划入滚动暂停，鼠标划出滚动继续 */ const [dataSource, setDataSource] = useState([]) const [timer, setTimer] = useState() useEffect(() => { ......
antd 上传限制大小和文件类型
效果图： <a-upload-dragger name="file" action="上传的接口" @change="uploadHandleChange" //上传文件改变时的状态 :before-upload="beforeUpload" //上传文件之前的钩子 :file-list="file ......
Antd中设置 Form 初始值和清空Form表单输入框（转）
转自：Antd中清空Form表单输入框 设置 Form 初始值 法一：在 <Form.Item> 使用 defaultValue 设置默认值（一般没用） 法二：在 组件的 initValue 中设置初始值，但是注意每个字段的初始值必须是常量，不能是 state 状态 法三：通过 useEffect( ......
AntD框架的upload组件上传图片时遇到的一些坑
title: 09-AntD框架的upload组件上传图片时遇到的一些坑 publish: true 前言 本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 upload 组件。 前端做文件上传这个功能，是很有技术难度的。既然框架给我们提供好了，那就直接用呗。结果用的 ......
AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为
title: 10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为 publish: true 本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 upload 组件。 我在上一篇文章《前端AntD框架的upload组件上传图片 ......
react18中antd的select选择器组件自定义下拉框的内容
效果如图 导入组件和图标 import { Select } from 'antd' import { ManOutlined, WomanOutlined } from '@ant-design/icons'; const { Option } = Select; 数据 let userListO ......
Antd之表格暂无数据提示转换为中文
Antd默认的表格暂无数据提示是英文的no data，若要转换为中文。 1.在App.vue中加上a-config-provider。 <template> <a-config-provider :locale="locale"> <div id="app"> <router-view /> </d ......
react antd 函数式弹窗案例
1.弹窗函数 export const checkReviewTaskTipModal = async (checkResult: { status: boolean; mseeage: string; }) => { return new Promise((r, j) => { const can ......
基于Antd+DRF开发的一款JMeter测试报告服务
JMeter Report 基于Antd+DRF开发的一款JMeter测试报告服务，用于在JMeter接口测试中使用。 🌴 背景 JMeter是测试工作中常用的一款工具，除了压测还可以用来做接口自动化的测试。 从事测试多年，接口自动化也做过很多的尝试，有时候所在项目迭代较快，平常没有足够的时间 编 ......
react18中antd的Upload组件上传头像，并且拿到服务器返回的头像的url地址在页面中显示头像
业务需求：上传头像，上传完毕后拿到头像的url，把头像展示在页面中，最终把头像url和其他用户信息一起发送给服务器 上传头像流程 导入 Upload 组件和图标(一个加号，一个加载中) import { Upload } from 'antd'; import { PlusOutlined, Loa ......
设置antd中Table组件左侧部分复选框禁用
const rowSelections = { selectedRowKeys: selectedRows.map((item => item.id)), onChange: onSelectChange, getCheckboxProps: (record) => ({ disabled: rec ......
2023-04-13 [antd: Menu] `children` will be removed in next major version. Please use `items` instead.
问题描述：antd版本升级，需要对以往的版本的代码进行修改，版本>=4.20.0以上需要修改，<4.20.0则不用。 需要修改的组件为Menu，具体修改参考官方例子： // >=4.20.0 可用，推荐的写法 ✅ const items = [ { label: '菜单项一', key: 'item ......
antd 表单里加tooltip不生效问题
antd的form表单的label后面加一个问号icon，hover展示提示， 但是加进去之后，hover不提示，最后发现原因是因为labelCol，不清楚为啥，反正去掉就能提示， 加上就不提示， 所以最后把这个labelCol去掉了，自己在CSS里写的样式 修改antd form表单自己的样式，需 ......
React+Antd在使用form表单提交DatePicker日期框的时候会出现少八小时的情况
在使用antd做form表单提交的时候,突然发现了一个很有意思的bug.就是在使用datepicker组件日期框的时候会出现提交后少一天的问题 我在网上搜索了许多解决办法,也是困扰了我一天的时间,下面代码. let formData = JSON.parse(JSON.stringify(form. ......
Antd之a-date-picker和a-time-picker组件传值
使用a-date-picker和a-time-picker组件时传到后端，传参值为类似"2023-04-10T06:58:44.000Z"这样的字符串。 要恢复正常传值，可将前端传到后端日期格式统一为”YYYY-MM-DD HH:mm:ss”。 1.a-date-picker组件添加 show-ti ......
VUE-Antd开发，validate规则校验第一次为空，后面无论怎么输入都显示不可为空
问题描述 场景是修改弹窗，给数据赋值，其中数据有String 和 Array 第一次操作 多选框（数据类型是Array）输入为空并在输入框外点击，显示不可为空。 之后无论怎么输入都显示不可为空。（当你控制台输出校验value时，会发现里面的值永远是第一次操作的数据，而非为空） 可能原因 1️⃣rul ......
antd modal弹出框，渲染antv图表
弹出框的图标渲染获取不到dom，所以不能直接渲染，需要先判断Modal弹出框dom节点加载完成后，才能开始渲染。。。。。 快下班了，直接上全部代码，不解释了 <template> <a-modal v-model:visible="visible" :destroyOnClose="true" ti ......
Antd DatePicker 表单Value 转为 日期字符串格式
Antd DatePicker 表单Value 转为 日期字符串格式 遇到问题： Antd 4.x 版本和 5.x 版本中 DatePicker value 类型分别是： moment 对象和 dayjs 对象类型，但通常提交表单时候，后端一般都要求是日期字符串格式“2022-08-09”这样； 普 ......
antd 修改组件样式除了在全局修改还有其他方法
修改input 框的 border-radius 第一步 安装less yarn add less less-loader --save-dev 第二步 在需要修改的文件下新建antdStyle.less 配置 antdStyle.less 在文件引入@import '~antd/dist/antd ......
react根据antd下拉框监听事件带出表单输入框值
// 招待费根据招待人数，陪同人数，人均标准自动带出申请金额 peopleChange = (value,field) => { const {form} = this.props if (value null) { form.setFieldsValue({amount: 0}) return } ......
修改antd的table合并行之后CheckBox不能合并的问题
修改后的效果图如下： <template> <page-header-wrapper :title="false" :breadcrumb="{routes:[]}" > <div> <div class="list"> <a-table :columns="columns0" :row-key=" ......
解决antd中，select和DatePicker组件不跟随页面滚动的问题
在开发过程中，经常会使用到Select、DatePicker等组件，当这些组件在可滚动的区域内滚动时，你会发现该组件的选项框也会跟着滚动，产生分离 解决方法antd的官方API给我们提供了getPopupContainer属性，该属性是菜单渲染的父节点，默认是body。只要添加该属性，设置好父节点， ......
实现一个简易的antd表格拖拽
<a-table :columns="columns" :data-source="dataSource"> <template slot="icon" slot-scope="record"> <div style="cursor: pointer;" :draggable="true" @dra ......
Antd上传多个文件，其中与已上传的文件列表某个文件同名，覆盖同名文件并上传
上传多个文件，若其中有与已经上传的文件列表中有同名文件，后者覆盖掉同名文件并上传加入到已经上传的文件列表中。 <template> <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" ......
Antd上传多个文件中有文件与已上传的文件列表文件同名，覆盖已有的同名文件
场景：使用antd-design-vue中的upload时，通过后端保留上次上传过的文件列表，二次上传文件时，若与已上传文件列表中某个文件同名，则上传后覆盖掉已上传文件列表中的同名文件。 upload代码： <template><a-upload action="https://www.mocky. ......
【笔记】electron + react + antd
electron Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Li ......