ProTable 自定义查询表单项 -- 树结构（SelectTree）

爱被打了一巴掌 2023-10-05 21:51 57阅读 0赞

## 前言 ##

`React` 组件库 `Antd Pro` 提供了提供了丰富的组件，其中 `ProTable` 就非常强大。`ProTable` 会根据配置自动生成表格的查询 `Form` 表单，`Form` 可以通过配置 `valueType` 的取值来实现不同的渲染需求，如常见的 `select`、`password`、`date`、`time` 等，类型非常丰富，真的很贴心。

--------------------

## 一、需求 ##

但是还是不够用，比如没有提供类似于树结构的表单项，如下图所示需求  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16]

## 二、代码片段 ##

### 2.1 columns 配置 ###

因为数据表展示使用名称(`deptName`)，而查询使用ID(`deptId`)，所以有以下两个配置，分别使用属性 `hideInTable: true` 、`hideInSearch: true,` 做了相应的显示隐藏

{
        
          title: '部门',
          dataIndex: 'deptId',
          hideInTable: true,
          renderFormItem: (_, fieldConfig, form) => {
        
            if (fieldConfig.type === 'form') {
        
              return null;
            }
            const status = form.getFieldValue('state');
            if (status !== 'open') {
        
              return (
                // value 和 onchange 会通过 form 自动注入。
                <TreeSelect
                  showSearch
                  treeData={
        treeData}
                  treeDefaultExpandAll
                  allowClear
                  dropdownStyle={
        {
         maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择部门"
                  treeNodeFilterProp="title"
                />
              );
            }
            return fieldConfig.defaultRender(_);
          },
        },
        {
        
          title: '部门',
          dataIndex: 'deptName',
          hideInSearch: true,
        },

### 2.2 `treeData` 获取 ###

*  获取方法

下面是主要逻辑代码片段

import {
         GetDeptTreeApi } from '@/services/system/dept/api';
    import {
         useEffect, useRef, useState } from 'react';
    import type {
         ActionType, ProColumns } from '@ant-design/pro-table';
    
    // table ref
    const tableRef = useRef<ActionType>();
    
    // treeSelehct 数据
    const [treeData, setTreeData] = useState<API.TreeSelectItem[]>([]);
    
    // 获取数据
    useEffect(() => {
        
        GetDeptTreeApi().then((res) => {
        
          if (res.success) {
        
            const data = res?.data || [];
            setTreeData(data);
          } else {
        
            setTreeData([]);
          }
        });
    }, [tableRef]);

*  数据结构  
    以下展示接口 `GetDeptTreeApi` 返回的数据结构

{
        
        "success":true,
        "data":[
            {
        
                "title":"采购部门",
                "value":"614ef11c0190656462ae3ca5",
                "children":[
                    {
        
                        "title":"采购一组",
                        "value":"614ef19f0190656462ae3ca6",
                        "children":null
                    },
                    {
        
                        "title":"采购二部",
                        "value":"61504ae42264cd2492d24854",
                        "children":null
                    }
                ]
            },
            {
        
                "title":"营销部",
                "value":"614ef2a8098b1a6d4c95c511",
                "children":[
                    {
        
                        "title":"营销一组",
                        "value":"614ef2f2098b1a6d4c95c512",
                        "children":null
                    }
                ]
            }
        ],
        "message":"操作成功",
        "code":"200"
    }

## 三、效果 ##

见**需求**中的图片

--------------------

## 总结 ##

该文通过 `Antd Pro` 中的 `SelectTree` 组件实现了需求，其中部分技术请查阅官方文档

*  [`ProTabel Columnus`配置文档][ProTabel Columnus]
 *  [`Columu`属性`valueType`可选值][Columu_valueType]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9a254a9aa5394827a4c83850cdc56930.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP5a2Q5a6d5LiB,size_20,color_FFFFFF,t_70,g_se,x_16
[ProTabel Columnus]: https://procomponents.ant.design/components/table#columns-%E5%88%97%E5%AE%9A%E4%B9%89
[Columu_valueType]: https://procomponents.ant.design/components/schema#valuetype