Question

vue 里el-pagination 分页设置全部

<el-pagination background class="PageTions" layout="total, sizes, prev, pager, next, jumper" :current-page="listQuery.current" :page-sizes="[20, 40, 60, 80 ,100]" :page-size="listQuery.size" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>怎么加上全部

Answer 1

vue 里el-pagination 分页设置全部？首先使用el-pagination组件。@size-change在每页数据的个数发生改变时触发。@curren-change在页数发生改变时触发。

数据源定义的数据，默认展示第一页，页面数据10条

 

 

方法触发时的操作。

每页数据个数发生改变时触发handleSizeChange(size)，参数size即是选择的每页数据的数量。页数发生改变时触发handleCurrentChange(current)，current即是选择的页面。在web开发过程中，通常使用表格展示数据，在数据较多时采用分页的方式展示给用户。

分页方式有前端假分页和后端分页两种实现方式，此文仅记录前端假分页实现方式。

第一步：添加分页组件（el-pagination）在表格下方，添加的代码如下所示：




第二步：添加分页所需的变量，如下所示：

第三步：添加相应的分页方法，如下所示：

第四步：修改查询按钮逻辑，在成功查询后，更新数据的总数量。代码如下所示：

第五步：使用slice实现前端的假分页，最终vue文件中的主要代码如下所示：




最终效果如下所示：

Answer 2

datagrid的属性问题，在配置时添加 onLoadSuccess:function(data){ $('#listTable').datagrid('unselectAll'); } 载入时取消所有选中项