vue 实现table

Vue 实现 Table 的基本方法

使用原生 HTML 表格

Vue 可以直接结合原生 HTML 的 <table> 标签实现表格功能，通过 v-for 动态渲染数据。

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

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'],
      data: [
        { Name: 'Alice', Age: 25, Email: 'alice@example.com' },
        { Name: 'Bob', Age: 30, Email: 'bob@example.com' }
      ]
    };
  }
};
</script>

使用第三方组件库

常见的 Vue UI 库（如 Element UI、Ant Design Vue、Vuetify）提供了功能丰富的 Table 组件。

Element UI 示例

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25, email: 'alice@example.com' },
        { name: 'Bob', age: 30, email: 'bob@example.com' }
      ]
    };
  }
};
</script>

自定义可复用 Table 组件

通过封装一个可复用的 Table 组件，支持动态列配置、排序、分页等功能。

<!-- TableComponent.vue -->
<template>
  <table>
    <thead>
      <tr>
        <th 
          v-for="column in columns" 
          :key="column.key"
          @click="sortTable(column.key)"
        >
          {{ column.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sortedData" :key="row.id">
        <td v-for="column in columns" :key="column.key">
          {{ row[column.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array,
    columns: Array
  },
  data() {
    return {
      sortKey: '',
      sortOrder: 'asc'
    };
  },
  computed: {
    sortedData() {
      if (!this.sortKey) return this.data;
      const order = this.sortOrder === 'asc' ? 1 : -1;
      return [...this.data].sort((a, b) => {
        return a[this.sortKey] > b[this.sortKey] ? order : -order;
      });
    }
  },
  methods: {
    sortTable(key) {
      if (this.sortKey === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortKey = key;
        this.sortOrder = 'asc';
      }
    }
  }
};
</script>

高级功能实现

表格常需支持分页、筛选、编辑等交互功能。

分页实现

<template>
  <div>
    <table>...</table>
    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page"
        @click="currentPage = page"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.data.slice(start, start + this.pageSize);
    },
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize);
    }
  }
};
</script>

单元格编辑功能

<template>
  <table>
    <tr v-for="row in data" :key="row.id">
      <td v-for="col in columns" :key="col.key">
        <span v-if="!row.editing">{{ row[col.key] }}</span>
        <input 
          v-else 
          v-model="row[col.key]" 
          @blur="row.editing = false"
        >
        <button @click="row.editing = !row.editing">Edit</button>
      </td>
    </tr>
  </table>
</template>

性能优化建议

对于大数据量的表格，可采用虚拟滚动技术（如 vue-virtual-scroller）避免渲染全部行。

<template>
  <RecycleScroller
    :items="data"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </template>
  </RecycleScroller>
</template>