当前位置：首页 > VUE

vue实现表

2026-01-12 19:28:57VUE

Vue实现表格的基本方法

使用Vue实现表格功能可以通过多种方式完成，以下是几种常见的方法：

使用原生HTML表格结合Vue数据绑定

<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="cell in row" :key="cell">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

使用第三方表格组件库

Element UI的表格组件：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

Vuetify的表格组件：

<template>
  <v-data-table :headers="headers" :items="items"></v-data-table>
</template>

实现表格的高级功能

分页功能

使用Element UI实现分页：

<template>
  <el-table :data="currentTableData">
    <!-- 表格列定义 -->
  </el-table>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total">
  </el-pagination>
</template>

排序功能

添加排序功能：

<el-table :data="tableData" @sort-change="handleSortChange">
  <el-table-column prop="date" label="Date" sortable></el-table-column>
  <!-- 其他列 -->
</el-table>

筛选功能

实现筛选：

<el-table :data="filteredData">
  <el-table-column prop="name" label="Name">
    <template #header>
      <el-input v-model="searchName" placeholder="Search name"></el-input>
    </template>
  </el-table-column>
</el-table>

自定义表格组件

创建可复用的表格组件：

<!-- TableComponent.vue -->
<template>
  <table>
    <thead>
      <slot name="header"></slot>
    </thead>
    <tbody>
      <slot name="body" v-for="item in data" :item="item"></slot>
    </tbody>
  </table>
</template>

<script>
export default {
  props: ['data']
}
</script>

使用自定义组件：

<template>
  <table-component :data="tableData">
    <template #header>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </template>
    <template #body="{ item }">
      <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </template>
  </table-component>
</template>

vue实现表