vue列表-父列表数据获取子列表数据

概述

本文档将介绍如何通过点击父列表（表格）中的数据行来获取到子列表（表格）的数据。代码示例是基于Vue框架实现的一个组件，包含了父列表和子列表，通过点击父列表的数据行来动态获取子列表的数据。

实现步骤

以下是通过点击父列表数据行获取子列表数据的具体实现步骤：

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 // 执行其他操作，例如获取子列表数据 
}, 
... 
} 
} 
</script>

2. 子列表绑定父列表变化事件

在子组件的模板代码中，将父列表的rowKey设置为父列表数据对象中的唯一标识符（例如id）。监听父列表的变化事件@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发送请求，获取对应的子列表的数据，并更新子组件的数据。

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

通过以上步骤，即可实现通过点击父列表数据行来获取子列表数据的功能。当点击父列表的数据行时，会触发父组件的方法，更新选中的父列表行的id，并将id传递给子组件的方法，子组件根据id获取对应的子列表数据，并更新子组件的数据。