import{useForm}from"@tanstack/react-form";import{zodValidator}from"@tanstack/zod-form-adapter";import{z}from"zod";importtype{FieldApi}from"@tanstack/react-form";import{Button,Input,Radio

在开发过程中，但是antd中的搜索会把多余的也会带出来就例如下图，我们本想去搜索1但是他会把其子节点都带出来，其实我们的本意是像搜2一样或者当中间隔层处理但是我们该如何解决这样的问题呢如何做到下面两种情况（1）搜索过滤掉不匹配的内容只留下匹配的内容这是没有搜索之前这是

pnpmcreatevite@latestmy-project----templatereactcdmy-projectpnpminstall-Dtailwindcsspostcssautoprefixernpxtailwindcssinit-ptailwind.config.js:/**@type{import('tailwindcss').Config}*/exportdefault{corePlugins:{

安装Vitenpminstall-gvite#yarnglobaladdvite创建React项目vitecreatemy-react-app--templatereact-ts安装ReactRouternpminstallreact-router-dom@types/react-router-dom#yarnaddreact-router-dom@types/react-router-dom安装AntDesign

两个tabs来回切换的时候，发现一直重复渲染数据，在两个tabs的展示上加一个flag标识，然后用v-if，判断，点击到tab1的时候，flag等于tab1,然后渲染tab1，点击到tab2的时候，flag等于tab2，然后渲染tab2，这样可以避免重复渲染 如下：在handleChangeActivekey方法里设置，点击tab1的时候，让tab1等于tr

以Card组件为例说明，要使用styled-components定制AntDesign的Card组件样式，可以按照以下步骤进行：1.安装styled-components首先，确保你已经安装了styled-components和babel-plugin-styled-components（如果需要）：npminstallstyled-componentsnpminstall--save

目录前言antdvsantdProComponents体验区别antdTableantdProTable前言Table可以说是很多业务系统最重要的一个开发场景。在很多组件库，对于Table组件的封装高度完善。今天我们将开始通过antd的Table组件和antdProComponents的ProTable组件来进行学

a-tree-select <a-tree-select style="width:260px" v-model:value="formState.userOrgCode" show-search :show-checked-strategy="SHOW_PARENT" :tree-data="TreeData"

原先是一个项目模块内需求，迭代的时候领导要求项目全面翻新，所有表格都要可伸缩列如果一个一个页面写伸缩列的话，每个页面都要引用一次use-antd-resizable-header，有点累赘找了网上，暂时没看见这个有人整理这个组件。直接上代码importProTablefrom"@ant-design/pro-table";i

查了Ai给的方法是tableRef.current.scrollToRow(0);但是实际上用地antd3压根没有这个方法。分享一下我自己想的一个简答的办法。1、需要定位的行要有唯一的标识例如id。letdata=[{id:1},{id:2},{id:3},] 这个id是为了方便找

官网：https://doc.vue-antd-admin.pages.dev/github地址：https://github.com/iczer/vue-antd-admin/tree/basic 1、basic分支本地部署（开发基于此分支）克隆项目basic分支到本地->>下载依赖：npminstall->>启动项目：npmrunserve 2、master分支本地部署（研究基于此分支-试

importReactfrom'react';import{Table}from'antd';importmomentfrom'moment';constdata=[{key:'1',date:'2018-01-11T12:00:00Z',},{key:'2',date:'2

1、其他列是已经生效了，但是固定列是没有生效的 constrowClassName=(record)=>{returntableTreeSearchKey.includes(record.key)?'selected-row':'';};<ProTable ...... rowClassName={rowClassName}> 2、分析原因：固定列的子组件也有color属性，覆盖

报错：Modulenotfound:Error:Can'tresolve'ant-design-vue/dist/antd.css'in'xxx'原因：引入的antd.css文件实际上应该是reset.css文件，是由于ant-design-vue的官网给的代码和实际下的包的文件不一致导致。解决方案：把import"ant-design-vue/dist/antd.css";改成import"ant

 在使用AntDesign的Upload组件时，如果不提供action属性，那么文件的上传处理需要通过customRequest属性来自定义实现。以下是一个不使用action属性，而是通过customRequest实现文件上传的例子： importReactfrom'react';import{Upload,message,Button}from'antd';imp

需求：所属网络（select）变化的时候，对应空投合约（select）也跟着变化。 constonChainChange=(chainId:any)=>{setCurrChainId(chainId)constcurrOptions=extraObj.airdropContractFormOptions.map((item:any)=>{if(item.network_id===chainId){

 <SelectallowClearmode="multiple"showArrow={true}showSearch={true}filterOption={(inputValue,option)=>option?.props?.label.includes(inputVal

 {dataIndex:'contractSignDate',key:'contractSignDate',title:'合同签订日期',width:120,ellipsis:true,sorter:(a,b)=>moment(a?.contractSignDate).valueOf()-moment(b?.contractSignD

 constdisabledDateStart=useCallback((current)=>{if(!contractEndDateValue){returnfalse}else{returncurrent&&current>contractEndDateValue;}},[contractEndDateValue])constdisabledDateEnd=

前言：以前在做富文本编辑的时候，关于图片裁剪部分使用了antd-img-crop，忘了还有那些可使用的参数，现在上网查找并记录下来吧。antd-img-crop：一个图片裁剪插件，用于包装antd组件库中的upload组件。其官网地址在此：https://github.com/nanxiaobei/antd-img-crop安装：pnpmaddantd-img

Antd表单FormList❓：初始化值一两条数据

前言：在protable单元格中增加loading，还真没思路，看render()方法的四个参数，感觉都用不上。后来在朋友的帮助下用如下方法解决。 importReact,{useState}from'react';import{Space,Spin,Table}from'antd';//发空投loadingconst[loading,setLoading]=useSt

importReact,{PropsWithChildren}from'react';import'./index.scss';import{Popover}from'antd';exportinterfaceDictPopoverCompProps{open:boolean;keyWords:string;}//词库联想气泡constDictPopoverComp=(prop

最近碰到数据可视化页面需要全屏的功能，但是全屏之后antdesignofvue组件的下拉框点击之后无法出现下拉选项。原因：下拉框的下拉部分父节点默认是body，全屏后body元素被挡住了全屏功能实现：<divclass="large-screen"ref="el"><divclass="large-screen-full-btn"@click=

本文记录在我司后台管理系统中，自己对部分业务的一些封装。业务封装涉及的技术栈为Antd+ProComponent+zustand权限由于此项目的权限精度并没那么高，后台采用ACL权限控制而不是RBAC，仅根据角色来判断权限，因此可能无法适配所有业务场景，但是可以参考思路。此处封装了两个权限