- 2024-08-22tanstack react-form antd示例
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
- 2024-08-20Antd-React-TreeSelect前端搜索过滤
在开发过程中,但是antd中的搜索会把多余的也会带出来就例如下图,我们本想去搜索1但是他会把其子节点都带出来,其实我们的本意是像搜2一样或者当中间隔层处理但是我们该如何解决这样的问题呢如何做到下面两种情况(1)搜索过滤掉不匹配的内容只留下匹配的内容这是没有搜索之前这是
- 2024-08-14antd模板工程
pnpmcreatevite@latestmy-project----templatereactcdmy-projectpnpminstall-Dtailwindcsspostcssautoprefixernpxtailwindcssinit-ptailwind.config.js:/**@type{import('tailwindcss').Config}*/exportdefault{corePlugins:{
- 2024-08-12使用Vite+TS+Antd构建React项目
安装Vitenpminstall-gvite#yarnglobaladdvite创建React项目vitecreatemy-react-app--templatereact-ts安装ReactRouternpminstallreact-router-dom@types/react-router-dom#yarnaddreact-router-dom@types/react-router-dom安装AntDesign
- 2024-08-09antd-tabs切换数据重复渲染
两个tabs来回切换的时候,发现一直重复渲染数据,在两个tabs的展示上加一个flag标识,然后用v-if,判断,点击到tab1的时候,flag等于tab1,然后渲染tab1,点击到tab2的时候,flag等于tab2,然后渲染tab2,这样可以避免重复渲染 如下:在handleChangeActivekey方法里设置,点击tab1的时候,让tab1等于tr
- 2024-08-08styled-components 怎么定制 antd 组件的样式
以Card组件为例说明,要使用styled-components定制AntDesign的Card组件样式,可以按照以下步骤进行:1.安装styled-components首先,确保你已经安装了styled-components和babel-plugin-styled-components(如果需要):npminstallstyled-componentsnpminstall--save
- 2024-08-06WHAT - Table 表格组件系列(一)
目录前言antdvsantdProComponents体验区别antdTableantdProTable前言Table可以说是很多业务系统最重要的一个开发场景。在很多组件库,对于Table组件的封装高度完善。今天我们将开始通过antd的Table组件和antdProComponents的ProTable组件来进行学
- 2024-07-31AntD单位搜索树两种情况(第一种情况:全局已有数据下过滤、第二种情况:根据输入内容搜索查找)
a-tree-select <a-tree-select style="width:260px" v-model:value="formState.userOrgCode" show-search :show-checked-strategy="SHOW_PARENT" :tree-data="TreeData"
- 2024-07-18二次封装antd的ProTable、EditableProTable,结合use-antd-resizable-header,做一个列可伸缩的表格组件
原先是一个项目模块内需求,迭代的时候领导要求项目全面翻新,所有表格都要可伸缩列如果一个一个页面写伸缩列的话,每个页面都要引用一次use-antd-resizable-header,有点累赘找了网上,暂时没看见这个有人整理这个组件。直接上代码importProTablefrom"@ant-design/pro-table";i
- 2024-06-18antd table 滚动到指定行方法
查了Ai给的方法是tableRef.current.scrollToRow(0);但是实际上用地antd3压根没有这个方法。分享一下我自己想的一个简答的办法。1、需要定位的行要有唯一的标识例如id。letdata=[{id:1},{id:2},{id:3},] 这个id是为了方便找
- 2024-06-13Vue Antd Admin本地部署
官网:https://doc.vue-antd-admin.pages.dev/github地址:https://github.com/iczer/vue-antd-admin/tree/basic 1、basic分支本地部署(开发基于此分支)克隆项目basic分支到本地->>下载依赖:npminstall->>启动项目:npmrunserve 2、master分支本地部署(研究基于此分支-试
- 2024-05-29react使用antd实现表格的时间排序
importReactfrom'react';import{Table}from'antd';importmomentfrom'moment';constdata=[{key:'1',date:'2018-01-11T12:00:00Z',},{key:'2',date:'2
- 2024-05-22antd 的 ProTable 通过rowClassName 设置行的字体颜色时,固定列fixed不生效的问题
1、其他列是已经生效了,但是固定列是没有生效的 constrowClassName=(record)=>{returntableTreeSearchKey.includes(record.key)?'selected-row':'';};<ProTable ...... rowClassName={rowClassName}> 2、分析原因:固定列的子组件也有color属性,覆盖
- 2024-05-212024-05-21 Module not found: Error: Can't resolve 'ant-design-vue/dist/antd.css' in &
报错: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
- 2024-05-13antd upload action 不写(前端解析内容)
在使用AntDesign的Upload组件时,如果不提供action属性,那么文件的上传处理需要通过customRequest属性来自定义实现。以下是一个不使用action属性,而是通过customRequest实现文件上传的例子: importReactfrom'react';import{Upload,message,Button}from'antd';imp
- 2024-05-08antd在form中一个select设置另一个select
需求:所属网络(select)变化的时候,对应空投合约(select)也跟着变化。 constonChainChange=(chainId:any)=>{setCurrChainId(chainId)constcurrOptions=extraObj.airdropContractFormOptions.map((item:any)=>{if(item.network_id===chainId){
- 2024-05-07antd下拉选择框搜索配置:filterOption
<SelectallowClearmode="multiple"showArrow={true}showSearch={true}filterOption={(inputValue,option)=>option?.props?.label.includes(inputVal
- 2024-05-03antd表格日期排序
{dataIndex:'contractSignDate',key:'contractSignDate',title:'合同签订日期',width:120,ellipsis:true,sorter:(a,b)=>moment(a?.contractSignDate).valueOf()-moment(b?.contractSignD
- 2024-05-03antd日期选择框,前后日期增加限制
constdisabledDateStart=useCallback((current)=>{if(!contractEndDateValue){returnfalse}else{returncurrent&¤t>contractEndDateValue;}},[contractEndDateValue])constdisabledDateEnd=
- 2024-04-282024-04-28 记录antd-img-crop参数设置
前言:以前在做富文本编辑的时候,关于图片裁剪部分使用了antd-img-crop,忘了还有那些可使用的参数,现在上网查找并记录下来吧。antd-img-crop:一个图片裁剪插件,用于包装antd组件库中的upload组件。其官网地址在此:https://github.com/nanxiaobei/antd-img-crop安装:pnpmaddantd-img
- 2024-04-17Antd表单FormList
Antd表单FormList❓:初始化值一两条数据
- 2024-04-17antd pro table 单元格 loading
前言:在protable单元格中增加loading,还真没思路,看render()方法的四个参数,感觉都用不上。后来在朋友的帮助下用如下方法解决。 importReact,{useState}from'react';import{Space,Spin,Table}from'antd';//发空投loadingconst[loading,setLoading]=useSt
- 2024-04-09antd popover组件二次封装children显示
importReact,{PropsWithChildren}from'react';import'./index.scss';import{Popover}from'antd';exportinterfaceDictPopoverCompProps{open:boolean;keyWords:string;}//词库联想气泡constDictPopoverComp=(prop
- 2024-03-29页面全屏后antd的下拉框下拉选项不出现的问题
最近碰到数据可视化页面需要全屏的功能,但是全屏之后antdesignofvue组件的下拉框点击之后无法出现下拉选项。原因:下拉框的下拉部分父节点默认是body,全屏后body元素被挡住了全屏功能实现:<divclass="large-screen"ref="el"><divclass="large-screen-full-btn"@click=
- 2024-03-21Antd+ProComponent管理系统中的部分业务封装
本文记录在我司后台管理系统中,自己对部分业务的一些封装。业务封装涉及的技术栈为Antd+ProComponent+zustand权限由于此项目的权限精度并没那么高,后台采用ACL权限控制而不是RBAC,仅根据角色来判断权限,因此可能无法适配所有业务场景,但是可以参考思路。此处封装了两个权限