這是一個(gè)非常實(shí)用的操作，尤其是編輯數(shù)據(jù)的時(shí)候。點(diǎn)擊編輯數(shù)據(jù)，通常會(huì)將編輯的這條數(shù)據(jù)發(fā)送給后端，然后后端在根據(jù)這個(gè)編號(hào)查詢出相應(yīng)的數(shù)據(jù)在返回給前端。

那么請(qǐng)問(wèn)，后端都將數(shù)據(jù)給你了，你直接在數(shù)組中取出來(lái)不是很好嗎？

這樣簡(jiǎn)單快捷?？梢越o后端避免沒(méi)有必要的負(fù)擔(dān)，萬(wàn)一網(wǎng)絡(luò)不好還會(huì)獲取失敗，尤其現(xiàn)在帶寬這么貴。

JS中有一個(gè) findIndex()方法就是獲取對(duì)應(yīng)數(shù)據(jù)在數(shù)組中的索引，然后就可以根據(jù)這個(gè)索引在數(shù)組中取出數(shù)據(jù)。

tableData[] // 這是保存所有數(shù)據(jù)的數(shù)組

根據(jù)id獲取當(dāng)前數(shù)據(jù)在數(shù)組中的下標(biāo)。

const index = ?this.tableData.findIndex((role) => role.id === id)

根據(jù)下標(biāo)在數(shù)組中獲取數(shù)據(jù)

tableData[index]

完整范例

/**
* 獲取根據(jù)id獲取數(shù)組中對(duì)應(yīng)的數(shù)據(jù)，注意：id是這個(gè)表中的id，不是數(shù)組下標(biāo)
*/
handleEdit(id) {
? ? this.dialogVisible = true; // 彈出編輯框
? ? // this.tableData.findIndex(role => role.id === id) 取出id在數(shù)組中的索引，然后在根據(jù)數(shù)組索引從數(shù)組中取出數(shù)據(jù)。
? ? this.roleForm = this.tableData[
? ? ? ? this.tableData.findIndex((role) => role.id === id)
? ? ];
},
},

Vue獲取數(shù)組的數(shù)組數(shù)據(jù)

Q：如何在vue獲取數(shù)組的數(shù)組？

A：用到j(luò)s的map對(duì)象方法

一、data里要先定義好有兩個(gè)數(shù)組

二、主要代碼

這樣就可以獲取到數(shù)組的子數(shù)組數(shù)據(jù)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

el-date-picker日期范圍限制的實(shí)現(xiàn)
本文主要介紹了el-date-picker日期范圍限制的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue.js如何優(yōu)雅的進(jìn)行form validation
Vue.js如何優(yōu)雅的進(jìn)行form validation，針對(duì)此問(wèn)題，給出了多個(gè)網(wǎng)友的回答，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue使用自定義指令實(shí)現(xiàn)拖拽
這篇文章主要為大家詳細(xì)介紹了vue使用自定義指令實(shí)現(xiàn)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
Vue3中ref與reactive的詳解與擴(kuò)展
在vue3中對(duì)響應(yīng)式數(shù)據(jù)的聲明官方給出了ref()和reactive()這兩種方式,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref與reactive的相關(guān)資料,需要的朋友可以參考下
2021-06-06
Vue中請(qǐng)求本地JSON文件并返回?cái)?shù)據(jù)的方法實(shí)例
在前端開(kāi)發(fā)過(guò)程當(dāng)中,當(dāng)后臺(tái)服務(wù)器開(kāi)發(fā)數(shù)據(jù)還沒(méi)完善,沒(méi)法與咱們交接時(shí),咱們習(xí)慣在本地寫上一個(gè)json文件做模擬數(shù)據(jù)測(cè)試代碼效果是否有問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue中請(qǐng)求本地JSON文件并返回?cái)?shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-08-08
使用v-memo緩存模板子樹(shù)提高應(yīng)用性能詳解
這篇文章主要為大家介紹了使用v-memo緩存模板子樹(shù)提高應(yīng)用性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue中父子組件通訊之todolist組件功能開(kāi)發(fā)
這篇文章主要介紹了Vue中父子組件通訊——todolist組件功能開(kāi)發(fā)的相關(guān)知識(shí),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05
Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線預(yù)覽實(shí)戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線預(yù)覽實(shí)戰(zhàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06
vue.js數(shù)據(jù)響應(yīng)式原理解析
這篇文章主要介紹了vue.js數(shù)據(jù)響應(yīng)式原理解析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-08-08