react / antd ProTable - 高级表格 合并行，子表头

Sunny2024-01-05 17:20

ProTable - 高级表格 合并行，以及ProTable的用法

xml 复制代码 
 key	React.key	确定这个列的唯一值，一般用于 dataIndex 重复的情况
dataIndex	React.key | React.key[]	与实体映射的 key，数组会被转化 [a,b] => Entity.a.b
valueType	ProFieldValueType	数据的渲染方式，我们自带了一部分，你也可以自定义 valueType
title	ReactNode |(props,type,dom)=> ReactNode	标题的内容，在 form 中是 label
tooltip	string	会在 title 旁边展示一个 icon，鼠标浮动之后展示
valueEnum	(Entity)=> ValueEnum | ValueEnum	支持 object 和 Map，Map 是支持其他基础类型作为 key
fieldProps	(form,config)=>fieldProps| fieldProps	传给渲染的组件的 props，自定义的时候也会传递
formItemProps	(form,config)=>formItemProps | formItemProps	传递给 Form.Item 的配置
renderText	(text: any, record: Entity, index: number, action: ProCoreActionType) => any	修改的数据是会被 valueType 定义的渲染组件消费
render	(dom,entity,index, action, schema) => React.ReactNode	自定义只读模式的 dom,render 方法只管理的只读模式，编辑模式需要使用 renderFormItem
renderFormItem	(schema,config,form) => React.ReactNode	自定义编辑模式,返回一个 ReactNode，会自动包裹 value 和 onChange
request	(params,props) => Promise<{label,value}[]>	从远程请求网络数据，一般用于选择类组件
params	Record<string, any>	额外传递给 request 的参数，组件不做处理,但是变化会引起request 重新请求数据
hideInForm	boolean	在 Form 中隐藏
hideInTable	boolean	在 Table 中隐藏
hideInSearch	boolean	在 Table 的查询表单中隐藏
hideInDescriptions	boolean	在 descriptions 中隐藏
rowProps	RowProps	在开启 grid 模式时传递给 Row，仅在ProFormGroup, ProFormList, ProFormFieldSet 中有效
colProps	ColProps	在开启 grid 模式时传递给 Col

valueType 列表

xml 复制代码 
password	密码输入框
money	金额输入框
textarea	文本域
date	日期
dateTime	日期时间
dateWeek	周
dateMonth	月
dateQuarter	季度输入
dateYear	年份输入
dateRange	日期区间
dateTimeRange	日期时间区间
time	时间
timeRange	时间区间
text	文本框
select	下拉框
treeSelect	树形下拉框
checkbox	多选框
rate	星级组件
radio	单选框
radioButton	按钮单选框
progress	进度条
percent	百分比组件
digit	数字输入框
second	秒格式化
avatar	头像
code	代码框
switch	开关
fromNow	相对于当前时间
image	图片
jsonCode	代码框，但是带了 json 格式化
color	颜色选择器
cascader	级联选择器
segmented	分段器
group	分组
formList	表单列表
formSet	表单集合
divider	分割线
dependency	依赖项

父子孙

