,可以通过以下步骤实现:
以下是一个示例代码:
<!-- 父组件 -->
<template>
<div>
<child-component :data="tableData"></child-component>
</div>
</template>
<script>
import axios from 'axios';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
tableData: []
};
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
this.tableData = response.data;
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
<!-- 子组件 -->
<template>
<table>
<tr v-for="row in data" :key="row.id">
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>
<button @click="deleteRow(row.id)">删除</button>
</td>
</tr>
</table>
</template>
<script>
export default {
props: ['data'],
methods: {
deleteRow(id) {
// 执行删除操作,可以通过调用父组件中的方法来更新数据
this.$emit('delete', id);
}
}
};
</script>
在上述示例中,父组件通过异步请求获取数据,并将数据传递给子组件。子组件使用v-for指令遍历数据表行,并渲染每一行的内容。每一行都包含一个删除按钮,点击按钮会触发子组件中的deleteRow方法,可以在该方法中执行删除操作,并通过调用父组件中的方法来更新数据。
请注意,上述示例中的代码仅为示意,实际应用中可能需要根据具体情况进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云