vue 实现页面 表格

Vue 实现表格的基本方法

在 Vue 中实现表格可以通过多种方式，包括原生 HTML 表格、第三方组件库或自定义组件。以下是几种常见的方法：

使用原生 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 data" :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'],
      data: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    };
  }
};
</script>

使用 Element UI 表格组件 Element UI 提供了功能丰富的表格组件，支持排序、分页等高级功能：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: 'Alice', address: 'Address 1' },
        { date: '2023-01-02', name: 'Bob', address: 'Address 2' }
      ]
    };
  }
};
</script>

使用 Vuetify 数据表格 Vuetify 的 v-data-table 组件支持服务端分页、自定义模板等功能：

<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: 200 },
        { name: 'Ice cream', calories: 300 }
      ]
    };
  }
};
</script>

实现表格的高级功能

分页处理 结合 v-pagination 或组件库自带的分页功能实现数据分页：

<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="totalItems">
</el-pagination>

表格排序 通过监听 sort-change 事件实现客户端或服务端排序：

methods: {
  handleSortChange(column) {
    this.sortBy = column.prop;
    this.sortOrder = column.order;
    this.fetchData();
  }
}

自定义单元格内容 使用插槽机制自定义表格单元格的渲染方式：

<el-table-column label="Operations">
  <template #default="scope">
    <el-button @click="handleEdit(scope.row)">Edit</el-button>
  </template>
</el-table-column>

性能优化建议

对于大数据量表格，考虑使用虚拟滚动技术。第三方库如 vue-virtual-scroller 可以优化渲染性能：

import { RecycleScroller } from 'vue-virtual-scroller';

服务端分页和懒加载能有效减少初始加载数据量，提升用户体验。通过监听滚动事件动态加载数据：

window.addEventListener('scroll', this.handleScroll);

表格实现时需根据项目需求选择合适方案，平衡功能丰富性和性能要求。组件库提供开箱即用的解决方案，而自定义表格则更灵活但开发成本较高。