vue.js如何處理數(shù)組對象中某個字段是否變?yōu)閮蓚€字段
更新時間：2025年03月27日 09:02:38 作者：Lemon今天學(xué)習(xí)了嗎
這篇文章主要介紹了vue.js如何處理數(shù)組對象中某個字段是否變?yōu)閮蓚€字段方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
場景
產(chǎn)品要求做一個時間步驟條，使用目前后端已返回的數(shù)據(jù)進行操作實現(xiàn)。時間步驟條要求日期和時間分開顯示且相同日期只顯示第一個日期。
圖左邊為實現(xiàn)效果，右邊為后臺返回的接口。接口中current字段表示當(dāng)前到達(dá)第幾步，從0開始，對應(yīng)顯示數(shù)組的前幾個展示。后臺返回的是一個整的日期時間字段dateTime。
處理思路
- 拿出nodes數(shù)組對象中與current字段對應(yīng)的步驟數(shù)據(jù)放入新數(shù)組slicedNodes；
- 再循環(huán)處理slicedNodes數(shù)組對象里的dateTime字段，將其拆分成date, time兩個字段；
- 比較date字段是否有重復(fù)的，沒有則賦值該字段到一個新數(shù)組prevDate；
- 將新數(shù)組添加到result數(shù)組即可組裝完成。
代碼實現(xiàn)
computed: {
// 過程數(shù)組
processedNodes() {
// 將數(shù)組截取的副本返回到新的數(shù)組對象:array.slice[start, end)
const slicedNodes = this.twrProcess?.nodes.slice( 0, parseInt(this.twrProcess?.current,10) + 1);
const result = [];
let prevDate = null;
slicedNodes?.forEach((node) => {
// 將dateTime日期時間字段拆分成date, time兩個字段
const [date, time] = node.dateTime.split(" ");
const newObj = { ...node };
// 將不一致的date放入newObj.date
if (date !== prevDate) {
newObj.date = date;
prevDate = date;
}
newObj.time = time;
result.push(newObj);
});
return result;
},
},總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue element table中自定義一些input的驗證操作
這篇文章主要介紹了vue element table中自定義一些input的驗證操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue通信方法EventBus的實現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
<Suspense>是 Vue3 中的一個實驗性功能,用于處理異步組件和依賴,它允許你在等待多個異步依賴項解析時顯示一個加載狀態(tài),并提供了超時處理、錯誤捕獲和嵌套使用等功能,通過合理使用<Suspense>,可以提升用戶體驗,特別是在處理復(fù)雜異步操作時2025-10-10
解決vue單頁面應(yīng)用進入頁面加載所有 js 的問題
這篇文章主要介紹了解決vue單頁面應(yīng)用進入頁面加載所有 js 的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊和使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue如何自定義事件傳參，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實現(xiàn)地圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue-router如何實時動態(tài)替換路由參數(shù)(地址欄參數(shù))
這篇文章主要介紹了vue-router如何實時動態(tài)替換路由參數(shù)(地址欄參數(shù))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)上拉加載下一頁效果，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-08-08