前言

最近在做问卷系统，涉及到了题目的分组和分页，由于后端是一次性返回所有的分组问题数据的，所以只好在前端做分页。

提示：以下是本篇文章正文内容，下面案例可供参考

一、分页组件选择

从ElementUI的分页组件中挑选了一个适合自己页面风格的。

二、实现步骤

1.分页组件代码

代码如下（示例）：

<div class="pagination"><el-pagination background @current-change="handleCurrentChange":current-page.sync="currentPage" layout="prev, pager, next":total="dynamicValidateForm.paperList.length * 10"></el-pagination>
</div>

由于分页组件没有与table组件连用，所以用不到pageSize，所以没有绑定分页条数属性和方法。:current-page.sync="currentPage"同步改变当前页码，其实也可以不用另外写控制页码的方法。

2.通过v-show来实现分页

代码如下（示例）：

<div class="paper-area"><div v-show="groupIndex + 1 === currentPage" v-for="(group, groupIndex) in dynamicValidateForm.paperList":key="group.groupId"><div><h1>{{group.label}}</h1></div><div v-for="(question, index) in group.groupItem":key="question.questionItemId"><el-form-item v-if="question.isDefaultDisplay":label="index+1 + ' ' + question.label" :prop="question.formItemId"><QuestionComponent :form-conf="question" @changedisplay="changeDisplay" class="question-area" /></el-form-item></div></div><div class="pagination"><el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="prev, pager, next" :total="dynamicValidateForm.paperList.length * 10"></el-pagination></div>
</div>

由于问卷的题目条数不算特别多，同时都渲染出来对性能影响也不大，考虑到切换页面的操作比较频繁，故用v-show而不是v-if，同时也避免了v-if 与v-for的联用问题

3. 问卷效果（草稿）

总结

比预想的简单很多，其实没必要写文章记录的，但是写了都写了，就酱。有问题或指教欢迎讨论。

Element UI 前端分页相关推荐

DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
DataGear 数据可视化看板内置了一些基本.简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架. 本文以Vue2.Element UI前端框架为例,介绍如何制作具有更 ...
Element ui 前端自定义分页/批量选中/批量删除/单个删除/element-ui(复选框)type=“selection“置灰
直接看代码 <template><div class="page-content"><div class="page-header" ...
element ui +mybatisPlus分页插件实现分页功能
elementui pagination插件当然这里的依赖部分就需要去创库ctrl+v了 <!--分页部分 pagination插件 @current-change="handlep ...
element ui实现分页时候如何不从1序号开始
举个栗子,加入我们一页table表格是10行,分页到第二页时候我们想从11开始而不是1,这时候我们就可以这样做(如下图片),里面数字10是根据自己分页器:page-sizes="[10]&q ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
element ui前端排序，某列有数据为空值时，排序错乱问题
表格排序列的数据出现空值时,组件自带的排序功能不正常.而后查找了相关解决方法,有一网友给了我启示,解决了问题,现在照着思路写下步骤,日后再次遇到方便查找解决方式是重新定义一个新数组:遍历表格数据da ...
element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式直接显示首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页可能会导致后端elk崩溃.项目最后要求不能把 ...
Element ui后台管理系统界面设计
自己学了一点Element ui前端框架,然后尝试设计了几个页面,仅供学习参考!
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

Element UI 前端分页

文章目录

前言