vue 多个el-card,其中每个el-card对应一个el-table组合

可以使用Vue的组件化思想，将每个el-card和对应的el-table封装成一个组件，然后在父组件中动态渲染多个子组件。具体步骤如下：

1. 创建一个名为CardTable的组件，包含一个el-card和一个el-table，代码如下：

<template>
  <el-card class="card-table">
    <div slot="header">{{ title }}</div>
    <el-table :data="tableData" :height="tableHeight" style="width: 100%">
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width"></el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'CardTable',  props: {
    title: {
      type: String,
      default: ''
    },
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    tableHeight: {
      type: Number,
      default: 300
    }
  }
}
</script>

<style scoped>
.card-table {
  min-height: 100%;
  height: 100%;
}
</style>

2. 在父组件中引入CardTable组件，并动态渲染多个组件，代码如下：

<template>
  <div>
    <card-table v-for="(table, index) in tables" :key="index" :title="table.title" :table-data="table.data" :columns="table.columns"></card-table>
  </div>
</template>

<script>
import CardTable from './CardTable.vue'

export default {
  name: 'MultiCardTable',
  components: {
    CardTable
  },
  data() {
    return {
      tables: [
        {
          title: 'Table 1',
          data: [
            { name: 'John', age: 18, address: 'New York' },
            { name: 'Mike', age: 22, address: 'London' },
            { name: 'Lucy', age: 25, address: 'Paris' }
          ],
          columns: [
            { label: 'Name', prop: 'name', width: '150' },
            { label: 'Age', prop: 'age', width: '150' },
            { label: 'Address', prop: 'address' }
          ]
        },
        {
          title: 'Table 2',
          data: [
            { name: 'Tom', age: 30, address: 'Tokyo' },
            { name: 'Jerry', age: 28, address: 'Seoul' },
            { name: 'Kate', age: 26, address: 'Sydney' }
          ],
          columns: [
            { label: 'Name', prop: 'name', width: '150' },
            { label: 'Age', prop: 'age', width: '150' },
            { label: 'Address', prop: 'address' }
          ]
        }
      ]
    }
  }
}
</script>

以上代码中，父组件中的tables数组包含了多个子组件需要的数据，包括表格标题、表格数据和表格列信息。在模板中使用v-for指令动态渲染多个CardTable组件，每个组件的数据都来自于tables数组中的一个元素。