当前位置：首页 > VUE

vue 实现table

2026-01-08 02:42:36VUE

Vue 实现 Table 的方法

使用原生 HTML 表格

通过 Vue 的 v-for 指令动态渲染表格数据，适合简单表格场景。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

使用第三方组件库

推荐使用成熟的 UI 库如 Element UI 或 Ant Design Vue，提供丰富的表格功能（排序、分页、筛选等）。

Element UI 示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

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

自定义可复用 Table 组件

封装高阶组件实现定制化需求，如动态列、插槽支持等。

<!-- TableComponent.vue -->
<template>
  <table>
    <slot name="header" :headers="headers">
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
    </slot>
    <slot name="body" :rows="rows">
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td v-for="(value, key) in row" :key="key">{{ value }}</td>
        </tr>
      </tbody>
    </slot>
  </table>
</template>

<script>
export default {
  props: ['headers', 'rows']
}
</script>

虚拟滚动优化

对于大数据量表格，使用 vue-virtual-scroller 等库实现性能优化。

vue 实现table

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