<template> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr v-for="person in people" :key="person.id"> <td :style="{ backgroundColor: person.color }">{{ person.name }}</td> <td :style="{ backgroundColor: person.color }">{{ person.age }}</td> <td :style="{ backgroundColor: person.color }">{{ person.gender }}</td> </tr> </tbody> </table></template><script> export default { data() { return { people: [ { id: 1, name: '张三', age: 20, gender: '男', color: 'red' }, { id: 2, name: '李四', age: 25, gender: '女', color: 'green' }, { id: 3, name: '王五', age: 30, gender: '男', color: 'blue' } ] } } }</script>美化此表格

好的，以下是一个美化后的 Vue 表格展示示例：

<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in people" :key="person.id">
          <td :style="{ backgroundColor: person.color }">{{ person.name }}</td>
          <td :style="{ backgroundColor: person.color }">{{ person.age }}</td>
          <td :style="{ backgroundColor: person.color }">{{ person.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: '张三', age: 20, gender: '男', color: 'red' },
        { id: 2, name: '李四', age: 25, gender: '女', color: 'green' },
        { id: 3, name: '王五', age: 30, gender: '男', color: 'blue' }
      ]
    }
  }
}
</script>

<style>
.table-container {
  margin: 20px auto;
  width: 80%;
  max-width: 800px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
  text-align: left;
  padding: 10px;
}

td {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在上面的示例中，我们添加了一个包含表格的容器，并使用 CSS 样式来美化表格。我们使用 `margin` 和 `width` 属性来设置容器的外边距和宽度，并使用 `max-width` 属性来限制容器的最大宽度。我们还使用 `border-collapse` 属性将表格边框合并，并使用 `th` 和 `td` 元素的样式值来设置表头和单元格的样式。您可以根据需要调整样式值来自定义表格的外观。