用组合式在表格中渲染多行数据

在Vue中，使用组合式API（Composition API）来渲染表格中的多行数据是非常灵活的。你可以创建一个组件库，其中包含数据处理、状态管理和模板逻辑。这里是一个简单的例子：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <!-- 表头列 -->
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(row, rowIndex) in rows" :key="rowIndex">
          <tr>
            <!-- 模板循环每一行的数据 -->
            <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 假设你有以下数据
const headers = ['Name', 'Age', 'City'];
const data = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Jane', age: 25, city: 'London' },
  // 更多行...
];

// 使用ref管理数据
const rows = ref(data);
</script>

在这个例子中，`headers`数组定义了表头的内容，而`rows` ref则用于存储多行数据。`v-for`指令用于遍历这些数据并渲染到表格中。