vue 打印动态表格

在Vue中打印动态表格，你可以使用Vue的v-for指令来循环渲染表格的行和列。以下是一个简单的示例代码：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column">{{ column }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td v-for="column in columns" :key="column">{{ item[column] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: ['Name', 'Age', 'Email'],
      items: [
        { id: 1, Name: 'John Doe', Age: 25, Email: 'john@example.com' },
        { id: 2, Name: 'Jane Smith', Age: 32, Email: 'jane@example.com' },
        { id: 3, Name: 'Bob Johnson', Age: 45, Email: 'bob@example.com' },
      ]
    }
  }
}
</script>

在这个示例中，`columns`数组定义了表格的列名，`items`数组包含了要显示的数据。在表格的头部使用v-for指令循环渲染每一列的标题，然后在表格的主体部分使用v-for指令循环渲染每一行的单元格。