vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值
vue table表格里面數(shù)組多層嵌套取值
我現(xiàn)在是在表格里拿到級(jí)聯(lián)選擇器的多選的id,然后要根據(jù)這個(gè)id來匹配一個(gè)嵌套了三層的數(shù)組的第三層id,來拿名字渲染
表格部分
<tr style="height: 44px;line-height: 44px;"> ? ? ? ? ? ? ? ? <td style="border: 1px solid #ddd;">提醒給</td> ? ? ? ? ? ? ? ? <td style="border: 1px solid #ddd;"> ? ? ? ? ? ? ? ? ? <!-- {{editForm.uids.toString().split(',')}} --> ? ? ? ? ? ? ? ? ? <span v-for="item in editForm.uids.toString().split(',')" :key="item.id"> ? ? ? ? ? ? ? ? ? ? <!-- <p>{{dataHandle(editForm.uids)}}</p> --> ? ? ? ? ? ? ? ? ? ? <p>{{dataHandle(item)}}</p> ? ? ? ? ? ? ? ? ? </span> ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? ? </tr> ``
methods里面定義方法
?// 提醒給點(diǎn)擊事件 dataHandle(item) { ? ?let ary = [] ?let name = '' ? let result = getUserName(this.options4) ? result.forEach(v2 => { ? ? if (item == v2.id) { ? ? ? name = v2.corp_name ? ? } ? }) ? return name ?? ? function getUserName(item) { ? ? item.forEach(v1 => { ? ? ? if (v1.children) return getUserName(v1.children) ? ? ? else { ? ? ? ? ary.push(v1) ? ? ? } ? ? }) ? ? return ary ? } },
vue 多層數(shù)組嵌套循環(huán),動(dòng)態(tài)取值匹配
tableData:[], //存儲(chǔ)數(shù)組 arrTarName:[] //結(jié)果數(shù)組 this.tableData.push({ siteName:i.siteName, tabdata:result.data }); //循環(huán)+判斷取值 for (let k = 0; k < result.data.length; k++) { if (this.arrTarName.length == 0) { this.arrTarName.push({ indexName: result.data[k].indexName, polTracesouCount: result.data[k].polTracesouCount }) } else { let isExist = false; for (let l = 0; l < this.arrTarName.length; l++) { if (this.arrTarName[l].indexName == result.data[k].indexName) { isExist = true; this.arrTarName[l].polTracesouCount = this.arrTarName[l].polTracesouCount + result.data[k].polTracesouCount; break; } } if (!isExist) { this.arrTarName.push({ indexName: result.data[k].indexName, polTracesouCount: result.data[k].polTracesouCount }) } } } console.log(this.arrTarName)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue 數(shù)組和對(duì)象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對(duì)象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10Pure admin-Router標(biāo)簽頁(yè)配置與頁(yè)面持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標(biāo)簽頁(yè)配置與頁(yè)面持久化實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01vue使用jsMind思維導(dǎo)圖的實(shí)戰(zhàn)指南
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純javascript類庫(kù),其基于 html5的canvas進(jìn)行設(shè)計(jì),這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式
這篇文章主要介紹了vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue實(shí)現(xiàn)定位并解決內(nèi)存泄漏
Vue.js?是一個(gè)流行且強(qiáng)大的?JavaScript?框架,它允許我們構(gòu)建動(dòng)態(tài)和交互式?Web?應(yīng)用程序,本文我們將深入探討?Vue.js?應(yīng)用程序中內(nèi)存泄漏的原因,并探索如何定位和修復(fù)這些問題的有效策略,希望對(duì)大家有所幫助2023-09-09Vue中使用定時(shí)器(setInterval、setTimeout)的兩種方式
js中定時(shí)器有兩種,一個(gè)是循環(huán)執(zhí)行?setInterval,另一個(gè)是定時(shí)執(zhí)行?setTimeout,這篇文章主要介紹了Vue中使用定時(shí)器?(setInterval、setTimeout)的兩種方式,需要的朋友可以參考下2023-03-03Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式,方式一是通過監(jiān)聽事件實(shí)現(xiàn)方式二是通過 v-model 實(shí)現(xiàn),每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-11-11