vue循环实现表格

Vue 循环实现表格的方法

在 Vue 中，可以通过 v-for 指令循环渲染表格数据。以下是一些常见的实现方式：

基础表格循环

使用 v-for 循环数组数据生成表格行：

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 35 }
      ]
    }
  }
}
</script>

嵌套循环实现表头

如果需要动态生成表头，可以使用嵌套循环：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td v-for="col in columns" :key="col.key">{{ item[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'id', title: 'ID' },
        { key: 'name', title: 'Name' },
        { key: 'age', title: 'Age' }
      ],
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 35 }
      ]
    }
  }
}
</script>

带索引的循环

可以通过 v-for 的第二个参数获取索引：

<tr v-for="(item, index) in items" :key="item.id">
  <td>{{ index + 1 }}</td>
  <td>{{ item.name }}</td>
  <td>{{ item.age }}</td>
</tr>

对象属性循环

循环对象的属性生成表格：

<template>
  <table>
    <tr v-for="(value, key) in user" :key="key">
      <td>{{ key }}</td>
      <td>{{ value }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 25,
        gender: 'female'
      }
    }
  }
}
</script>

使用计算属性处理数据

对于需要处理的数据，可以使用计算属性：

<template>
  <table>
    <tr v-for="item in processedItems" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.fullName }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, firstName: 'Alice', lastName: 'Smith', age: 25 },
        { id: 2, firstName: 'Bob', lastName: 'Johnson', age: 30 }
      ]
    }
  },
  computed: {
    processedItems() {
      return this.items.map(item => ({
        ...item,
        fullName: `${item.firstName} ${item.lastName}`
      }))
    }
  }
}
</script>

这些方法展示了 Vue 中实现表格循环的各种场景，可以根据实际需求选择合适的方式。