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

最新推荐文章于 2024-04-18 08:12:33 发布

小子宝丁

最新推荐文章于 2024-04-18 08:12:33 发布

阅读量4.6k

点赞数 3

分类专栏：前端小记文章标签： react.js

本文链接：https://blog.csdn.net/m0_47406832/article/details/120511442

版权

前端小记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

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

一、需求

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

二、代码片段

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"
}