当前位置：首页 > VUE

vue数据表格实现

2026-01-22 17:51:06VUE

Vue 数据表格实现方法

使用 Element UI 的 el-table 组件

Element UI 提供了功能强大的表格组件 el-table，支持排序、筛选、分页等功能。

安装 Element UI：

npm install 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: '北京市'
        },
        {
          date: '2023-01-02',
          name: '李四',
          address: '上海市'
        }
      ]
    }
  }
}
</script>

使用 Vuetify 的 v-data-table 组件

Vuetify 是 Material Design 风格的 Vue UI 组件库，其 v-data-table 组件功能丰富。

安装 Vuetify：

npm install vuetify

基础表格示例代码：

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Dessert', value: 'name' },
        { text: 'Calories', value: 'calories' }
      ],
      desserts: [
        { name: 'Frozen Yogurt', calories: 159 },
        { name: 'Ice cream sandwich', calories: 237 }
      ]
    }
  }
}
</script>

自定义表格组件

对于更灵活的需求，可以自定义表格组件。

基础自定义表格示例：

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

<script>
export default {
  props: {
    headers: Array,
    rows: Array
  }
}
</script>

表格性能优化

对于大数据量的表格，可以使用虚拟滚动技术提高性能。

安装 vue-virtual-scroller：

npm install vue-virtual-scroller

示例代码：

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

表格功能扩展

常见表格功能可以通过以下方式实现：

排序功能

<el-table :data="tableData" @sort-change="handleSortChange">
  <el-table-column prop="date" label="日期" sortable></el-table-column>
</el-table>

methods: {
  handleSortChange({ prop, order }) {
    // 排序逻辑
  }
}

分页功能

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30]"
  :page-size="10"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

筛选功能

<el-table-column prop="status" label="状态">
  <template #header>
    <el-select v-model="statusFilter" placeholder="筛选状态">
      <el-option label="全部" value=""></el-option>
      <el-option label="启用" value="active"></el-option>
    </el-select>
  </template>
</el-table-column>

vue数据表格实现