Vue.js 表格数据操作全攻略：实现过滤、排序、分页

2024-03-22 22:18:28

Vue.js 中实现表格过滤、排序和分页：全攻略

简介

数据表是大型应用程序中常见的呈现方式。为了优化用户体验，表格应该具备过滤、排序和分页的功能。本文将深入探讨如何在 Vue.js 中实现这些关键功能，提升你的应用程序的实用性和可用性。

数据获取与状态管理

首先，我们需要从服务器获取数据并将其存储在 Vuex 状态管理中。可以使用 Axios 等库来实现与服务器的交互。

import { mapActions } from 'vuex';

export default {
  mounted() {
    this.getData();
  },
  methods: {
    ...mapActions('tableData', ['getData']),
  },
};

表格过滤

使用 v-model 指令和 computed 属性可以实现表格过滤。computed 属性根据输入字段中的文本对数据进行过滤。

<input v-model="filterText" placeholder="Filter by name">

computed: {
  filteredData() {
    return this.tableData.filter(item => item.name.includes(this.filterText));
  },
},

表格排序

通过 v-on:click 指令和 computed 属性可以实现表格排序。computed 属性根据点击的列名对数据进行排序。

<th>
  <span v-on:click="sortBy('name')">Name</span>
</th>

methods: {
  sortBy(column) {
    this.tableData.sort((a, b) => (a[column] > b[column]) ? 1 : -1);
  },
},

分页

使用 v-for 指令和 slice 方法可以实现分页。slice 方法从数据集中提取当前页面的数据。

<ul>
  <li v-for="page in pages" :key="page">
    <a v-on:click="changePage(page)">{{ page }}</a>
  </li>
</ul>

computed: {
  pages() {
    return Math.ceil(this.tableData.length / this.pageSize);
  },
},
methods: {
  changePage(page) {
    this.currentPage = page;
  },
},

代码示例

下述代码示例展示了如何将上述功能组合起来：

<template>
  <div>
    <input v-model="filterText" placeholder="Filter by name">
    <table>
      <thead>
        <th>
          <span v-on:click="sortBy('name')">Name</span>
        </th>
        <th>
          <span v-on:click="sortBy('email')">Email</span>
        </th>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>
    </table>
    <ul>
      <li v-for="page in pages" :key="page">
        <a v-on:click="changePage(page)">{{ page }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      filterText: '',
      currentPage: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    tableData() {
      return this.$store.state.tableData.data;
    },
    filteredData() {
      return this.tableData.filter(item => item.name.includes(this.filterText));
    },
    pages() {
      return Math.ceil(this.tableData.length / this.pageSize);
    },
  },
  methods: {
    ...mapActions('tableData', ['getData']),
    sortBy(column) {
      this.tableData.sort((a, b) => (a[column] > b[column]) ? 1 : -1);
    },
    changePage(page) {
      this.currentPage = page;
    },
  },
};
</script>