Question

来自Vue docs Vue ，它表示Vue 2在v-for标签中不支持limitBy，filterBy。我必须使用自定义分页和搜索创建一个列表视图。我不想使用表格搜索我的UI

搜索功能在这里可以正常工作。我想在此提示中添加分页。这是我的代码

     <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())

        })
      
        },
   
    }
};

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

Answer 1

接下来有几个步骤。让我尝试一下，如果我可以清楚地解释一下

首先，您需要分页组件。您可以自己实施，但是有已经有很好的组件。让我们拿this one 遵循安装和配置过程并创建适当的方法。

对于每个选择的页面，该组件将发出一个事件，其中包含页面编号。所以现在您知道要显示哪个页面。

让我们假设您总共有25个文档，并且希望每页显示5个文档。这样一共有5页。

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

现在通常您将对数据库执行分页查询，但是在您的提示中，我假设您有一个项目列表在一个数组中。（如果不是，则将其转换为数组，并根据提交的文件进行排序以保持一致性）。因此，您有一个项目数组，对于每个用户页面，只需选择计算开始索引和结束索引并可以将其保存到另一个阵列（为简单起见），您可以在该阵列上循环遍历并制作项目卡。

在vue 2.6版中添加自定义分页和过滤器

1 个答案: