【Reactjs】多层展示报表信息

需求：

从后端返回的数据为层层嵌套的树状结构，前端如何层层遍历并展示?

json 文件

items: [{fieldName: 'allFlowMoney',fieldChineseName: '本期账单消费',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'fltConMoneyHasPost',fieldChineseName: '月结机票',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'fltTicketFee',fieldChineseName: '机票金额',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'fltRefund',fieldChineseName: '退票费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'fltInsurancefee',fieldChineseName: '保险',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'fltServicePackagePrice',fieldChineseName: '服务包',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'fltCoupon',fieldChineseName: '优惠券',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'fltServiceFeeSummary',fieldChineseName: '服务费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'fltPostServiceFeeX',fieldChineseName: '现付机票服务费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'htlXconMoney',fieldChineseName: '月结协议酒店',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'htlXRoomCharge',fieldChineseName: '酒店房费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'htlXServiceFeeSummary',fieldChineseName: '酒店服务费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'htlXServiceCharge',fieldChineseName: '手续费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'htlHconMoney',fieldChineseName: '月结会员酒店',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'htlHRoomCharge',fieldChineseName: '酒店房费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'htlHServiceFeeSummary',fieldChineseName: '酒店服务费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'htlHServiceCharge',fieldChineseName: '手续费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'htlXPaySummaryX',fieldChineseName: '月结协议酒店',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'htlXAfterServiceFeeX',fieldChineseName: '酒店服务费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'htlXServiceChargeX',fieldChineseName: '手续费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'htlHPaySummaryX',fieldChineseName: '现付会员酒店',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'htlHAfterServiceFeeX',fieldChineseName: '酒店服务费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'htlHServiceChargeX',fieldChineseName: '手续费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'trainRealAmountHasPost',fieldChineseName: '月结火车票',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'trainRealAmount',fieldChineseName: '火车票金额',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'fltRefund',fieldChineseName: '退票费服务费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'trainPostServiceFeeX',fieldChineseName: '现付火车票服务费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'vasRealAmountHasPost',fieldChineseName: '月结增值',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'vasRealAmount',fieldChineseName: '增值金额',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'vasPostServiceFee',fieldChineseName: '增值服务费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'vasCommissionFee',fieldChineseName: '增值手续费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'carPostServiceFeeX',fieldChineseName: '现付用车服务费',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'busRealFeeHasPost',fieldChineseName: '月结汽车票',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'busRealFee',fieldChineseName: '汽车票金额',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'busServiceFeeSummary',fieldChineseName: '汽车票服务费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'busLaterServiceFeeX',fieldChineseName: '现付汽车票服务费',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'otherRebateSummary',fieldChineseName: '返利',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'otherFltRebate',fieldChineseName: 'FLIGHTREBATE',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'otherHtlRebate',fieldChineseName: '酒店返利',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'otherRebateAdjust',fieldChineseName: '调整返利',totalFee: 0,existRebateReport: false,subItems: [],},],},{fieldName: 'otherAdjustSummary',fieldChineseName: '其他调整',totalFee: 0,existRebateReport: false,remark: '10000000000000',subItems: [],},{fieldName: 'otherLateFeeSummary',fieldChineseName: '滞纳金',totalFee: 0,existRebateReport: false,subItems: [{fieldName: 'otherLateFee',fieldChineseName: '滞纳金应收',totalFee: 0,existRebateReport: false,subItems: [],},{fieldName: 'otherOxlf',fieldChineseName: '滞纳金调整',totalFee: 0,existRebateReport: false,subItems: [],},],},],

前端展示

解决方案：

ant design collapse组件 + 递归

import React, { Fragment } from 'react';
import { Collapse } from 'antd';
import toThousands from '../../../utils/function';
import './index.less';
import { CaretRightOutlined } from '@ant-design/icons';const { Panel } = Collapse;  function callback(key: any) {// console.log(key)
}function subItem(dataSource: any[]) {return Array.isArray(dataSource) ? (<Collapsebordered={false}onChange={callback}className="collapse"expandIcon={({ isActive }) => (<CaretRightOutlined rotate={isActive ? 90 : 0} />)}>{dataSource.map((v, index) =>v?.subItems?.length > 0 ? (<Panelheader={<Fragment><span className="chineseName">{v.fieldChineseName}</span><span className="fee">{toThousands(v.totalFee)}</span>{v.existRebateReport && (<span className="downloadReport">下载报表</span>)}{v.hasOwnProperty('remark') ? <div>{v.remark}</div> : ''}</Fragment>}key={`${v.fieldChineseName}-${index}`}>{subItem(v.subItems)}</Panel>) : (<div className="detailBox clearfix"><span className="chineseNameLast">{v.fieldChineseName}</span><span className="feeLast">{toThousands(v.totalFee)}</span>{v.existRebateReport && (<span className="downloadReport">下载报表</span>)}{v.hasOwnProperty('remark') ? (<div className="remark">{v.remark}</div>) : ('')}</div>),)}</Collapse>) : null;
}export default function ConsumeDetail(props: any) {let { dataSource = [] } = props;// console.log('dataSource', dataSource);return (<Fragment><div className="showCash">{subItem(dataSource)}</div></Fragment>);
}

