vue父列表数据获取子列表数据的实现步骤

<template> 
<a-table 
:rowSelection="rowSelection" 
... 
> 
... 
</a-table> 
</template> 
<script> 
export default { 
... 
data() { 
return { 
selectedRowKeys: [] // 用于存储选中的父列表行的id 
}; 
}, 
methods: { o
nSelectChange(selectedRowKeys) { 
this.selectedRowKeys = selectedRowKeys; // 更新选中的父列表行的id // 执行其他操作，例如获取子列表数据 
}, 
... 
} 
} 
</script>

<template> 
<a-table 
... 
:rowKey="record => record.id" // 设置父列表数据对象的唯一标识符 
@change="doGetSkuList(selectedRowKeys[0])" // 将选中的父列表行的id作为参数传递给子组件方法 
... 
> 
... 
</a-table> 
</template> 
<script> 
export default { 
... 
methods: { 
doGetSkuList(parentId) { 
// 根据父列表行的id获取子列表数据 
}, 
... 
} 
} 
</script>

<template> 
<a-table 
:customRow="clickThenCheck" 
... 
> 
... 
</a-table> 
</template> 
<script> 
export default { 
... 
methods: { 
clickThenCheck(record) { r
eturn { 
on: { click: () => { 
this.onSelectChange([record.id]); // 将点击的父列表行的id传递给父组件的方法 
} 
} 
}; 
}, 
... 
} 
} 
</script>

<template> 
<a-table 
:dataSource="sku.data" 
...
> 
... 
</a-table> 
</template> 
<script> 
export default { 
... 
methods: { 
doGetSkuList(parentId) { 
// 根据父列表行的id发送请求，获取对应的子列表数据 // 更新子组件的数据 
this.sku.data = [
/* 子列表数据 */
]; 
}, 
... 
} 
} 
</script>