vue3 table

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in tableData" :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', 'Occupation'],
      tableData: [
        ['Alice', 24, 'Engineer'],
        ['Bob', 30, 'Designer'],
        ['Charlie', 28, 'Manager']
      ]
    };
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 <table> 元素来创建表格。
   • 表头 (<thead>) 中使用 v-for 指令遍历 headers 数组，动态生成表头内容。
   • 表体 (<tbody>) 中使用双重 v-for 指令遍历 tableData 数组，动态生成每一行和每一列的内容。

2. 脚本部分 (<script>):

   • 定义了一个 Vue 组件，其中 data 函数返回一个对象，包含 headers 和 tableData 两个属性。
   • headers 是一个字符串数组，表示表格的表头。
   • tableData 是一个二维数组，每个子数组代表表格中的一行数据。

3. 样式部分 (<style scoped>):

   • 使用了简单的 CSS 样式来美化表格，包括设置宽度、边框和内边距等。
   • scoped 属性确保这些样式仅应用于当前组件。