vue.js 绑定table

<template>
  <div>
    <table border="1">
      <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in data" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'],
      data: [
        ['Alice', 30, 'alice@example.com'],
        ['Bob', 25, 'bob@example.com'],
        ['Charlie', 35, 'charlie@example.com']
      ]
    };
  }
};
</script>

<style>
/* 样式可以根据需要进行调整 */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>