快捷導(dǎo)航

vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實(shí)現(xiàn)步驟

更新時(shí)間：2024年06月25日 11:09:52 作者：悲涼寒

本文檔將介紹如何通過(guò)點(diǎn)擊父列表（表格）中的數(shù)據(jù)行來(lái)獲取到子列表（表格）的數(shù)據(jù),代碼示例是基于Vue框架實(shí)現(xiàn)的一個(gè)組件,包含了父列表和子列表,通過(guò)點(diǎn)擊父列表的數(shù)據(jù)行來(lái)動(dòng)態(tài)獲取子列表的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧

概述

本文檔將介紹如何通過(guò)點(diǎn)擊父列表（表格）中的數(shù)據(jù)行來(lái)獲取到子列表（表格）的數(shù)據(jù)。代碼示例是基于Vue框架實(shí)現(xiàn)的一個(gè)組件，包含了父列表和子列表，通過(guò)點(diǎn)擊父列表的數(shù)據(jù)行來(lái)動(dòng)態(tài)獲取子列表的數(shù)據(jù)。

實(shí)現(xiàn)步驟

以下是通過(guò)點(diǎn)擊父列表數(shù)據(jù)行獲取子列表數(shù)據(jù)的具體實(shí)現(xiàn)步驟：

1. 設(shè)置父列表選中事件

在父組件的代碼中，定義一個(gè)selectedRowKeys數(shù)組用于存儲(chǔ)選中的父列表行的id。在父列表的模板代碼中，使用rowSelection屬性來(lái)設(shè)置行選中事件onSelectChange，并將selectedRowKeys數(shù)組綁定到父列表的rowSelection屬性的selectedRowKeys。

<template> 
<a-table 
:rowSelection="rowSelection" 
... 
> 
... 
</a-table> 
</template> 
<script> 
export default { 
... 
data() { 
return { 
selectedRowKeys: [] // 用于存儲(chǔ)選中的父列表行的id 
}; 
}, 
methods: { o
nSelectChange(selectedRowKeys) { 
this.selectedRowKeys = selectedRowKeys; // 更新選中的父列表行的id // 執(zhí)行其他操作，例如獲取子列表數(shù)據(jù) 
}, 
... 
} 
} 
</script>

2. 子列表綁定父列表變化事件

在子組件的模板代碼中，將父列表的rowKey設(shè)置為父列表數(shù)據(jù)對(duì)象中的唯一標(biāo)識(shí)符（例如id）。監(jiān)聽父列表的變化事件@change，并將選中的父列表行的id作為參數(shù)傳遞給子組件的方法（例如doGetSkuList）。

<template> 
<a-table 
... 
:rowKey="record => record.id" // 設(shè)置父列表數(shù)據(jù)對(duì)象的唯一標(biāo)識(shí)符 
@change="doGetSkuList(selectedRowKeys[0])" // 將選中的父列表行的id作為參數(shù)傳遞給子組件方法 
... 
> 
... 
</a-table> 
</template> 
<script> 
export default { 
... 
methods: { 
doGetSkuList(parentId) { 
// 根據(jù)父列表行的id獲取子列表數(shù)據(jù) 
}, 
... 
} 
} 
</script>

3. 父列表點(diǎn)擊事件傳遞給子組件

在父組件的模板代碼中，通過(guò)customRow屬性將子組件的方法（例如clickThenCheck）綁定到父列表的customRow上。當(dāng)點(diǎn)擊父列表的數(shù)據(jù)行時(shí)，會(huì)調(diào)用子組件的方法。

<template> 
<a-table 
:customRow="clickThenCheck" 
... 
> 
... 
</a-table> 
</template> 
<script> 
export default { 
... 
methods: { 
clickThenCheck(record) { r
eturn { 
on: { click: () => { 
this.onSelectChange([record.id]); // 將點(diǎn)擊的父列表行的id傳遞給父組件的方法 
} 
} 
}; 
}, 
... 
} 
} 
</script>

4. 子組件更新子列表數(shù)據(jù)

在子組件的方法（例如doGetSkuList）中，根據(jù)傳遞過(guò)來(lái)的父列表行的id發(fā)送請(qǐng)求，獲取對(duì)應(yīng)的子列表的數(shù)據(jù)，并更新子組件的數(shù)據(jù)。

<template> 
<a-table 
:dataSource="sku.data" 
...
> 
... 
</a-table> 
</template> 
<script> 
export default { 
... 
methods: { 
doGetSkuList(parentId) { 
// 根據(jù)父列表行的id發(fā)送請(qǐng)求，獲取對(duì)應(yīng)的子列表數(shù)據(jù) // 更新子組件的數(shù)據(jù) 
this.sku.data = [
/* 子列表數(shù)據(jù) */
]; 
}, 
... 
} 
} 
</script>

通過(guò)以上步驟，即可實(shí)現(xiàn)通過(guò)點(diǎn)擊父列表數(shù)據(jù)行來(lái)獲取子列表數(shù)據(jù)的功能。當(dāng)點(diǎn)擊父列表的數(shù)據(jù)行時(shí)，會(huì)觸發(fā)父組件的方法，更新選中的父列表行的id，并將id傳遞給子組件的方法，子組件根據(jù)id獲取對(duì)應(yīng)的子列表數(shù)據(jù)，并更新子組件的數(shù)據(jù)。

到此這篇關(guān)于vue列表-父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: