react+antd 步骤条改为时间顺序条


需求描述:返回四个时间,按照顺序展示,如果返回的时间相同,则在一个步骤点展示数据

拿到数据:

 

排序好的数据:

 

 

 处理好的数据:

 

 页面效果:

 

 代码实现:

const getList = () => {
        const newList = stepList.sort(
            (a, b) => Date.parse(a.time.replace(/-/g, '/')) - Date.parse(b.time.replace(/-/g, '/'))
        );
        console.log(newList, '排序好的数据');
        // 有数据
        const result = {};
        newList.forEach(item => {
            result[item.time] = result[item.time] || [];
            result[item.time].push(item);
        });
        console.log(result, '最终展示的数据');
        return Object.keys(result).map((item, index) => (
            <Step
               ......具体内容
            />
        ));
    };

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM