antd专题
react antd table expandable defaultExpandAllRows 不生效问题
原因：defaultExpandAllRows只会在第一次渲染时触发 解决方案：渲染前判断table 的datasource 数据是否已准备好 {pageList.length > 0 ? (<TablerowSelection={rowSelection}columns={columns}dataSource={pageList}style={{ marginTop: 24 }}pagina
【Antd】Form.List的强大之处，Form.List使用方式细微讲解
设想场景 有时候我们会遇到一些复杂的需求，需要用Table嵌套Form.List，逐层嵌套渲染表格表单列表，填写完毕后提交的复杂需求。 由于表单项分布在数据的各个层级里，因此，如何回填表单值就成了一个比较棘手的问题，处理不好，很容易引发一些逻辑bug（例如表单重置后，数据回填异常等） 如何处理数据 其实，antd的form实例对象很强，只需要提供给它指定的field和索引i组成的formN
antd ProForm动态设置表单值
import { Button, Col, Form, message, Row } from 'antd';...const [form] = Form.useForm();const actionRef = useRef(null);...return (......<ProForm form={form} onFinish={handleFinish} style={{
React antd 样式不加载不展示
使用antDesign写页面，会发现，有时候样式不展示，因为有样式没有加载进去 发现前端import的是如下方式： import { Modal, Button, Row, Col, Input } from "antd/lib/index"; 改成下面的就好了。 import { Modal, Button, Row, Col, Input } from "antd";
antd vue switch组件怎么把值true、false改为uint32类型的1和0
背景 已知switch组件的checked属性默认是传入true 和 false的，但是有这样的业务情景，既需要使用的是开关，又需要传入的是整数，那么我们应该如何修改呢？ 解决方案 <a-form-item label="允许失败时保存"><a-switch :checked="switchValue === 1" @change="handleSwitchChange"></a-swi
Vue学习笔记：Vue+Antd封装菜单
需求：使用 Vue + Antd 搭建后台管理系统，封装无限下拉循环菜单 文档：Antd 第一步：搭建Vue脚手架，这里不做过多叙述。 第二步：导入 Antd 依赖 npm install antd 第三步：新建菜单组件 SiderMenu.vue <template><div style="width: 256px"><a-menu:selectedKeys="selected
Antd Form黑科技-监听表单值变化
useFormWatch 为啥要写这个hooks？主要是因为我们页面antd使用的是4.0版本，当时5.0还没有支持，而在一些业务场景中我需要监听某个表单值的变化来做一些回调处理，而Form组件的props中onValuesChange需要集中一个地方来写这些回调又不太方便于是便翻到了源码中RC_FORM_INTERNAL_HOOKS这个antd内置hooks事件，可以用来监听 import
react antd TreeSelect实现自定义标签
<ProFormTreeSelectlabel="接收对象"name="receiverObjects"colProps={{ span: 16 }}labelCol={{span: 6,}}wrapperCol={{span: 18,}}rules={[{ required: true }]}fieldProps={{showSearch: true,multiple: true,// aut
公共筛选组件（二次封装antd）支持代码提示
如果项目是基于antd组件库为基础搭建，可使用此公共筛选组件 使用到的库 npm i antdnpm i lodash-esnpm i @types/lodash-es -D /components/CommonSearch index.tsx import React from 'react';import { Button, Card, Form } from 'antd'
Antd Table 表格 拖拽列宽
antd 的表格组件的列宽，是通过width属性去初始化的，有时候渲染的内容不固定，这个宽做不到通用所以研究怎么实现表格列宽拖动，主要的实现步骤如下： 使用table的components API修改表格头部为 react-resizable提供的组件并在columns设置侦听函数，用于动态修改宽度 （onHeaderCell API）还需要设置css，让控制组件显示在正确位置 在实际的应用中，
Vue3 + TS + Antd + Pinia 从零搭建后台系统(四) ant-design-vue Layout布局，导航栏，标签页
书接上回本篇主要介绍： Layout布局，导航栏，标签页继续填充 目录 按需引入组件Layout布局，导航栏，标签页css样式 按需引入组件 使用unplugin-vue-components插件完成ant-design-vue组件的按需加载。 前文中已处理过，详情见前文 链接: Vue3 + TS + Antd + Pinia 从零搭建后台系统(一) 此处还需在tsconf
electron+antd进行桌面开发并打包教程
electron+antd进行桌面开发并打包教程 1、初始化工程目录并安装electron，(如果安装巨慢可换成淘宝源cnpm) npx create-react-app electron-testcd electron-testnpm install electron electron-builder cross-env --save-dev 2、在src目录下添加main.js
antd vue 输入框基础案例
11 Input 输入框 通过鼠标或键盘输入内容，是最基础的表单域的包装。 何时使用 需要用户输入表单域内容时。 提供组合型输入框，带搜索的输入框，还可以进行大小选择。 案例：基本用法 <script setup>import {ref, watch} from "vue";const value = ref("")watch(value, ()=>{console.log("valu
记录一下：vue3+antd-vue a-form包含a-table实现表格行内校验， 清除 指定行 指定字段 的校验
问题描述下： 目标VLAN值可以输入， 也可以点击后面的按钮进行弹窗选择。由于检验原因，光标失焦但是没有填写就会校验爆红，然后点击选择之后由于没有失焦过程没有触发校验，依然还是红的。这个时候就需要清除 目标VLAN值 的校验 实现去掉校验信息 解决方法关键代码： // 选择VLAN值弹窗回调const handleSubmitCallback = keys =>
React antd 怎么封装权限按钮
在 React 中使用 Ant Design（antd）封装一个权限按钮通常涉及到两个主要部分：按钮的渲染逻辑和权限的验证。以下是一个基本的步骤和示例代码，展示如何封装一个权限按钮： 步骤 定义权限：首先，你需要定义应用中的权限。这些权限可能是一个简单的字符串数组，或者是更复杂的对象结构。传递权限：将当前用户的权限作为 props 传递给需要显示权限按钮的组件。封装权限按钮：创建一个新的 Re
React antd 怎么封装枚举字典组件
在 React 中使用 Ant Design (antd) 封装枚举字典组件可以帮助你更方便地管理和使用枚举值。枚举字典通常用于将数据库中的数字或字符串代码映射为人类可读的标签或描述。 以下是一个简单的步骤和示例，说明如何封装一个枚举字典组件： 步骤 定义枚举字典数据：首先，你需要定义你的枚举字典数据。这通常是一个对象，其中键是枚举值，值是对应的标签或描述。创建组件：创建一个 React 组
antd 动态增减表单项默认呈现一组表单项
在Ant Design（antd）中，你可以使用Form.List组件来动态增减表单项。 import React from 'react';import { Form, Input, Button, List } from 'antd';const Demo = () => {const onFinish = (values) => {console.log('Received value
antd：动态获取菜单
修改 app.tsx 文件 修改 getInitialState 方法 export async function getInitialState(): Promise<{...menuData?: MenuDataItem[] | undefined;fetchMenuList?: Promise<MenuDataItem[] | undefined>;}> {...const fetch
【React】二次封装Antd的Table组件
使用Table并不难，但是每次使用都会伴随着很大一部分逻辑，如loding效果、表格分页筛选排序、调接口完毕后赋值等等，使用方法基本一致，所以可以将他们二次封装，从而减少代码量，提升代码可读性。 二次封装表格 import { Table, TableProps } from "antd"import { useFetchTableData } from "./useFetchTableDa
React项目，结合 Antd 的Upload上传组件实现上传前校验
背景 最近工作中，遇到这样一个需求：在登录首页，开发一个上传文件的功能，用户可以在该页面点击该区域上传文件，但是点击前需要做一些判断，若用户未登录，则直接弹出登录弹框；否则，弹出上传文件选择框。 准备工作 一开始，先去看官网，是否有该场景的 api，貌似有一个beforeUpload属性 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise
基于webpack+Vue3+JavaScript+antd+less+axios技术栈实现所有组件全局自动化注册
一、前言 最近在做一个项目，因为项目比较小，用户群体年龄跨度较大，同时对兼容性的要求较高，所以选择webpack+Vue3+JavaScript+antd+less+axios的技术栈，在开发的当中发现一个问题，原来在vue2当中，可以很简单就能实现的组件的全局自动化注册，在当前这套技术栈组合中不能使用，网上的教程大多都是偏向于typescript的，所以决定自己写一个。 二、实现方案 1、
DatePicker日期选择框（antd-design组件库）简单使用
1.DatePicker日期选择框 输入或选择日期的控件。 2.何时使用 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。 组件代码来自： 日期选择框 DatePicker - Ant Design 3.本地验证前的准备 参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_react+a
antd（react） ProFormUploadDragger（Upload）上传组件上传图片及省略图模糊展示
antd（react） ProFormUploadDragger（Upload）上传组件上传图片及省略图模糊展示 本文基于react+antd+ProComponents 需求：图片模糊展示（数据脱敏） 像营业执照、身份证这种，可能用户不希望自己操作的时候被其他人看见暴露了隐私 如果只是希望查看怎么让图片模糊的，可以直接直接下滑看到最后，之前的html和js代码我只是我怕以后做到相同功能不用
AntD Tree右键菜单-react-contexify
https://www.npmjs.com/package/react-contexify npm i react-contexify 使用版本：5.0.0 说明：5.0.0版本中没有MenuProvider，网上很多方案有MenuProvider是react-contexify老版本。 比如参考：https://github.com/ant-design/ant-design
AntD Pro Form动态绑定数据，initialValues动态数据
常用于列表数据编辑场景 * Modal属性destroyOnClose需为true，销毁 * Form属性initialValues={props.values}绑定数据 props为父组件参数 <Modalwidth={640}destroyOnClosetitle='配置'visible={props.visible}onCancel={() => {props.onCancel();