element-ui实现表格分页和搜索功能

一.首先展示下做出的页面效果

1.以下页面是物资列表界面，将所有的物资分页展示出来。

2.将搜索内容分页展示出来，以下页面是含关键字“子”时展示的数据

3.当搜索框为空时展示全部数据

二.具体的实现

1.物资列表分页显示是使用了element-ui中el-table和el-pagination标签。代码如下：

div class="table_resource" style="text-align:center">
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                    

                        {{scope.row.totalPrice=scope.row.quantity*scope.row.unitPrice}}
                    
                
                
                
            
        

2.el-table中data是需要在表格中展示的数据。将data属性设置为计算属性，可以根据计算属性的内容将表格分页展示出来。
3.current-change事件会在当前页面发生变化时触发，绑定的是handleCurrentChange方法。

4. pagesize属性绑定的是每页展示的物资个数

5.page-sizes是个number[]数组类型，里面的值代表每页可供选择的展示条目个数。表格的总页数是和此值有关系的。比如总共有15条数据，当page-sizes选择的值为5时，表格每页会展示5条数据，那15/5=3，表格的总页数就是3页，layout中的pager在页面中会出先3个页码按钮，分别为1，2，3。如下图所示

当把page-sizes选择的值为3时，表格每页会展示3条数据，那15/3=5，表格的总页数就是5页，layout中的pager在页面中会出现5个页码按钮，分别为1，2，3，4，5。如下图所示

即使page-sizes数组里已经定义了数据，但是pagesize必须在data中定义，并且赋值，否则会报错。pagesize的赋的值可以和page-sizes数组里的值没有关系，因为page-sizes数组中的第一个值会被默认为首选项，并且将pagesize的值覆盖掉。

5.page-count表示页码按钮的数量，它的值必须为5-21之间的奇数！

6.layout是组件布局，子组件名可以按照需求调换顺序，并用逗号分隔。

三.核心的JS代码

 

以上是我在写表格分页的心得及自己的一些看法，如有错误，欢迎指正。

感谢此博文https://blog.csdn.net/Dg_Zing/article/details/87906371给与的指导。