如何将一个el-table组件，在多个不同的div容器中显示

在 Vue 中，你可以使用动态组件或者模板嵌套来实现在多个不同的 div 容器中显示同一个 `el-table` 组件。这里我们介绍两种常见的方法：

**方法一：动态组件**
1. 首先，你需要定义一个父组件（例如 App.vue 或者 Layout.vue），在这个组件中创建一个数组或对象，存储每个表格的数据和相关的配置。

<template>
  <div>
    <div v-for="tableData in tableDataList" :key="tableData.id">
      <el-table :data="tableData.data" :config="tableData.config"></el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableDataList: [
        { id: '1', data: yourTable1Data, config: yourTable1Config },
        { id: '2', data: yourTable2Data, config: yourTable2Config },
        // 更多数据...
      ]
    };
  }
};
</script>

2. 每个表格的数据 (`data`) 和配置 (`config`) 都可以在 `tableDataList` 对象中定义，根据需要动态设置。

**方法二：模板嵌套**
如果你希望每个表格有各自的样式或者行为，可以考虑在一个父组件中包含多个子组件，每个子组件对应一个表格。

1. 创建一个单独的表格组件，比如 TableComponent.vue。

<template>
  <el-table :data="data" :config="config"></el-table>
</template>

<script>
export default {
  props: ['data', 'config']
};
</script>

2. 在父组件中，循环渲染这些子组件，传递不同的数据和配置。

<template>
  <div>
    <table-component v-for="tableData in tableDataList" :key="tableData.id" :data="tableData.data" :config="tableData.config"></table-component>
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue';

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      tableDataList: [
        { id: '1', data: yourTable1Data, config: yourTable1Config },
        { id: '2', data: yourTable2Data, config: yourTable2Config },
        // 更多数据...
      ]
    };
  }
};
</script>