【图文并茂】ant design pro 如何实战使用 ProFormTreeSelect

于 2024-08-22 11:17:23 发布
阅读量1.1k 收藏 20
点赞数 22
分类专栏： ant design pro 文章标签： react.js javascript 前端框架 前端 个人开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39637597/article/details/141422651
版权

在这里插入图片描述
在这里插入图片描述
上一节 【图文并茂】ant design pro 如何统一封装好 ProFormSelect 的查询请求

这一节的内容会利用上一篇文章的内容的。

我们经常会实现一个远程数据调用的 select 框，不过有时候这个 select 是有层级的。

就像我们这个分类一样，有父分类，子分类的。

多层级。

怎么处理呢？

还是先实现后端。

后端

在这里插入图片描述
数据结构：

const permissionGroupSchema = new mongoose.Schema(
  {
    name: { type: String, required: true, unique: true },
    parent: { type: mongoose.Schema.Types.ObjectId, ref: 'PermissionGroup' },
  },
  { timestamps: true },
);

我这里只存了一个 parent ，就是上一级

这样就能找到所有关联关系，比如当前的所有的 children

你要存 children 也行，但是操作起来会复杂，但查询变得简单。

我的数据量很小，只存 parent 就够用的。

controller

onst getPermissionGroups = handleAsync(async (req: Request, res: Response) => {
  const { current = '1', pageSize = '10' } = req.query;

  const query = buildQuery(req.query);

  // 执行查询
  const permissionGroups = await PermissionGroup.find(query)
    .populate('parent') // Assuming you want to populate parent
    .sort('-createdAt') // Sort by creation time in descending order
    .skip((+current - 1) * +pageSize)
    .limit(+pageSize)
    .exec();

  const total = await PermissionGroup.countDocuments(query).exec();

  const getChildren = async (parentId: string | null): Promise<any[]> => {
    const children = await PermissionGroup.find({ parent: parentId })
      .populate('parent')
      .exec();
    return Promise.all(
      children.map(async (child) => ({
        ...child.toObject(),
        children: await getChildren(child._id),
      })),
    );
  };

  const getPermissionGroupsWithChildren = async (
    permissionGroups: any[],
  ): Promise<any[]> => {
    return Promise.all(
      permissionGroups.map(async (permissionGroup) => ({
        ...permissionGroup.toObject(),
        children: await getChildren(permissionGroup._id),
      })),
    );
  };

  const permissionGroupsWithChildren =
    await getPermissionGroupsWithChildren(permissionGroups);

  res.json({
    success: true,
    data: permissionGroupsWithChildren,
    total,
    current: +current,
    pageSize: +pageSize,
  });
});

接下来我去遍历循环 children ，把它的内容填充好就行。

在这里插入图片描述
响应的数据是这样的：

{
    "success": true,
    "data": [
        {
            "_id": "66b1b54ef8871ea52a7e3de9",
            "name": "认证管理",
            "createdAt": "2024-08-06T05:31:58.495Z",
            "updatedAt": "2024-08-10T02:24:31.070Z",
            "__v": 0,
            "children": [
                {
                    "_id": "66b1b00bb5d937a0aef34034",
                    "name": "权限",
                    "createdAt": "2024-08-06T05:09:31.292Z",
                    "updatedAt": "2024-08-10T02:24:41.759Z",
                    "__v": 0,
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "children": []
                },
                {
                    "_id": "66b6d2c9b9ad87dfa985f34f",
                    "name": "用户",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:39:05.563Z",
                    "updatedAt": "2024-08-10T02:39:05.563Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6d2ddb9ad87dfa985f362",
                    "name": "菜单",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:39:25.628Z",
                    "updatedAt": "2024-08-10T02:39:25.628Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6d2e9b9ad87dfa985f377",
                    "name": "角色",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:39:37.339Z",
                    "updatedAt": "2024-08-10T02:39:37.339Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6d2fdb9ad87dfa985f38e",
                    "name": "数据权限",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:39:57.756Z",
                    "updatedAt": "2024-08-10T02:39:57.756Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6d314b9ad87dfa985f3a7",
                    "name": "权限组",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:40:20.528Z",
                    "updatedAt": "2024-08-10T02:40:20.528Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b9ad348554e602536acc67",
                    "name": "认证管理菜单",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-12T06:35:32.560Z",
                    "updatedAt": "2024-08-12T06:35:32.560Z",
                    "__v": 0,
                    "children": []
                }
            ]
        },
        {
            "_id": "66adec30d647a4fde5546b1c",
            "name": "材料类目",
            "createdAt": "2024-08-03T08:37:04.433Z",
            "updatedAt": "2024-08-10T02:24:51.188Z",
            "__v": 0,
            "children": []
        }
    ],
    "total": 2,
    "current": 1,
    "pageSize": 10000
}

name 和 children 是关键。

最后提交给后端的数据肯定是 _id, 因为它才是唯一的。

name 是给用户看的，children 是一个层级关系。

前端

后端搞定了，就要搞前端。

import React from 'react';
import { ProFormTreeSelect } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import useQueryList from '@/hooks/useQueryList';
import { Spin } from 'antd';

const PermissionGroupSelect = ({ name, label }: { name: string; label: string }) => {
  const intl = useIntl();
  const { items: permissionGroups, loading } = useQueryList('/permission-groups');

  return (
    <Spin spinning={loading}>
      <ProFormTreeSelect
        name={name}
        rules={[{ required: false }]}
        width="md"
        label={intl.formatMessage({ id: label })}
        allowClear
        secondary
        fieldProps={{
          showArrow: false,
          treeDefaultExpandAll: true,
          filterTreeNode: true,
          showSearch: true,
          dropdownMatchSelectWidth: false,
          autoClearSearchValue: true,
          treeNodeFilterProp: 'name',
          fieldNames: {
            label: 'name',
            value: '_id',
            children: 'children',
          },
          treeData: permissionGroups,
        }}
      />
    </Spin>
  );
};

