vue 里el-pagination 分页设置全部

Posted 2023-03-29

<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>怎么加上全部

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

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

 

 

方法触发时的操作。

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

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

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




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

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

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

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




最终效果如下所示： 参考技术A datagrid的属性问题，在配置时添加 onLoadSuccess:function(data) $('#listTable').datagrid('unselectAll'); 载入时取消所有选中项

vue组件 下拉框分页

参考技术A 和公司签了保密协议啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈所以我把数据全部马赛克了哈哈哈哈哈哈哈哈哈哈哈尼萌就当有就成~~
输入框前面有个label，和页面中的其他label保持一致；分页的组件是vue-element-admin中自带的pagination，用elementui的el-pagination也可~~一样的道理反正就是各种传值

组件内容 ↓

父组件 👇
template 中 ↓

script 中 ↓

最后叮嘱一句，最好不要直接在父组件中控制子组件的inputValue。会有很多问题都是血的教训哈哈哈哈哈哈哈

如果现在有二级联动的需求，选择左边的数据，更改右边的数据。
那么点击左侧的列表选定一个值，右侧才可以进行操作。左侧换值，右侧清空。
这个时候，我们不要直接用inputValue来操纵输入框的值。最好再设置一个其他的变量，比如flag。

如果左边传的值发生变化，父组件中的this.flag = !this.flag
在子组件中watch这个flag