antd
用强数据类型保护你的表单数据-基于antd表单的类型约束
接口数据类型与表单提交数据类型，在大多数情况下，大部分属性的类型是相同的，但很少能做到完全统一。我在之前的工作中经常为了方便，直接将接口数据类型复用为表单内数据类型，在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考，这种工作模式会引起各种隐藏bug，一定有更好的工程解决方... ......
Vite+Antd+tailwind初始化项目
Vite+Antd+tailwind初始化项目 使用vite创建项目 首先选择一个文件夹 进入命令窗口 使用vite创建项目 npm create vite@latest 初始化项目后 进入项目安装依赖 npm install 运行 npm run dev 使用Ant Design组件 安装 npm ......
解决antd与tailwind样式冲突问题（Button透明）
解决antd与tailwind样式冲突问题（Button透明） 1、在tailwind.config.js文件中添加 corePlugins: { preflight: false } tailwind.config.js变成 /** @type {import('tailwindcss').Con ......
antd表单中使用DatePicker，初始赋值、表单内容改变、表单提交报错
antd表单中使用DatePicker，初始赋值、表单内容改变、表单提交报错 原因：DatePicker接受数据类型必须为时间类型而不能是字符串，同理当表单数据改变或提交时需要对数据进行处理 <Form form={form} //初始赋值 initialValues={{ cleanDate: d ......
Antd Form 表单数据没法回显问题
Antd Form 表单数据没法回显问题 antd环境 4.*版本 问题复现 在一个组件中，给这个组件传递一个配置项，展示一些表单组件如 输入框、下拉框等组件，再传递一个数据，让其数据回显在我们的表单组件中 // 就正常一个表单，里面通过循环配置项展示formitem 里的内容，我们可以在formi ......
Antd Select框禁用后，文字不能复制问题解决
问题解决： .ant-select-disabled { cursor: default; // 去掉悬浮时出现的小手 .ant-select-selector { pointer-events: none; // 你可以看到元素，但你操作不到，操作会穿透触发到下层的元素 .ant-select-s ......
antd G6中建立图表时，让赋值速度慢于建图速度的一个解决方法
通过异步加载的方式将数据加载和图表建立过程分离，一个简单的例子： import { Chart } from '@antv/g6' // 创建一个空的图表容器 const container = document.getElementById('chart-container'); const ch ......
antd for vue3 table 使用rowClassName设置样式固定列不生效
依赖库版本 ： Vue 3 + antd for vue v3. X 样式问题 ：固定列背景色不生效，鼠标移入对应行背景色变为初始的白色 columns: [ { title: '装置', width: 100, dataIndex: 'areaName', fixed: 'left' }, ... ......
antd Input 只能输入大于零的正整数
onChange={(value: any) => { let val = Number(value); if (val < 1) { value = ''; setDeviceNumber(''); } else { setDeviceNumber(Number(value.replace(/[^ ......
2023-10-06 Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`? ==》 switch组件报错，在form.item添加valuePropName="checked"即可
该报错意思是你用的这个switch组件对应的属性应该是checked而不是value，后者应该是antd默认设置的属性，可以通过valuePropName来手动指定对应的属性值。 如： <FormItem name="status" label="状态" valuePropName="checked ......
react + react-router + less +antd 开发环境
react + react-router + less +antd 开发环境 react + react-router + less +antd 开发环境搭建 1.基于create-reacte-app，需要先安装这个脚手架，然后初始化项目。2.进入项目目录，首先 npm run eject 释放配 ......
09_electron-vue-antd环境搭建
electron-vue 很好解决，安装 antd 给我弄自闭了，最终是发现是版本问题。 先把 electron-vue 环境搭建好，然后去看项目中的 vue 版本： 我的是 vue2 就使用 快速上手 - Ant Design Vue (antdv.com) 这个版本，之前一直使用的 4.x 版本 ......
antd/fusion表格增加圈选复制功能
背景介绍 我们存在着大量在PC页面通过表格看数据业务场景，表格又分为两种，一种是 antd / fusion 这种基于 dom 元素的表格，另一种是通过 canvas 绘制的类似 excel 的表格。 基于 dom 的表格功能丰富较为美观，能实现多表头、合并单元格和各种自定义渲染（如表格中渲染图形 ......
umi4注册dva并且使用antd
搭建Umi4框架项目react语法 有simple app 和 ant design pro 后者属于umi max无需下载@umijs/plugins 直接在umirc.ts中注册 前者npm install @umijs/plugins 并在.umirc.ts中完成注册，antd不需要注册，np ......
ng-zorro-antd-mobile icon的实现及拓展
ng-zorro-antd-mobile icon的实现及拓展 首先在全局的Dom 上面会插入一个id 为 ANTD_MOBILE_SVG_SPRITE_NODE的雪碧图，这个里面是个svg,其中包含了所有的svg的定义，每个svg 采用图标名称作为id.代码如下 <svg xmlns="http: ......
antd tree的问题
antd 的tree有很多问题 1、常规的tree需要展开关闭只能通过左上角的小三角 如果想要单击行就能展开关闭的话，需要使用const { DirectoryTree } = Tree; 2、DirectoryTree 的问题。只能一级一级的展开和关闭，不能跨级关闭 这样是关闭不了的 3、Dire ......
关于antd Input 的defaultValue无法重新渲染的问题
最近在开发一个功能，table里面的Input组件。需要单行能够编辑，又要多行一起编辑，如下。 在这种情况下，就只能对Input组件使用value受控，而不能使用defaultValue受控。因为defaultValue受控在批量编辑的时候无效。 现在遇到的问题是，使用value受控，在onChan ......
antd限制开始时间与结束时间范围是30天，并不能选择当前日期之后的日期 vue3（默认展示近7天）
<a-range-picker :value="hackValue || dateArr" :disabled-date="disabledDate" style="width: 240px" separator="~" :allow-clear="false" @change="onChange" ......
【antd】动态增加表单项
import React, { useState } from 'react'; import 'antd/dist/antd.css'; import './index.css'; import { MinusCircleOutlined, PlusOutlined } from '@ant-de ......
解决antd Form的onChange方法改变的值与getFieldsValue获取的值不同步的问题
项目场景： 我想用antd写一个动态添加表单的Input框的功能，并且自动计算Input中的值，所以需要实时获取表单的数据。 问题描述在onChange时使用form.getFieldsValue()方法获取的表单值是上次改变的值，与当前onChange改变的值不一致。这个时候我就在网上找解决方法。 ......
antd vue 解决a-select下拉菜单跟随页面滚动
问题描述： antd a-select 下拉菜单 会跟着滚动一块走 官方原话：getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位 解决方案 ： 这样就ok了 :getPopupContainer="trigger ......
antd5 日期组件英文状态，如何解决？
## 为什么按照官网引入了，还是不好使呢？ 引入的少了,引入 'dayjs/locale/zh-cn' ```ts import { ConfigProvider } from 'antd'; import zhCN from 'antd/locale/zh_CN'; import 'dayjs/l ......
vue3 基于antd3.2.20封装表格（插槽）
```html ``` ```javascript // 表格中核心的js import { ref, onMounted, useSlots } from 'vue' const slots = useSlots() // 自动获取父组件传递过来的插槽 // 获取父组件过来的插槽数量，便于循环 c ......
antd-ui中的table组件的使用
html代码： <a-table :columns="columns" :data-source="data" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, }" style="margin ......
Antd的filterOption的使用
<Select mode="multiple" placeholder="请选择组成辅料" style={{ width: '100%' }} optionFilterProp="children" filterOption={(input, option) => { console.log((op ......
基于antd-input & tsx封装一个按固定位数、固定符号分隔内容的输入框
/** * 可在每四位字符间插入一个空格的输入框 */ import { Input } from 'antd'; import { useEffect } from 'react'; const InputGap = (props: any) => { const { useGap, value, ......
在AntD的table里面实现点击按钮跳转路由
需求：在AntD的table组件的操作栏里面，实现点击按钮跳转到路由指定路由，并携带参数 方法1： ``` // 引入 import { useHistory } from "react-router-dom"; // 处理逻辑 let history = useHistory(); const o ......