index.less

.ant-collapse {width : 100%;.ant-collapse-content>.ant-collapse-content-box {padding     : 0;padding-left: 14px;}
}
.ant-collapse-borderless > .ant-collapse-item {border: none;
}.ant-collapse>.ant-collapse-item>.ant-collapse-header {border-bottom: 1px solid #d9d9d9;
}// .ant-collapse-borderless > .ant-collapse-item:last-child,
// .ant-collapse-borderless > .ant-collapse-item:last-child .ant-collapse-header {//   //border: none;
//   //padding-bottom: 0;
// }
.clearfix {display: block;content: "";clear  : both;
}.showCash {margin: 12px 0 0 12px;.collapse {border: none;.chineseName {color         : #1b234d;font-family   : 'PingFang SC';font-size     : 14px;font-weight   : 500;height        : 22px;letter-spacing: px;}.fee {color          : #1b234d;font-family    : 'PingFang SC';font-size      : 16px;font-weight    : 500;height         : 24px;letter-spacing : px;float          : right;//padding-right: 14px;}.detailBox {padding      : 10px 0;border-bottom: 1px solid #e9e9e9;.chineseNameLast {color      : #1b234d;font-family: 'PingFang SC';font-size  : 14px;font-weight: 500;height     : 22px;margin-left: 40px;}.feeLast {color       : #1b234d;font-family : 'PingFang SC';font-size   : 16px;font-weight : 500;height      : 24px;float       : right;margin-right: 16px;}}.subChineseName {color      : #4d5580;font-family: 'PingFang SC';font-size  : 13px;font-weight: normal;height     : 22px;}.subFee {color          : #4c5a75;font-family    : 'PingFang SC';font-size      : 14px;font-weight    : normal;height         : 22px;float          : right;//padding-right: 14px;}.remark {color      : #8790a3;font-family: 'PingFang SC';font-size  : 12px;font-weight: 500;height     : 20px;margin     : 10px 0 0 30px;}.downloadReport {color      : #1658dc;font-family: 'PingFang SC';font-size  : 12px;font-weight: 500;height     : 20px;width      : 48px;margin-left: 24px;}}
}

【Reactjs】多层展示报表信息相关推荐

利用FastReport传递图片参数，在报表上展示签名信息
在一个项目中,客户要求对报表中的签名进行仿手写的签名处理,因此我们原先只是显示相关人员的姓名的地方,需要采用手写方式签名,我们的报表是利用FastReport处理的,在利用楷体处理的时候,开发展示倒是 ...
21)展示用户信息和后台首页，以及用户退出
(1)首先展示用户信息: 这个是用wang这个账号和密码登陆的这个是用admin账号和root密码登陆的: (2)后台首页展示: 目录展示: 发生改变的文件代码展 ...
ABP框架展示异常信息
接触ABP框架有一段时间了,也遇到了一些问题,看了官网文档,但是或许是看的不够细致的原因,实际开发中还是遇到了一些问题,耗费了时间去处理,回头一看,原来文档中早已提及. 开发环境:ABP+MPA模式+ ...
以太坊钱包开发系列3 - 展示钱包信息及发起签名交易
最新内容会更新在主站深入浅出区块链社区原文链接:使用 ethers.js 开发以太坊 Web 钱包 3 - 展示钱包信息及发起签名交易) 以太坊去中心化网页钱包开发系列,将从零开始开发出一个可以实际 ...
WPF ListView展示层叠信息
原文:WPF ListView展示层叠信息通常我们在ListView中展示一列同类数据,例如城市名称.不过可以对ListView的DataTemplate稍作修改,让其显示层叠信息.例如:需要在Li ...
核心业务8：提现+展示还款信息和回款信息
核心业务8:提现+展示还款信息和回款信息 1.提现(同理充值) 2.管理端显示投资记录 3.管理员显示还款计划 4.网站端显示投资记录 5.网站端显示还款记录 6.网站端显示回款记录核心业务8:提现 ...
Vue项目中常见问题(55)提交订单、获取订单号、展示支付信息
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求:完成提交订单的业务 1.支付静态组件先完成 Pay静态 ...
长江流域9省2市可视化（不展示业务信息水质及真实断面）
一.处理9省+2市地理信息为geojson集成到项目 shp转geojson关键Java代码 /*** shp转换为Geojson* @param shpPath* @return*/ public ...
BIEE多层表头报表的制作方法
使用BIEE制作多层表头的报表大致分为以下的几种办法. 1.双层表头这种比较容易实现,只需要在表格属性中勾选作为单独的行显示即可.这样通过修改文件夹标题,就可以实现双层表头的制作 2.多层表头的制作 ...

【Reactjs】多层展示报表信息

需求：

json 文件

前端展示

解决方案：

【Reactjs】多层展示报表信息相关推荐

最新文章

热门文章