vue3setup 对列表进行关键词搜索筛选 列表有分页 第二页搜到的内容没有显示在第一页里 怎么让搜索到的内容都显示在第一页

在Vue3的`<script setup>`中处理这种列表搜索和分页的问题，你可以考虑以下几个步骤：

1. **状态管理**：首先，你需要在`setup`中创建相应的数据状态，比如`searchKeyword`用于存储用户输入的关键词，`currentPage`表示当前页面，以及一个`filteredData`数组，用于存放经过搜索后的数据。

import { ref } from 'vue';

const searchKeyword = ref('');
const currentPage = ref(1);
const allItems = // 获取初始完整数据源
let filteredData = ref([]);

2. **搜索函数**：当用户输入关键词时，更新`filteredData`，这里可以使用`filter()`方法过滤出匹配的项目。

function handleSearch() {
  const searchText = searchKeyword.value.toLowerCase();
  filteredData.value = allItems.value.filter(item => item.name.toLowerCase().includes(searchText));
}

3. **分页逻辑**：在`setup`中，你可以计算每页应该展示的数据，并在渲染列表时只取当前页范围内的内容。这通常会涉及到一个简单的数学公式：`itemsPerPage * currentPage` 和 `Math.min(itemsPerPage, items.length - (currentPage - 1) * itemsPerPage)`。

4. **列表渲染**：在模板中，只渲染`filteredData.slice(-perPage)`的部分，`perPage`是你想要每页显示的项目的数量。

<template>
  <div>
    <input v-model="searchKeyword" @input="handleSearch" />
    <ul>
      <li v-for="item in filteredData.slice(-(perPage * currentPage), -(currentPage - 1) * perPage)" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- 添加分页组件 -->
  </div>
</template>

5. **分页组件**：你可以使用`@page-change`事件监听用户的分页操作，然后更新`currentPage`和重新计算视图。

如果你发现第二页搜索结果没出现在第一页，可能是由于计算索引的位置出现了错误，需要再次检查上述代码，确保每次切换页面时都正确地计算了显示的项。