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