antd pro，菜单管理模块

最新推荐文章于 2025-04-23 11:02:54 发布

“1204”

最新推荐文章于 2025-04-23 11:02:54 发布

阅读量1k

点赞数

文章标签：前端 react.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_39270642/article/details/125988198

版权

本文介绍了如何在Ant Design Pro项目中实现菜单管理模块。重点提及了使用ProTable组件时，设置`childrenColumnName={'childMenu'}`作为别名，并强调需要处理数据，当`childMenu`为空数组时，应返回空字符串，以避免展示不必要的展开效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

完整代码：

import React, { useRef, useState } from 'react';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useAccess, Access, FormattedMessage } from 'umi';
import { ActionType, ProColumns } from '@ant-design/pro-table/lib/typing';
import { Button, Space, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons/lib';
import { sysMenuTree } from '@/services/intelligent-operation-platform/sysApi';
import SysMenuEdit from './components/Edit';

const SysMenu: React.FC = () => {

  /** 权限 */
  const access = useAccess();

  /** ProTable的ref */
  const actionRef = useRef<ActionType>();
  /** 编辑弹窗显隐 */
  const [editModalVisible, handle_editModalVisible] = useState<boolean>(false);
  /** 当前选中行数据 */
  const [currentRow, setCurrentRow] = useState<API.SysMenuItem>({});

  /** 列 */
  const columns: ProColumns<API.SysMenuItem>[] = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '图标',
      dataIndex: 'icon',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
    },
    {
      title: '类型',
      dataIndex: 'type',
      renderFormItem: (_, { defaultRender }) => {
        return defaultRender(_);
      },
      render: (_, record) => (
        <Space>
          {
            record.type === 0 ?

最低0.47元/天解锁文章