Overview
This document will explain how to get data from a child list (table) by clicking on the data row in the parent list (table). The code example is a component implemented based on the Vue framework, which contains the parent list and the child list. By clicking on the parent list data row to dynamically obtain the data of the child list.
Implementation steps
The following are the specific implementation steps for obtaining child list data by clicking on the parent list data line:
1. Set the parent list to select events
In the parent component's code, define a selectedRowKeys array to store the id of the selected parent list row. In the template code of the parent list, use the rowSelection property to set the row selection event onSelectChange and bind the selectedRowKeys array to the selectedRowKeys of the rowSelection property of the parent list.
<template>
<a-table
:rowSelection="rowSelection"
...
>
...
</a-table>
</template>
<script>
export default {
...
data() {
return {
selectedRowKeys: [] // Used to store the id of the selected parent list row};
},
methods: { o
nSelectChange(selectedRowKeys) {
= selectedRowKeys; // Update the id of the selected parent list row // Perform other operations, such as getting child list data},
...
}
}
</script>2. Parent list binding to parent list change event
In the template code of the child component, set the rowKey of the parent list to a unique identifier (such as id) in the parent list data object. Method to listen for change event @change of the parent list and pass the id of the selected parent list row as a parameter to the child component (e.g. doGetSkuList).
<template>
<a-table
...
:rowKey="record => " // Set the unique identifier of the parent list data object@change="doGetSkuList(selectedRowKeys[0])" // Pass the id of the selected parent list row as a parameter to the child component method...
>
...
</a-table>
</template>
<script>
export default {
...
methods: {
doGetSkuList(parentId) {
// Get child list data based on the id of the parent list row},
...
}
}
</script>3. Parent list click event is passed to child component
In the template code of the parent component, bind the child component's method (such as clickThenCheck) to the customRow of the parent list through the customRow property. When clicking on the data row of the parent list, the method of the child component is called.
<template>
<a-table
:customRow="clickThenCheck"
...
>
...
</a-table>
</template>
<script>
export default {
...
methods: {
clickThenCheck(record) { r
eturn {
on: { click: () => {
([]); // Method to pass the id of the clicked parent list row to the parent component}
}
};
},
...
}
}
</script>4. Subcomponent updates sublist data
In a child component method (such as doGetSkuList), the request is sent based on the id of the passed parent list row, the data of the corresponding child list is obtained, and the data of the child component is updated.
<template>
<a-table
:dataSource=""
...
>
...
</a-table>
</template>
<script>
export default {
...
methods: {
doGetSkuList(parentId) {
//Send the request according to the id of the parent list row to obtain the corresponding child list data //Update the data of the child component = [
/* Sublist data */
];
},
...
}
}
</script>Through the above steps, the function of obtaining child list data by clicking on the parent list data line can be realized. When clicking on the data row of the parent list, the method of the parent component will be triggered, the id of the selected parent list row is updated, and the id is passed to the child component's method. The child component obtains the corresponding child list data based on the id and updates the data of the child component.
This is the article about vue list-parent list data to obtain child list data. For more related vue parent list data to obtain child list data, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!