vue实现搜索分页

实现搜索分页的基本思路

在Vue中实现搜索分页功能通常需要结合以下几个关键点：数据绑定、搜索过滤、分页逻辑处理。以下是一个完整的实现方案。

数据准备与绑定

定义数据列表和分页相关变量，通常包括当前页、每页条数、总条数等。在Vue的data中初始化这些变量：

data() {
  return {
    searchQuery: '',       // 搜索关键词
    items: [],             // 原始数据列表
    filteredItems: [],     // 过滤后的数据列表
    currentPage: 1,        // 当前页码
    itemsPerPage: 10,      // 每页显示条数
    totalItems: 0          // 总条数
  }
}

搜索过滤逻辑

通过计算属性或方法实现搜索过滤。计算属性会根据搜索关键词动态过滤数据：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }
}

分页计算逻辑

计算当前页显示的数据切片，通常结合slice方法实现：

computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.filteredItems.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.filteredItems.length / this.itemsPerPage)
  }
}

分页控件实现

在模板中添加分页控件，通常包括页码按钮和上一页/下一页按钮：

<div>
  <input v-model="searchQuery" placeholder="搜索...">
  <ul>
    <li v-for="item in paginatedItems" :key="item.id">{{ item.name }}</li>
  </ul>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span v-for="page in totalPages" :key="page">
      <button @click="currentPage = page" :class="{ active: currentPage === page }">{{ page }}</button>
    </span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</div>

分页方法实现

添加分页导航的方法：

methods: {
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--
    }
  },
  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++
    }
  }
}

样式优化

为分页控件添加基本样式：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
}
.pagination button.active {
  background-color: #42b983;
  color: white;
}

完整组件示例

将上述代码整合成一个完整的Vue组件：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span v-for="page in totalPages" :key="page">
        <button @click="currentPage = page" :class="{ active: currentPage === page }">{{ page }}</button>
      </span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        // 更多数据...
      ],
      currentPage: 1,
      itemsPerPage: 2
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      })
    },
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.filteredItems.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.filteredItems.length / this.itemsPerPage)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
}
.pagination button.active {
  background-color: #42b983;
  color: white;
}
</style>

后端API集成方案

如果需要从后端API获取分页数据，可以修改为以下实现方式：

methods: {
  async fetchData() {
    const params = {
      page: this.currentPage,
      pageSize: this.itemsPerPage,
      keyword: this.searchQuery
    }
    const response = await axios.get('/api/items', { params })
    this.items = response.data.items
    this.totalItems = response.data.total
  },
  handleSearch() {
    this.currentPage = 1
    this.fetchData()
  }
}

在模板中添加搜索按钮或使用watch监听搜索词变化：

<input v-model="searchQuery" @input="handleSearch" placeholder="搜索...">

性能优化建议

对于大数据量情况，考虑以下优化措施：

• 使用防抖处理搜索输入，避免频繁触发搜索
• 实现虚拟滚动代替完整列表渲染
• 在后端实现搜索和分页逻辑，减少前端计算压力