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

最新推荐文章于 2024-05-20 18:29:30 发布
最新推荐文章于 2024-05-20 18:29:30 发布
阅读量1.2k 收藏 13
点赞数 8
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_C_sunny/article/details/135385951
版权

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

 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 列表

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	依赖项

在这里插入图片描述

父子孙

{
      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: '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,
          },
        };
      },
    },

源码

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;
Sunny
关注
  • 8
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
react-antd-multi-tabs-admin:ts+react+antd-多页签后台模板(纯净版，非 antd pro！)
05-06
:rocket:: 流行技术：使用 React/Redux/Antd 等前端前沿技术开发 :artist_palette:: 主题样式：使用流行的暗黑模式主题，支持深/浅色主题切换 特点 多 tab 页签:plus:右键菜单，提升效率 Redux 状态管理:plus:持久化...
react的ProTable
weixin_71854821的博客
11-19 377
react的ProTable, useEffect,request是 ProTable 最重要的 API，request会接收一个对象。对象中必须有data和success，如果需要手动分页total也是必需的。request会接管loading的设置，同时在查询表单查询时和params参数发生修改时重新执行。同时 查询表单的值和params参数也会带入。
antd table 增加底部合计行统计
2301_76278775的博客
03-29 1061
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体即可获取！！！[外链图片转存中…(img-E6Sg9ili-1711651067455)][外链图片转存中…(img-tJxRMsug-1711651067455)][外链图片转存中…(img-ACIozcQY-1711651067455)][外链图片转存中…(img-VG0aJmgW-1711651067456)]
react-antd表格合并及动态数表头处理
DT_XUE321的博客
04-18 953
antd表格合并及动态表头渲染
react-antd-table表头添加一个button
博客
11-13 716
需求：在table表头上添加一个add的button，如下图所示。因为table表头是columns渲染的，所以一时之间不知道怎么写~网上的方法是用插槽，比较麻烦，主要是我写的渲染不出来~实现：title可以返回函数~~~
React antd table使用react-resizable实现伸缩列
hyupeng1006的博客
04-25 4178
2、less中需要设置类的样式，如果无效，可以尝试加上:global(类名)resizeable-table.less （拖拽列必须要设置的样式）Resizeable.js (排序和拖拽列功能的table组件)如果不使用number类型，会出现第一次点击时卡顿的情况。1、设置列宽的width一定要用number类型。index.jsx: （展示组件）index.jsx: （展示组件）
react-antd-admin-template：一个基于React + Antd的后台管理模版，在线预览https：nlrx-wjc.github.ioreact-antd-admin-template
02-05
是一个基于React和Ant Design的后台管理系统模板。它内置了用户登录/登出，动态路由，权限重置，用户管理等典型的业务模型，可以帮助您快速构建企业级中后台产品原型，是你接私活的不二之选。 本系统的开发灵感来自 ...
react-antd-super-form:演示
05-31
react-antd-super-formInstallnpm install --save react-antd-super-form1.x 的版本 适用于 antd 3.x2.x 的版本 适用于 antd 4.xUsageimport React, { Component } from 'react';import SuperForm, { Table, List, ...
react-antd-mobx-admin
05-19
react-antd-mobx-admin 一个基于 create-react-app、antd、react-router、mobx 的中后台管理模板 步骤 git clone https://github.com/SwordsmanYao/react-antd-mobx-admin.git cd react-antd-mobx-admin yarn (or ...
antd-chrome-extension-boilerplate:使用 react + antd 开发 chrome-extension 的脚手架工程，具有热加载功能
08-04
antd-chrome-extension-boilerplate使用 react + antd 开发 chrome-extension 的脚手架工程，具有热加载功能。特性使用 antd + react 开发 chrome extension。解决了当前页面与 content-script 间的 css 污染问题。...
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 638
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
「React」useEffect 与 useLayoutEffect 使用与区别
Constantiny的博客
05-17 616
useEffect 与 useLayoutEffect 是两个 Hooks，前者比较常用，后者在一些场景下也会用到，下面说明两者区别和应用场景。
Django5+React18前后端分离开发实战02 安装Python和Django
Python私教
05-17 688
注意：这里我选择使用Python3.11 + Django5，如果有不会安装的同学，去看到搭建Anaconda环境的那篇文章。
react封装Spin重复使用loading效果antd
wzp20092009的博客
05-20 138
react、antd封装Spin重复使用loading效果
React18
m0_71534259的博客
05-16 1283
/ 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hook// 可复用的逻辑代码value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle// 封装自定义hook通用思路// 1. 声明一个以use打头的函数// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
Django5+React18前后端分离开发实战03 理解Django项目结构
Python私教
05-18 1017
让我们看看创建的项目文件。使用代码编辑器打开backend项目。我会在这本书中使用vscode编辑器。
【React】如何让函数式组件也能使用state——useState（Hooks）
fangyuan__的博客
05-15 228
但是React官方提供了一个Hooks叫useState，它解决了函数式组件和类式组件的差异，让函数式组件拥有了类式组件所拥有的 state ，同时新增了一些 API ，让函数式组件，变得更加的灵活。count 是初始化的值，而 setCount 就像是一个 action 对象驱动状态更新，我们可以通过 setCount 来更新 count 的值。这里利用了useState，让函数式组件能够维护自己的 state ，它接收一个参数，作为初始化 state 的值，赋值给 count。
react 下拉框内容回显
最新发布
hyy的博客
05-20 26
/可以拿到faqType为0 但是却没有回显出下拉框的内容 我需要faqType为0 回显出下拉框内容为对应的label<Form}}<Form.Itemlabel='问题类型'rules={[{ required: true, message: '请输入问题类型' }]}<Select}}allowClearshowSearchplaceholder='请输入问题类型'options={[{ value: 0, label: '如何使用' },
react-bootstrap-table-next怎么合并单元格
05-31
要合并单元格，需要使用 `react-bootstrap-table-next` 中的 `rowSpan` 和 `colSpan` 属性。这些属性可以在 `columns` 对象中定义，用于指定表格中每个单元格应该跨越的行和列的数量。 具体的实现步骤如下： 1. 在 `columns` 对象中定义需要合并单元格的列，为其添加 `rowSpan` 和 `colSpan` 属性。 2. 在 `data` 数组中为需要合并单元格的行添加相应的属性值，这些属性值将在表格渲染时被引用。 下面是一个例子： ```javascript import BootstrapTable from 'react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; const columns = [ { dataField: 'id', text: 'ID', }, { dataField: 'name', text: 'Name', }, { dataField: 'age', text: 'Age', }, { dataField: 'gender', text: 'Gender', rowSpan: 2, // 跨越两行 }, { dataField: 'location', text: 'Location', colSpan: 2, // 跨越两列 }, { dataField: 'address', text: 'Address', hidden: true, // 隐藏该列 }, { dataField: 'city', text: 'City', }, { dataField: 'state', text: 'State', }, ]; const data = [ { id: 1, name: 'John', age: 30, gender: 'Male', location: 'New York', address: '123 Main St', city: 'New York', state: 'NY', }, { id: 2, name: 'Jane', age: 25, gender: 'Female', location: 'San Francisco', address: '456 Elm St', city: 'San Francisco', state: 'CA', }, ]; <BootstrapTable keyField='id' data={ data } columns={ columns }/> ``` 在上面的例子中，表格中的 `Gender` 列跨越了两行，`Location` 列跨越了两列。注意，在定义了 `colSpan` 属性的列后面应该添加相应数量的列来占据跨度。 希望这可以帮助你实现合并单元格的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Sunny

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

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

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

打赏作者

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

抵扣说明：

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

余额充值