【图文并茂】ant design pro 如何用 renderFormItem 结合 TreeSelect 实现一个多层树级搜索

本文主要是介绍【图文并茂】ant design pro 如何用 renderFormItem 结合 TreeSelect 实现一个多层树级搜索,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述
在这里插入图片描述
上一篇 【图文并茂】ant design pro 如何优雅地实现查询列表功能

如上图所示

比如我们经常要查一些,商品分类下的所有的商品

类似这样的需求如何做。

我们以菜单为例,我们可以查找某个父类下的所有子菜单

当然最简单的做法,是提供一个 input text 框,让其输入菜单名称来查。

但是为了更好的用户体验,我们直接让客户去选,而不是输入菜单名

在这里插入图片描述

前端

前端的实现比较简单

直接上代码:

    {title: intl.formatMessage({ id: 'parent_category' }),dataIndex: ['parent', 'name'],// @ts-ignore// eslint-disable-next-line @typescript-eslint/no-unused-varsrenderFormItem: (_, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {if (type === 'form') {return null;}return (<TreeSelectshowSearchstyle={{ width: '100%' }}dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}placeholder={intl.formatMessage({ id: 'select_parent_category' })}allowCleartreeNodeFilterProp="name"fieldNames={{ label: 'name', value: '_id' }}treeDefaultExpandAlltreeData={menus}loading={loading}{...fieldProps}/>);},},

TreeSelect 中的数据肯定是查出来的

这个 menus 肯定是远程查询到的。

关于这块的内容可以看之前的文章。

  const { items: menus, loading } = useQueryList('/menus');

其实主要就是利用 renderFormItem 这个参数。

填充好组件就行。

TreeSelect 是有层级关系的。

在这里插入图片描述

如果不需要

可以用 Select 就没有层级了
类似它:
在这里插入图片描述

 {title: '角色',width: 150,dataIndex: 'roles',renderText: (val: {name: string}[]) => val && val.map(role => role.name).join(', '),// @ts-ignorerenderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {if (type === 'form') {return null;}return (<Form.Item name="roles"><SelectfilterOption={(input, option: any) =>(option?.label ?? '').toLowerCase().includes(input.toLowerCase())}showSearchoptions={roles.map((role: any) => ({label: role.name,value: role.id}))}allowClearplaceholder="请选择角色"/></Form.Item>);return defaultRender(_);}},

请求参数

这里值得注意的是要关注它的请求参数

在这里插入图片描述
点击查询之后,请求参数是这样的:

传的是 父级的 _id

后端

参数是怎样的,无所谓,只要对了,只要能传 _id 就行。

后端只需要取到值即可

const buildQuery = (queryParams: any): any => {const query: any = {};if (queryParams.name) {query.name = { $regex: queryParams.name, $options: 'i' };}if (queryParams.path) {query.path = { $regex: queryParams.path, $options: 'i' };}if (queryParams.parent) {try {query.parent = JSON.parse(queryParams.parent).name;} catch (error) {console.error('Failed to parse parent JSON:', error);query.parent = null;}} else {query.parent = null;}// Add recursive children queryif (queryParams.children) {query.children = [{ 'children.name': { $regex: queryParams.children, $options: 'i' } },// Add conditions for other child properties if needed];}return query;
};

主要还是这里:

  if (queryParams.parent) {try {query.parent = JSON.parse(queryParams.parent).name;} catch (error) {console.error('Failed to parse parent JSON:', error);query.parent = null;}} else {query.parent = null;}

其实那个 name 就是 _id ,查一下即可

model 是这样的:

const menuSchema = new mongoose.Schema({name: { type: String, required: true },path: { type: String, required: true },parent: { type: mongoose.Schema.Types.ObjectId, ref: 'Menu' },permission: {type: mongoose.Schema.Types.ObjectId,ref: 'Permission',required: true,},},{ timestamps: true },
);

完结。

  • ant design pro 如何去保存颜色
  • ant design pro v6 如何做好角色管理
  • ant design 的 tree 如何作为角色中的权限选择之一
  • ant design 的 tree 如何作为角色中的权限选择之二
  • ant design pro access.ts 是如何控制多角色的权限的
  • ant design pro 中用户的表单如何控制多个角色
  • ant design pro 如何实现动态菜单带上 icon 的
  • ant design pro 的表分层级如何处理
  • ant design pro 如何处理权限管理
  • ant design pro 技巧之自制复制到剪贴板组件
  • ant design pro 技巧之实现列表页多标签
  • 【图文并茂】ant design pro 如何对接登录接口
  • 【图文并茂】ant design pro 如何对接后端个人信息接口
  • 【图文并茂】ant design pro 如何给后端发送 json web token - 请求拦截器的使用
  • 【图文并茂】ant design pro 如何使用 refresh token 可续期 token 来提高用户体验
  • 【图文并茂】ant design pro 如何统一封装好 ProFormSelect 的查询请求
  • 【图文并茂】ant design pro 如何优雅地实现查询列表功能

获取 ant design pro & nodejs & typescript 多角色权限动态菜单管理系统源码
我正在做的程序员赚钱副业 - Shopify 真实案例技术赚钱营销课视频教程

这篇关于【图文并茂】ant design pro 如何用 renderFormItem 结合 TreeSelect 实现一个多层树级搜索的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1097385

相关文章

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一:使用GROUP BY和HAVING子句方法二:仅返回重复值方法三:返回完整记录方法四:

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方