vue el-table数据使用for循环生成多个tabel

你可以使用v-for指令在Vue中循环生成多个<el-table>组件。以下是一个示例：

<template>
  <div>
    <el-table v-for="tableData in tableDataList" :key="tableData.id" :data="tableData.data">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="gender" label="Gender"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableDataList: [
        {
          id: 1,
          data: [
            { name: 'John', age: 30, gender: 'Male' },
            { name: 'Jane', age: 25, gender: 'Female' },
            { name: 'Tom', age: 35, gender: 'Male' }
          ]
        },
        {
          id: 2,
          data: [
            { name: 'Alice', age: 28, gender: 'Female' },
            { name: 'Bob', age: 32, gender: 'Male' },
            { name: 'Linda', age: 40, gender: 'Female' }
          ]
        }
      ]
    };
  }
};
</script>

上面的代码中，tableDataList是一个包含多个表格数据的数组。通过使用v-for指令，我们循环遍历tableDataList数组，并为每个表格数据生成一个<el-table>组件。每个表格数据都有一个唯一的id属性，作为v-for指令的key值，以便Vue能够正确地跟踪和更新每个表格