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

可以使用 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 数据就会传递给子组件，子组件会接收到这个数据并将其渲染到表格中。