export default PermissionGroupSelect;

主要是有两个东西，一个是 loading

我用的是 Spin 组件

然后是这里：

fieldNames: {
            label: 'name',
            value: '_id',
            children: 'children',
          },

要跟我的后端响应数据对上的。

其它的没啥，编辑的时候要填充好数据，才能选中。

在这里插入图片描述
在这里插入图片描述

<ProForm
      initialValues={{
        ...values,
        parent: values?.parent?._id,
      }}
      onFinish={async (values) => {
        await onFinish({
          ...values,
        });
      }}
    >

这个地方，跟之前是一样的

完结

程序员随风
关注
专栏目录
C++开源界面库duilib的使用细节与实战技巧总结（实战经验分享）
dvlinker的技术专栏
07-29 1万+
本文详细分享C++开源界面库duilib的使用细节与实战技巧。
《C/C++实战专栏》介绍
最新发布
dvlinker的技术专栏
07-31 3万+
本文详细介绍《C/C++实战专栏》的主体内容构成。
antd不依赖protable等组件的接口请求方式，并实现完美下拉树功能（带模糊搜索功能）
test的博客
06-04 253
注意后端接口的数据符合要求{success:true/false,data}
antd proform中的select（ProFormSelect）使用
bsefef的博客
02-22 1981
<ProFormSelect label="角色可见范围" name="select2" mode="multiple" fieldProps={{//这里使用了select的onChange方法，必须使用这样的写法来进行调用onChange方法 .
performSelector详解
iOS开发专栏
11-15 6558
在项目中，常常用到performSelectorXXX之类的方法，而且有很多类似方法；今天就来召集一下！ 1.performSelectorOnMainThread:withObject:waitUntilDone: - (void)performSelectorOnMainThread:(SEL)aSelector withObject:(id)arg waitUntilDone
Ant Design Pro(5)-6.高级表单ProForm
AG.『Feng』的博客
10-18 5072
PrForm表单使用
ant design pro使用select添加特殊项实现禁用及清空回填项功能
weixin_46424838的博客
10-21 1280
需求: 1.选择 全院 时,其他项禁用 2.已选择其他项目后再选择全院,回填内容只保留 全院 坑: 因为整体是个查询条目,用form包裹了,所以组件的onChange等内容不能使用. 上代码: 渲染代码 <Form form={form} style={{ display: 'flex' }} onValuesChange={formChange}> <Form.Item name="locID" label="科室" s.
在AntDesignPro中的ProFormSelect组件中加入滚动加载及模糊搜索
当下即是最好
11-21 1391
ProComponents
大模型微调部署实战及类GPT工具的高效使用
热门推荐
herosunly的博客
07-24 6万+
本文主要介绍了专栏《大模型微调部署实战及类GPT工具的高效使用》的核心内容，希望对使用大语言模型的同学们有所帮助。 文章目录 1. 前言 2. 专栏亮点 3. 你的收获 4. 详细目录
GP_ProEx实战培训教材
04-02
GP_ProEx实战培训教材是一份专注于GP_ProEx系统的培训材料，它的内容设计旨在图文并茂地展现如何操作和管理报警系统，帮助用户掌握和理解历史报警画面的功能，以及如何进行报警的监控、显示、操作和数据存储等方面的...
TreeSelect关于树的渲染
01-20
//父节点 renderTreeNode(orgtree) { let treeNode = []; orgtree.map((ele, index) => { treeNode.push( {this.renderChildOne(ele)} ) }) return treeNode; }; //一级子节点 renderChildOne(ele) { let childLevel1 = []; if(ele.data){ ele.data.map((ele, index)
使用Windbg调试目标程序去分析异常的两实战案例分享
dvlinker的技术专栏
02-22 2万+
使用Windbg动态调试目标程序去分析异常的两实战案例分享。
记录 @ant-design/pro-form 表单身份证号联动
掘金博客名称相同
05-15 1856
记录 @ant-design/pro-form 表单身份证号联动
ant design pro v5 之 ProForm自定义表单项
无缺的博客
04-24 7228
需求背景：ProForm 默认提供的表单项无法满足项目开发 解决方案：ProForm本身是在原来的Ant Design Form 的基础上增加一些语法糖和布局设置等等，那我们就看看ProForm是如何做的不就行了 了解之后得知：ProForm的表单代码是通过如下方式来创建的： const ProFormText = (props) => { return ( <ProForm.Item {...props}> <Input placeholder={p
9.Ant Design Pro Form.List多层嵌套
11-24 3066
Ant Design Pro Form.List多层嵌套
[ React+ant Design] ProFrom高级表单 - 基本的几种格式验证
设计师工作日常
01-24 2046
关于react组件库 ProForm 高级表单中基本的几种格式验证
antDesignPro ProForm表单里使用dependencies属性
m0_63788547的博客
04-17 551
antDesignPro ProForm表单里使用dependencies属性
【后台管理系统】—— Ant Design Pro组件使用（一）
柳柳66的博客
11-22 1139
一、搜索Search 搜索框 <Search placeholder="请输入关键字" defaultValue={kw && kw != 'null' ? kw : ''} className={styles.search} onChange={() => this.handleKwChang...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员随风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值