vue3 动态生成表格

在 Vue3 中，可以使用 `v-for` 指令和动态绑定来生成动态表格。以下是一个简单的例子：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.id">{{ column.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="column in columns" :key="column.id">{{ row[column.field] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { id: 1, label: 'Name', field: 'name' },
        { id: 2, label: 'Age', field: 'age' },
        { id: 3, label: 'Email', field: 'email' }
      ],
      rows: [
        { name: 'John Doe', age: 30, email: 'john@example.com' },
        { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
        { name: 'Bob Johnson', age: 40, email: 'bob@example.com' }
      ]
    }
  }
}
</script>

在上面的例子中，我们定义了一个包含列信息和行数据的 data 对象。使用 `v-for` 指令，我们根据列信息动态生成表头，在表格主体中，我们使用双重 `v-for` 循环遍历行数据和列信息，动态生成表格内容。

这只是一个简单的示例，你可以根据你的需要修改列信息和行数据来生成你想要的表格。