在vue使用table 封装table组件

<template>
  <table style="width: 100%; height: 400px; color: red">
    <thead style="width: 100%; height: 100px;">
      <tr>
        <th v-for="header in headers" :key="header.key">
          {{ header.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="i in headers" :key="i.key">
          {{ row[i.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>
 
<script>
export default {
  name: 'SimpleTable',
  data() {
    return {
      headers: [
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Name' },
        { key: 'email', label: 'Email' }
      ],
      data: [
        { id: 1, email: 'jo99999hn@example.com', name: 'John Doe' },
        { id: 2, email: 'jane@example.com', name: 'Jane Doe9999', }
      ]
    }
  }
}
</script>