typescript 复制代码 
{
      title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="父" />,
      dataIndex: 'bcMeteringUnit',
      valueType: 'text',
      hideInSearch: true,
      children: [
        {
          title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="子" />,
          dataIndex: 'bpcj',
          valueType: 'text',
          hideInSearch: true,
          render: (text: any, record: any, index: number) => {
            return {
              children: record.bpcj || '',
              props: {
                colSpan: index === 3 ? 0 : 1,
              },
            };
          },
          children: [
            {
              title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="孙" />,
              dataIndex: 'bpcj',
              valueType: 'text',
              hideInSearch: true,
              render: (text: any, record: any, index: number) => {
                return {
                  children: record.bpcj || '',
                  props: {
                    colSpan: index === 3 ? 0 : 1,
                  },
                };
              },
            },
            {
              title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="孙" />,
              dataIndex: 'jdSy',
              valueType: 'text',
              hideInSearch: true,
              render: (text: any, record: any, index: number) => {
                return {
                  children: record.jdSy || '',
                  props: {
                    colSpan: index === 3 ? 0 : 1,
                  },
                };
              },
            },
          ],
        },

合并行

xml 复制代码 
 {
      title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="产量(吨)" />,
      dataIndex: 'keyParameter',
      valueType: 'option',
      hideInSearch: true,
      width: 180,
      render: (text: any, record: any, index: number) => {
        let bpcjCl = record?.bpcjCl;
        let xxcjCl = record?.xxcjCl;

        return {
          children:
            index == 0
              ? [
                  '经典产量：' + bpcjCl,
                  // eslint-disable-next-line react/jsx-key
                  <br />,
                  '新型产量：' + xxcjCl,
                ]
              : '',
          props: {
            rowSpan: index == 0 ? 3 : index == 3 ? 1 : 0,
            colSpan: index === 3 ? 0 : 1,
          },
        };
      },
    },

源码

typescript 复制代码 
import DictTag, { DictValueEnumObj } from '@/components/DictTag';
import {
  getReportDeviceMappingAll,
  exportList,
} from '@/services/reportManager/EquipmentOfficeStatistics';
import { DeleteOutlined, ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  FooterToolbar,
  PageContainer,
  ProColumns,
  ProTable,
  ProFormInstance,
} from '@ant-design/pro-components';
import { FormattedMessage, useAccess, useIntl } from '@umijs/max';
import { Button, Modal, message, Tooltip } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import dayjs from 'dayjs';
import './index.scss';
import UpdateForm from './edit';
/**
 * 下载文件
 *
 *
 */
function downloadFile(blob: any, fileName: string) {
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName || 'exported_file';
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  a.remove();
}

const MenuTableList: React.FC = () => {
  // proTableFormRef
  const proTableFormRef = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();
  const access = useAccess();
  const [startTime, setStartTime] = useState<string>('');
  const [endTime, setEndTime] = useState<string>('');
  /** 国际化配置 */
  const intl = useIntl();

  const [params, setParams] = useState<any>({});

  const [modalVisible, setModalVisible] = useState<boolean>(false);
  /**
   * 导出数据
   *
   *
   */
  const handleExport = async () => {
    const hide = message.loading('正在导出');
    try {
      await exportList({ ...params })
        .then((res) => {
          if (res && res) {
            downloadFile(res, '设备办统计报表_' + new Date().getTime() + '.xls');
          }
        })
        .catch((err) => {
          console.log(err);
        });
      hide();
      message.success('导出成功');
      return true;
    } catch (error) {
      hide();
      message.error('导出失败，请重试');
      return false;
    }
  };
  const defaultTime = (value: any) => {
    const tmp = new Date();
    let month: any = tmp.getMonth();
    if (`${month}`.length != 2) {
      month = '0' + tmp.getMonth();
    }
    let date: any = tmp.getDate();
    if (`${date}`.length != 2) {
      date = '0' + tmp.getDate();
    }

    let start = tmp.getFullYear() + '-' + (month + 1);
    let end = tmp.getFullYear() + '-' + (month + 1);

    if (value == 'start') {
      return start;
    } else if (value == 'end') {
      return end;
    }
  };
  useEffect(() => {}, []);
  const columns: ProColumns<API.System.Menu>[] = [
    {
      title: <FormattedMessage id="basicconfig.menu.menu_name" defaultMessage="项目" />,
      dataIndex: 'name',
      valueType: 'text',
      hideInSearch: true,
      width: 80,
    },
    {
      title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="单位" />,
      dataIndex: 'unit',
      valueType: 'text',
      hideInSearch: true,
      // hideInTable: true,
      render: (text: any, record: any, index: number) => {
        return {
          children: record.unit || '',
          props: {
            colSpan: index === 3 ? 11 : 1,
          },
        };
      },
    },
    {
      title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="父" />,
      dataIndex: 'bcMeteringUnit',
      valueType: 'text',
      hideInSearch: true,
      children: [
        {
          title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="子" />,
          dataIndex: 'bpcj',
          valueType: 'text',
          hideInSearch: true,
          render: (text: any, record: any, index: number) => {
            return {
              children: record.bpcj || '',
              props: {
                colSpan: index === 3 ? 0 : 1,
              },
            };
          },
          children: [
            {
              title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="孙" />,
              dataIndex: 'bpcj',
              valueType: 'text',
              hideInSearch: true,
              render: (text: any, record: any, index: number) => {
                return {
                  children: record.bpcj || '',
                  props: {
                    colSpan: index === 3 ? 0 : 1,
                  },
                };
              },
            },
            {
              title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="孙" />,
              dataIndex: 'jdSy',
              valueType: 'text',
              hideInSearch: true,
              render: (text: any, record: any, index: number) => {
                return {
                  children: record.jdSy || '',
                  props: {
                    colSpan: index === 3 ? 0 : 1,
                  },
                };
              },
            },
          ],
        },
        {
          title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="子" />,
          dataIndex: 'xxSc',
          valueType: 'text',
          hideInSearch: true,
          // colSpan:index === 3?0:1,
          render: (text: any, record: any, index: number) => {
            return {
              children: record.xxSc || '',
              props: {
                colSpan: index === 3 ? 0 : 1,
              },
            };
          },
          children: [
            {
              title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="孙" />,
              dataIndex: 'xxSc',
              valueType: 'text',
              hideInSearch: true,
              render: (text: any, record: any, index: number) => {
                return {
                  children: record.xxSc || '',
                  props: {
                    colSpan: index === 3 ? 0 : 1,
                  },
                };
              },
            },
            {
              title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="孙" />,
              dataIndex: 'xxSy',
              valueType: 'text',
              hideInSearch: true,
              render: (text: any, record: any, index: number) => {
                return {
                  children: record.xxSy || '',
                  props: {
                    colSpan: index === 3 ? 0 : 1,
                  },
                };
              },
            },
          ],
        },
       
    },
   
    {
      title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="产量(吨)" />,
      dataIndex: 'keyParameter',
      valueType: 'option',
      hideInSearch: true,
      width: 180,
      render: (text: any, record: any, index: number) => {
        let bpcjCl = record?.bpcjCl;
        let xxcjCl = record?.xxcjCl;

        return {
          children:
            index == 0
              ? [
                  '经典产量：' + bpcjCl,
                  // eslint-disable-next-line react/jsx-key
                  <br />,
                  '新型产量：' + xxcjCl,
                ]
              : '',
          props: {
            rowSpan: index == 0 ? 3 : index == 3 ? 1 : 0,
            colSpan: index === 3 ? 0 : 1,
          },
        };
      },
    },
    {
      title: <FormattedMessage id="basicconfig.menu.component" defaultMessage="选择月份" />,
      dataIndex: 'dateTime',
      valueType: 'dateMonth',
      initialValue: dayjs(defaultTime('start'), 'YYYY-MM'),
      hideInTable: true,
    },
  ];

  return (
    <PageContainer>
      <div style={{ width: '100%' }}>
        <ProTable<API.System.Menu>
          headerTitle={intl.formatMessage({
            id: 'pages.searchTable.title',
            defaultMessage: '信息',
          })}
          actionRef={actionRef}
          formRef={proTableFormRef}
          rowKey="menuId"
          key="menuList"
          pagination={false}
          search={{
            labelWidth: 120,
          }}
          bordered
          toolbar={{
            settings: [], //列设置（刷新，密度，列设置）
          }}
          toolBarRender={() => [
            // hidden={!access.hasPerms('system:dept:export')}
            <Button
              type="primary"
              key="export"
              onClick={async () => {
                setModalVisible(true);
              }}
            >
              配置
            </Button>,
            <Button
              type="primary"
              key="export"
              onClick={async () => {
                handleExport();
              }}
            >
              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
            </Button>,
          ]}
          request={(params) =>
            getReportDeviceMappingAll({ ...params }).then((res) => {
              setParams(params);
              let dataList: any = [];
              if (res.code == 200) {
                let data = res.data;
                dataList = [
                  {
                    name: '水',
                    unit: 'm³',
                    bpcj: data.bpcjYlW,
                    xxSc: data.xxScYlW,
                    xxSy: data.xxSyYlW,
                    gfYl: data.gfYlW,
                    fscYl: data.fscYlW,
                    total: data.totalW,
                    dj: data.djW,
                    je: data.jeW,
                    dh: data.dhW,
                    xs: data.xsW,
                    zhNh: data.zhNh,
                    bpcjCl: data.bpcjCl,
                    xxcjCl: data.xxcjCl,
                    jdSy: data.bpcjSyYlW,
                  },
                  {
                    name: '电',
                    unit: 'kW.h',
                    bpcj: data.bpcjYlE,
                    xxSc: data.xxScYlE,
                    xxSy: data.xxSyYlE,
                    gfYl: data.gfYlE,
                    fscYl: data.fscYlE,
                    total: data.totalE,
                    dj: data.djE,
                    je: data.jeE,
                    dh: data.dhE,
                    xs: data.xsE,
                    zhNh: data.zhNh,
                    bpcjCl: data.bpcjCl,
                    xxcjCl: data.xxcjCl,
                    jdSy: data.bpcjSyYlE,
                  },
                  {
                    name: '天然气',
                    unit: 'm³',
                    bpcj: data.bpcjYlG,
                    xxSc: data.xxScYlG,
                    xxSy: data.xxSyYlG,
                    gfYl: data.gfYlG,
                    fscYl: data.fscYlG,
                    total: data.totalG,
                    dj: data.djG,
                    je: data.jeG,
                    dh: data.dhG,
                    xs: data.xsG,
                    zhNh: data.zhNh,
                    bpcjCl: data.bpcjCl,
                    xxcjCl: data.xxcjCl,
                    jdSy: data.bpcjSyYlG,
                  },
                  {
                    name: '说明',
                    unit: ' ',
                    bpcj: ' ',
                    xxSc: ' ',
                    xxSy: ' ',
                    gfYl: ' ',
                    fscYl: ' ',
                    total: ' ',
                    dj: ' ',
                    je: ' ',
                    dh: ' ',
                    xs: ' ',
                    zhNh: ' ',
                    bpcjCl: ' ',
                    xxcjCl: ' ',
                    jdSy: '',
                  },
                ];
                setStartTime(data.startTime);
                setEndTime(data.endTime);
              }
              return {
                data: dataList,
                success: true,
              };
            })
          }
          columns={columns}
        />
      </div>
      <div style={{ background: '#ffffff', padding: '0 20px' }}>
        <div style={{ textAlign: 'right', lineHeight: '40px' }}>
          本次报表统计期间：{startTime}---{endTime}
        </div>
        <div className="flex">
          <div>制表人：</div>
          <div>部门负责人：</div>
        </div>
      </div>
      {modalVisible && (
        <UpdateForm
          onSubmit={async (values) => {
            console.log(values);

            setModalVisible(false);
          }}
          onCancel={() => {
            setModalVisible(false);
          }}
          open={modalVisible}
        />
      )}
    </PageContainer>
  );
};

export default MenuTableList;
相关推荐
anOnion3 小时前
构建无障碍组件之Menu Button pattern
前端·html·交互设计
用户47949283569153 小时前
claude Fable用不了？把Gpt 5.5pro接到你的claude code里
前端·后端
JieE2123 小时前
LeetCode 101. 对称二叉树｜JS 递归 + 迭代双解法，彻底搞懂镜像判断
javascript·算法
冬奇Lab6 小时前
AI Workflow 定义的四次演进：从 Markdown 到 JS 脚本，再到分布式多 Agent
javascript·人工智能·agent
zhangxingchao6 小时前
Kotlin常用的Flow 操作符整理
前端
IT_陈寒7 小时前
React的useState居然还有这种坑？我差点删库跑路
前端·人工智能·后端
Pedantic8 小时前
SwiftUI 手势笔记
前端·后端
橙子家9 小时前
浏览器缓存之【结构化数据库与缓存】： IndexedDB、Cache storage 和 Storage buckets
前端
user20585561518139 小时前
X6 中边悬浮置顶，规避 `mouseleave` 事件丢失问题
前端
李明卫杭州9 小时前
CSS aspect-ratio 属性完全指南
前端
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05GitHub 镜像站点06AI科技热点日报 | 2026年6月1日07AI一周事件 · 2026-06-03 至 2026-06-09082026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？09Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析10上线仅72小时被强制下架：Claude Fable 5 的短命