标签：map stepConfigList 遇到 value project 开发 startTime null 随记
如何用js代码写出下面表格形式？
1、首先做需求前和后端沟通数据结构（方便给出更好的方案，避免因数据结构变更重新写结构）
后端数据格式为：
需要处理成如下格式：
const data = [ { "stage":"准备阶段", "project":[ { "value":"项目1", "content":[ { "value":"人员计划", "startTime":"开始时间", "endTime":"结束时间" }, { "value": "人员计划", "startTime": "开始时间", "endTime":"结束时间" }, { "value": "人员计划", "startTime": "开始时间", "endTime":"结束时间" } ] } ] }, { "stage":"执行阶段", "project":[ { "value":"项目1", "content":[ { "value":"人员计划" }, { "value": "人员计划", "startTime": "开始时间", "endTime":"结束时间" } ] } ] }, { "stage":"总结阶段", "project":[ { "value":"项目1", "content":[ { "value":"人员计划" } ] } ] } ]
这个数据处理过程很简单，只需要将key值转化一下即可。
2、根据现有数据格式，我考虑过使用现有组件table来展示，后来发现数据中的二级数组无法在组件中展现，会报结构错误。我也没有想出很好的方案。
后来决定用li这种方式来实现。
核心代码如下(个人感觉有点low,但是暂时找不到更好的想法，等我想到，再来更新)：
<ul className="ul-con" style={{ border: '1px solid #353848', height: '44px', lineHeight: '44px', background: '#2D3041', color: '#FFFFFF', }}> <li style={{ borderRight: '1px solid #353848' }}>阶段</li> <li style={{ borderRight: '1px solid #353848' }}>项目</li> <li style={{ borderRight: '1px solid #353848' }}>内容</li> <li style={{ borderRight: '1px solid #353848' }}>开始时间</li> <li style={{ borderRight: '1px solid #353848' }}>结束时间</li> <li style={{ borderRight: '1px solid #353848' }}>标志物</li> <li style={{ borderRight: '1px solid #353848' }}>ST3</li> <li style={{ borderRight: '1px solid #353848' }}>ST4</li> <li style={{ borderRight: '1px solid #353848' }}>ST5</li> <li>ST6</li> </ul> {tableList.map((i, idx) => <ul className="ul-con" style={{ color: '#FFFFFF', height: '100%', width: '100%' }}> <li style={{ borderBottom: '1px solid #353848', borderLeft: '1px solid #353848' }}> <li style={{ height: `${(i.stage === '准备阶段' ? heightData : i.stage === '执行阶段' ? performData : conclusion)*44}px`, lineHeight: `${(i.stage === '准备阶段' ? heightData : i.stage === '执行阶段' ? performData : conclusion) * 44}px`,}}>{i.stage}</li> </li> <li style={{ borderLeft: '1px solid #353848' }}> {i.project.map((j, index) => <li id={`project-${index}`} style={{ height: `${j.stepConfigList.length * 44}px`, lineHeight: `${j.stepConfigList.length * 44}px`, borderBottom: '1px solid #353848'}}>{j.title}</li>)} </li> <li style={{ borderLeft: '1px solid #353848' }}> {i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{t.content}</li>))} </li> <li style={{ borderLeft: '1px solid #353848' }}> {i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{moment(t.startTime).format('YYYY-MM-DD HH:mm:ss')}</li>))} </li> <li style={{ borderLeft: '1px solid #353848' }}> {i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{moment(t.finishTime).format('YYYY-MM-DD HH:mm:ss')}</li>))} </li> <li style={{ borderLeft: '1px solid #353848' }}> {i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'标志物'}</li>))} </li> <li style={{ borderLeft: '1px solid #353848' }}> {i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'st3'}</li>))} </li> <li style={{ borderLeft: '1px solid #353848' }}> {i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'t.st4'}</li>))} </li> <li style={{ borderLeft: '1px solid #353848' }}> {i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'t.st5'}</li>))} </li> <li style={{ borderLeft: '1px solid #353848', borderRight:'1px solid #353848', }}> {i.project.map((j) => j.stepConfigList.map((t) => <li style={{ height: '44px', borderBottom: '1px solid #353848', lineHeight: '44px' }}>{'t.st6'}</li>))} </li> </ul>)} <ul className="ul-con" style={{ border: '1px solid #353848', height: '88px', lineHeight: '88px', color: '#FFFFFF', }}> <li style={{ flex: 6, borderRight:'1px solid #353848' }}>备注：完成情况或者异常</li> <li style={{ flex: 1, borderRight:'1px solid #353848'}}>高温扫描仪已完成</li> <li style={{ flex: 1, borderRight:'1px solid #353848'}}>高温扫描仪已完成</li> <li style={{ flex: 1, borderRight:'1px solid #353848'}}>已完成</li> <li style={{ flex: 1, }}>已完成</li> </ul>
3、小菜鸟的成长之路，至少以后遇到需求要自己思考方案，如同自己的路痴毛病一样，多试几次总会找到对的方向。
标签：map,stepConfigList,遇到,value,project,开发,startTime,null,随记 来源： https://www.cnblogs.com/judyhuayu/p/15137212.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。