vue父列表數據獲取子列表數據的實現步驟

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

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

概述

本文檔將介紹如何通過點擊父列表（表格）中的數據行來獲取到子列表（表格）的數據。代碼示例是基于Vue框架實現的一個組件，包含了父列表和子列表，通過點擊父列表的數據行來動態(tài)獲取子列表的數據。

實現步驟

以下是通過點擊父列表數據行獲取子列表數據的具體實現步驟：

1. 設置父列表選中事件

在父組件的代碼中，定義一個selectedRowKeys數組用于存儲選中的父列表行的id。在父列表的模板代碼中，使用rowSelection屬性來設置行選中事件onSelectChange，并將selectedRowKeys數組綁定到父列表的rowSelection屬性的selectedRowKeys。

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

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

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

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

3. 父列表點擊事件傳遞給子組件

在父組件的模板代碼中，通過customRow屬性將子組件的方法（例如clickThenCheck）綁定到父列表的customRow上。當點擊父列表的數據行時，會調用子組件的方法。

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

4. 子組件更新子列表數據

在子組件的方法（例如doGetSkuList）中，根據傳遞過來的父列表行的id發(fā)送請求，獲取對應的子列表的數據，并更新子組件的數據。

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

通過以上步驟，即可實現通過點擊父列表數據行來獲取子列表數據的功能。當點擊父列表的數據行時，會觸發(fā)父組件的方法，更新選中的父列表行的id，并將id傳遞給子組件的方法，子組件根據id獲取對應的子列表數據，并更新子組件的數據。

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

您可能感興趣的文章: