Element UI 前端分页

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

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

---

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

一、分页组件选择

从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. 问卷效果（草稿）

总结

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