vue实现表格数据显示

使用 Vue 实现表格数据显示

基础表格实现

在 Vue 中可以通过 v-for 指令动态渲染表格数据。以下是一个基础示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td v-for="(value, key) in item" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

使用计算属性处理数据

对于需要处理的数据，可以使用计算属性：

<script>
export default {
  data() {
    return {
      rawItems: [
        { id: 1, firstName: 'Alice', lastName: 'Smith', birthYear: 1995 },
        { id: 2, firstName: 'Bob', lastName: 'Johnson', birthYear: 1990 }
      ]
    }
  },
  computed: {
    processedItems() {
      return this.rawItems.map(item => ({
        id: item.id,
        fullName: `${item.firstName} ${item.lastName}`,
        age: new Date().getFullYear() - item.birthYear
      }))
    },
    headers() {
      return Object.keys(this.processedItems[0] || {})
    }
  }
}
</script>

使用第三方表格组件

对于更复杂的需求，可以使用如 Element UI 或 Vuetify 的表格组件：

<template>
  <el-table :data="items" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-plus'

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

表格分页实现

对于大量数据，可以添加分页功能：

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [...], // 所有数据
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.allItems.slice(start, start + this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.allItems.length / this.itemsPerPage)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    },
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    }
  }
}
</script>

表格排序功能

添加排序功能可以提升用户体验：

<template>
  <table>
    <thead>
      <tr>
        <th @click="sortBy('id')">ID</th>
        <th @click="sortBy('name')">Name</th>
        <th @click="sortBy('age')">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedItems" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      sortKey: '',
      sortOrder: 1 // 1 for ascending, -1 for descending
    }
  },
  computed: {
    sortedItems() {
      if (!this.sortKey) return this.items
      return [...this.items].sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1 * this.sortOrder
        if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortOrder
        return 0
      })
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</script>

响应式表格设计

确保表格在不同设备上显示良好：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}