Vuejs2 在vue 2.6版中添加自定义分页和筛选器

从Vue文档中可以看出，Vue 2不支持v-for标记中的limitBy和filterBy。我必须创建一个带有自定义分页和搜索的列表视图。我不想使用我的UI看起来像的表搜索

搜索功能在这里运行良好。我想将分页添加到此vue。这是我的密码

     <ul class="project_names mt-xl-5 mt-3">

        <li v-for="item in filteredList">

            <a :href="'/InvoicePages/Projects/Create?id='+item.Id" class="edit">
                <div class="row">
                    <div class="col-md-3">
                        <img src="../../wwwroot/lib/tuna/images/project_ico.png" class="img-fluid">
                    </div>
                    <div class="col-md-9">
                        <h4>{{item.Name}}</h4>

                        <h6 style="display: inline-block;width: 110px;color: #000;text-transform: uppercase;">Total amount</h6>
                        <span style="color: #000;">: $ {{item.SubmittedAmount}}</span>

                        <h6 style="display: inline-block;width: 110px;color: #000;text-transform: uppercase;">current budget revision</h6>
                        <span style="color: #000;">: {{item.BudgetRevisionNo}}</span>

                        <h6 style="display: inline-block;width: 110px;color: #000;text-transform: uppercase;">unallocated</h6>
                        <span style="color: #000;">: $ {{item.SubmittedAmount}}</span>

                        <h6 style="display: inline-block;width: 110px;color: #000;text-transform: uppercase;">PO's</h6>
                        <span style="color: #000;">: $ {{item.UnallocattedAmount}}</span>

                        <h6 style="display: inline-block;width: 110px;color: #000;text-transform: uppercase;">invoiced</h6>
                        <span style="color: #000;">: $ {{item.UnallocattedAmount}}</span>

                    </div>
                </div>
            </a>
        </li>


 
    </ul>

剧本是

<script>

export default {
    name: "project-list",
    data: () => ({
        Project: ProjectJson,
        search: '',
   
    }),
    computed: {
        filteredList() {
        this.Project.filter(project => {
                return project.Name.toLowerCase().includes(this.search.toLowerCase()) 
                    || project.BudgetRevisionNo.toString().toLowerCase().includes(this.search.toLowerCase())
                    || project.UnallocattedAmount.toString().includes(this.search.toLowerCase())
                    || project.SubmittedAmount.toString().includes(this.search.toLowerCase())

        })
      
        },
   
    }
};

导出默认值{
名称：“项目清单”，
数据：（）=>({
项目名称：ProjectJson，
搜索：“”，
}),
计算：{
过滤器列表（）{
this.Project.filter（项目=>{
return project.Name.toLowerCase（）.includes（this.search.toLowerCase（））
||project.BudgetRevisionNo.toString（）.toLowerCase（）.includes（this.search.toLowerCase（））
||project.UnallocatedAmount.toString（）包括（this.search.toLowerCase（））
||project.SubmittedAmount.toString（）包括（this.search.toLowerCase（））
})
},
}
};

---

我的问题是如何将分页添加到此vue和计算函数filteredList（）以返回基于分页的结果。

好的，下面有几个步骤。如果我能清楚地解释，让我试试

首先，您需要分页组件。您可以自己实现它，但是有 已经有好的组件可用。让我们拿 遵循安装和混淆程序，并创建适当的方法

对于每个页面选择，组件将发出一个页面号为的事件。现在你知道该显示哪一页了

假设您总共有25个文档，并且希望每页显示5个文档。所以总共有5页

现在，如果用户选择第3页，您必须查询并获取11到15之间的文档 同样，如果用户选择第5页，您必须从21-25页查询和获取文档

现在，通常您会对db进行分页查询，但在您的CAE中，我假设您有一个项目列表 在一个数组中。（如果没有，则以某种方式将其转换为数组，并基于任何字段对其进行排序以确保一致性）。 因此，您有一个项目数组，对于每个用户页面，选择只计算开始和结束索引 并可能将其保存到另一个阵列（为了简单起见），在该阵列上循环并制作项目卡