vue实现的表格

Vue 实现表格的方法

使用原生 HTML 表格

在 Vue 模板中可以直接使用 HTML 的 <table> 标签创建表格。数据可以通过 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>

使用第三方组件库

许多流行的 Vue UI 组件库提供了功能丰富的表格组件，例如 Element UI、Vuetify 或 Ant Design Vue。

以 Element UI 为例：

<template>
  <el-table :data="rows">
    <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 {
      rows: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

实现可编辑表格

通过结合 v-model 和自定义组件，可以实现可编辑的表格单元格。

<template>
  <table>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.id }}</td>
        <td>
          <input v-model="row.name" />
        </td>
        <td>
          <input v-model="row.age" type="number" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

表格排序和过滤

可以通过计算属性实现表格数据的排序和过滤功能。

computed: {
  sortedRows() {
    return [...this.rows].sort((a, b) => a.age - b.age)
  },
  filteredRows() {
    return this.rows.filter(row => row.age > 25)
  }
}

虚拟滚动优化

对于大型数据集，可以使用虚拟滚动技术优化性能，如 vue-virtual-scroller 库。

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

响应式表格设计

使用 CSS 媒体查询或 flexbox/grid 布局实现表格在不同屏幕尺寸下的响应式表现。

@media (max-width: 600px) {
  table {
    display: block;
  }
  tr {
    display: flex;
    flex-direction: column;
  }
}