当前位置：首页 > VUE

vue 表格实现

2026-01-06 23:28:58VUE

Vue 表格实现方法

在 Vue 中实现表格功能可以通过多种方式完成，以下介绍几种常见的方法：

使用原生 HTML 表格

最简单的表格可以通过 Vue 模板中的原生 HTML 表格元素实现：

<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: ['姓名', '年龄', '职业'],
      items: [
        { id: 1, 姓名: '张三', 年龄: 25, 职业: '工程师' },
        { id: 2, 姓名: '李四', 年龄: 30, 职业: '设计师' }
      ]
    }
  }
}
</script>

使用第三方组件库

主流 UI 框架如 Element UI、Ant Design Vue 等提供了功能丰富的表格组件：

Element UI 示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2023-01-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

实现可编辑表格

通过结合表单元素可以实现可编辑表格：

<template>
  <table>
    <tr v-for="(item, index) in items" :key="index">
      <td>
        <input v-model="item.name" @blur="saveItem(index)">
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '初始值' }
      ]
    }
  },
  methods: {
    saveItem(index) {
      console.log('保存修改:', this.items[index])
    }
  }
}
</script>

表格性能优化

对于大数据量的表格，可以使用虚拟滚动技术：

<template>
  <virtual-list :size="40" :remain="10" :data="bigData">
    <template #default="{ item }">
      <div class="row">{{ item.name }}</div>
    </template>
  </virtual-list>
</template>

表格排序和筛选

实现基本的排序和筛选功能：

computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => a.age - b.age)
  },
  filteredItems() {
    return this.items.filter(item => item.age > 25)
  }
}

以上方法可以根据具体需求选择使用，原生表格适合简单场景，组件库提供了更多开箱即用的功能，自定义实现则提供了最大的灵活性。

vue 表格实现