当前位置：首页 > VUE

vue循环实现表格

2026-03-30 12:06:59VUE

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 tableData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  }
}
</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 tableData" :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' }
      ],
      tableData: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ]
    }
  }
}
</script>

嵌套数据循环

处理嵌套对象或数组：

<template>
  <table>
    <tr v-for="user in users" :key="user.id">
      <td>{{ user.name }}</td>
      <td>
        <table>
          <tr v-for="order in user.orders" :key="order.id">
            <td>{{ order.product }}</td>
            <td>{{ order.price }}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</template>

带索引的循环

需要显示行号时使用索引：

vue循环实现表格

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

性能优化建议

始终为v-for提供唯一的:key属性
大数据量时考虑虚拟滚动方案
复杂表格可使用专用组件库如Element UI的el-table

以上方法可根据实际需求组合使用，Vue的响应式特性会在数据变化时自动更新表格渲染。

标签: 表格 vue

分享给朋友：

javascript实现vue

Vue.js 的基本实现在 JavaScript 中实现 Vue.js 的核心功能，主要包括数据绑定、响应式系统和虚拟 DOM。以下是一个简化的实现示例。数据响应式系统通过 Object.de…

vue 实现搜索

实现 Vue 搜索功能在 Vue 中实现搜索功能通常涉及以下几个关键步骤：数据绑定与输入监听使用 v-model 双向绑定搜索输入框的值，监听用户输入： <template>…

vue实现答题

Vue 实现答题功能数据结构设计使用 Vue 的响应式特性管理题目和答案数据。通常需要以下数据结构： data() { return { questions: [ {…

vue实现pwa

Vue 实现 PWA 的步骤 Vue 结合 PWA（Progressive Web App）可以创建离线可用的 Web 应用。以下是实现方法：安装 Vue CLI 并创建项目确保已安装 Vue…

vue实现书库

Vue 实现书库功能使用 Vue 构建书库功能需要结合前端框架和后端数据管理。以下是实现步骤和关键点：项目初始化使用 Vue CLI 或 Vite 初始化项目，安装 Vue Router 和状…

vue实现双击

Vue 实现双击事件的方法在Vue中实现双击事件可以通过以下几种方式完成，具体选择取决于项目需求和开发习惯。使用 @dblclick 指令 Vue提供了内置的@dblclick指令，可以直接在模…

vue循环实现表格