首页父组件<el-table :data="tableData"> </el-table> import ElTable from '~/pages/user/creditCard'; const tableData = ref([ { type: '储蓄卡', number: '123', balance: '1241', }])把这个表格数据传给子组件页面的表格

父组件<el-table :data="tableData"> </el-table> import ElTable from '~/pages/user/creditCard'; const tableData = ref([ { type: '储蓄卡', number: '123', balance: '1241', }])把这个表格数据传给子组件页面的表格

时间: 2024-01-21 12:03:44 浏览: 106

可以使用 props 将父组件的 tableData 数据传递给子组件，然后在子组件中使用 props 接收数据，绑定到子组件的表格组件上。父组件代码： ``` <template> <div> <child-table :table-data="tableData"></child-table> </div> </template> <script> import ChildTable from '~/pages/child-table.vue' export default { components: { ChildTable }, data() { return { tableData: [ { type: '储蓄卡', number: '123', balance: '1241' } ] } } } </script> ``` 子组件代码： ``` <template> <el-table :data="tableData"> <el-table-column prop="type" label="类型"></el-table-column> <el-table-column prop="number" label="卡号"></el-table-column> <el-table-column prop="balance" label="余额"></el-table-column> </el-table> </template> <script> export default { props: { tableData: { type: Array, default: [] } } } </script> ``` 这样，父组件的 tableData 数据就会传递给子组件，子组件会接收到这个数据并将其渲染到表格中。

阅读全文