vuejs实现本地数据的筛选分页功能思路详解

Vue.js 实现本地数据的筛选和分页功能，可以分为以下几个步骤：

1. 准备数据

首先需要准备一份数据，可以是数组或者对象，包含了需要筛选和分页展示的数据。

2. 筛选数据

在 Vue 组件中，可以使用计算属性 computed 来筛选数据。在计算属性中，使用 JavaScript 数组的 filter 方法过滤数据。例如，如果需要根据关键字筛选数据，可以这样实现计算属性：

computed: {
  filteredData() {
    return this.data.filter(item => item.title.indexOf(this.keyword) !== -1);
  }
}

这里假设数据中每个对象都有一个 title 属性，我们通过输入框绑定的 keyword 来过滤 title 中包含关键字的数据。

3. 分页数据

分页功能可以使用第三方组件库，例如 Element UI 的分页组件，也可以自己实现。自己实现分页功能的思路，主要包括以下几个步骤：

- 定义每页展示的数据条数 pageSize。
- 根据 pageSize 计算出总页数 totalPage。
- 定义当前页码 currentPage，默认为 1。
- 根据 currentPage 和 pageSize，计算出当前页展示的数据列表 currentData。
- 点击页码时，改变 currentPage 的值，从而更新 currentData。

具体实现可以参考下面的代码示例：

<template>
  <div>
    <input v-model="keyword" placeholder="请输入关键字">
    <ul>
      <li v-for="item in currentData" :key="item.id">{{ item.title }}</li>
    </ul>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="filteredData.length"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      pageSize: 10,
      currentPage: 1,
      data: [
        { id: 1, title: 'Vue.js 实战教程' },
        { id: 2, title: 'JavaScript 高级编程' },
        ...
      ],
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(item => item.title.indexOf(this.keyword) !== -1);
    },
    currentData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredData.slice(startIndex, endIndex);
    },
  },
  methods: {
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

在上面的代码中，我们使用了计算属性 filteredData 来筛选数据，用 currentData 来分页展示数据。在分页组件上，监听 current-change 事件，调用 handlePageChange 方法来更新 currentPage 的值，从而更新 currentData。