当前位置：首页 > VUE

使用vue实现表格

2026-01-15 04:58:54VUE

使用 Vue 实现表格

Vue.js 提供了灵活的方式来实现表格功能，可以通过组合 v-for 指令和动态数据绑定快速构建表格。以下是几种常见的实现方法：

基础表格实现

通过 v-for 遍历数组数据生成表格行，动态绑定数据到单元格：

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

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

动态列与排序功能

添加排序功能需在列头绑定点击事件，通过计算属性处理排序逻辑：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" 
            :key="header.key"
            @click="sortBy(header.key)">
          {{ header.label }}
          <span v-if="sortKey === header.key">
            {{ sortOrder > 0 ? '↑' : '↓' }}
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedItems" :key="item.id">
        <td v-for="header in headers" :key="header.key">{{ item[header.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      sortKey: '',
      sortOrder: 1,
      headers: [
        { key: 'name', label: 'Name' },
        { key: 'age', label: 'Age' }
      ],
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  },
  computed: {
    sortedItems() {
      const key = this.sortKey
      return [...this.items].sort((a, b) => {
        return (a[key] > b[key] ? 1 : -1) * this.sortOrder
      })
    }
  },
  methods: {
    sortBy(key) {
      this.sortOrder = this.sortKey === key ? -this.sortOrder : 1
      this.sortKey = key
    }
  }
}
</script>

使用第三方组件库

对于复杂需求，可借助现成组件库如 Element UI 或 Vuetify：

<template>
  <el-table :data="items" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="age" label="Age" />
    <el-table-column label="Operation">
      <template #default="scope">
        <el-button @click="handleEdit(scope.row)">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      console.log('Edit:', row)
    }
  }
}
</script>

性能优化建议

大数据量场景下使用虚拟滚动技术，可集成 vue-virtual-scroller：

<template>
  <RecycleScroller
    class="table-body"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="row">
      <div class="cell">{{ item.name }}</div>
      <div class="cell">{{ item.age }}</div>
    </div>
  </RecycleScroller>
</template>

<style>
.table-body {
  height: 500px;
}
.row {
  display: flex;
}
.cell {
  width: 200px;
}
</style>

以上方法覆盖了从基础实现到高级功能的完整方案，可根据实际需求选择适合的方式。对于企业级应用，推荐使用成熟的 UI 组件库以节省开发时间。

使用vue实现表格