分页(element-ui)使用方式

1. 第一种方式（分段数据请求回来）

   • 页面布局（显示）。

     <div class="awrap-content">
        <el-table :data="resPage.data" style="width: 100%" max-height="90vh">
          <el-table-column prop="operationTime" label="操作时间" align="center" sortable>
          </el-table-column>
          <el-table-column prop="userPhone" label="客户手机号" align="center">
          </el-table-column>
          <el-table-column prop="operationName" label="操作名称" align="center">
          </el-table-column>
          <el-table-column prop="operationType" label="操作类型" align="center">
          </el-table-column>
          <el-table-column prop="requestParams" label="请求参数" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="responseData" label="响应结果" align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
     </div>
     

   • 后台根据请求的当前页数和一页的数量进行数据处理后返回给前台数据。

     	 // 请求数据
           reqPage: {
             pageNum: 1,
             pageSize: 10
           },
           // 响应数据
           resPage: {
             data: [],
             count: ""
           }
     

   • 前台接受当前页数的数据和所有数据的数量。

     // 请求日志数据
        findAllPage(reqPage) {
          let self = this;
          self
            .axios({
              method: "GET",
              url: "operation/findAllByPage",
              params: reqPage
            })
            .then(function(res) {
              // 接口访问成功后对数据进行处理显示
              if (res.code === 0) {
                self.resPage.count = res.data.totalCount;
                self.resPage.data = res.data.data;
              }
            })
            .catch();
     

   • 页面布局（操作）。

     <div class="awrap-footer">
        <div class="left-wrapper">
        	<span>共 {{Math.ceil(resPage.count/10)}} 页</span>
        </div>
        <div class="right-wrapper">
            <span @click="prePage">上一页</span>
            <el-input-number v-model="reqPage.pageNum" @blur="numberPage" :min="1" :max="Math.ceil(resPage.count/10)" :controls="false"></el-input-number>
            <span @click="nextPage">下一页</span>
        </div>
     </div>
     

   • 操作事件

         // 上一页
         prePage() {
           this.reqPage.pageNum--;
           this.findAllPage(this.reqPage);
         },
         // 下一页
         nextPage() {
           this.reqPage.pageNum++;
           this.findAllPage(this.reqPage);
         },
         // 输入页码
         numberPage() {
           this.findAllPage(this.reqPage);
         }
     

   • 筛选页面布局

     <div class="block">
         <div class="filterPhone">
             <el-select v-model="phoneValue" @change="filterPhonePage" @clear="clearPhone" clearable placeholder="筛选客户手机号">
                 <el-option
                 v-for="item in filterPhone"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
                 </el-option>
             </el-select>
         </div>
         <div class="filterName">
             <el-select v-model="nameValue" @change="filterNamePage" @clear="clearName" clearable placeholder="筛选操作名称">
                 <el-option
                 v-for="item in filterName"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
                 </el-option>
             </el-select>
         </div>
         <div class="filterType">
             <el-select v-model="typeValue" @change="filterTypePage" @clear="clearType" clearable placeholder="筛选操作类型">
                 <el-option
                 v-for="item in filterType"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
                 </el-option>
             </el-select>
         </div>
         <span class="demonstration">操作时间</span>
         <el-date-picker v-model="operationDate" type="daterange" align="right" @change="datePage" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
         </el-date-picker>
     </div>
     

   • 筛选数据事件

     // 筛选操作时间事件
        datePage() {
          let isDate =
            this.operationDate == null ||
            !this.operationDate[0] ||
            !this.operationDate[1];
          if (isDate) {
            delete this.reqPage["startTime"];
            delete this.reqPage["endTime"];
            this.findAllPage(this.reqPage);
            this.$message({
              message: "请重新选择时间段",
              type: "warning"
            });
            return;
          }
          let startTime = moment(this.operationDate[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          let endTime = moment(this.operationDate[1]).format("YYYY-MM-DD HH:mm:ss");
          this.reqPage["startTime"] = startTime;
          this.reqPage["endTime"] = endTime;
          this.findAllPage(this.reqPage);
        },
        // 筛选客户手机号事件
        filterPhonePage() {
          this.reqPage["userPhone"] = this.phoneValue;
          this.findAllPage(this.reqPage);
        },
        // 筛选操作名称事件
        filterNamePage() {
          this.reqPage["operationName"] = this.nameValue;
          this.findAllPage(this.reqPage);
        },
        // 筛选操作类型事件
        filterTypePage() {
          this.reqPage["operationType"] = this.typeValue;
          this.findAllPage(this.reqPage);
        },
        // 清除筛选客户手机号事件
        clearPhone() {
          delete this.reqPage["userPhone"];
          this.findAllPage(this.reqPage);
        },
        // 清除筛选操作名称事件
        clearName() {
          delete this.reqPage["operationName"];
          this.findAllPage(this.reqPage);
        },
        // 清除筛选操作类型事件
        clearType() {
          delete this.reqPage["operationType"];
          this.findAllPage(this.reqPage);
        }
     

2. 第二种方式（全部数据请求回来）

   • 页面布局

        <div class="table_container">
           <el-table
             v-if="tableData.length > 0"
             :data="tableData"
             max-height="450"
             border
             style="width: 100%">
             <el-table-column type="index" label="序号" width="70" align="center">
             </el-table-column>
             <el-table-column prop="date" label="创建时间" width="250" align="center">
               <template slot-scope="scope">
                 <i class="el-icon-time"></i>
                 <span style="margin-left: 10px">{{ scope.row.date }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="type" label="收支类型" width="150" align="center">
             </el-table-column>
             <el-table-column prop="describe" label="收支描述" width="180" align="center">
             </el-table-column>
             <el-table-column prop="income" label="收入" width="170" align="center">
               <template slot-scope="scope">
                 <span style="color:#00d053">+{{ scope.row.income }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="expend" label="支出" width="170" align="center">
               <template slot-scope="scope">
                 <span style="color:#f56767">-{{ scope.row.expend }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="cash" label="账户现金" width="170" align="center">
               <template slot-scope="scope">
                 <span style="color:#4db3ff">{{ scope.row.cash }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="remark" label="备注" width="220" align="center">
             </el-table-column>
             <el-table-column label="操作" v-if="user.identity == 'manager'" prop="operation" width="320" fixed="right" align="center">
               <template slot-scope="scope">
                 <el-button
                   size="small"
                   type="warning"
                   icon="edit"
                   @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                 <el-button
                   size="small"
                   type="danger"
                   icon="delete"
                   @click="handleDelete(scope.$index, scope.row)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
           <el-row>
             <el-col :span="24">
               <div class="pagination">
                 <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page.sync="paginations.page_index"
                   :page-sizes="paginations.page_sizes"
                   :page-size="paginations.page_size"
                   :layout="paginations.layout"
                   :total="paginations.total">
                 </el-pagination>
               </div>
             </el-col>
           </el-row>
         </div>
     

   • 数据定义和请求获取

     	  tableData: [], // 最终呈现的数据
           allTableData: [], // 分页过滤的数据
           filterTableData: [], // 筛选过滤的数据
           
           getProfile() {
           // 获取表格数据
           this.$axios({
             method: "GET",
             url: "/api/profiles"
           })
           .then(res => {
             this.allTableData = res.data;
             this.filterTableData = res.data;
             // 设置分页数据
             this.setPaginations();
           })
           .catch(err => console.log(err));
           }
           
           setPaginations() {
           // 分页属性设置
           this.paginations.total = this.allTableData.length;
           this.paginations.page_index = 1;
           this.paginations.page_size = 5;
           // 设置默认的分页数据
           this.tableData = this.allTableData.filter((item, index) => {
             return index < this.paginations.page_size;
           });
          },
           handleSizeChange(page_size) {
           // 切换size,就是每页显示多少条事件
           this.paginations.page_index = 1;
           this.paginations.page_size = page_size;
           // 设置默认的分页数据
           this.tableData = this.allTableData.filter((item, index) => {
             return index < page_size;
           });
         },
         handleCurrentChange(page) {
           // 获取当前页
           let index = this.paginations.page_size * (page - 1);
           // 数据的总数
           let nums = this.paginations.page_size * page;
           // 容器
           let tables = [];
           for (let i = index; i < nums; i++) {
             if (this.allTableData[i]) {
               tables.push(this.allTableData[i]);
             }
             this.tableData = tables;
           }
         }
     

3. 总结

• 相比较第二种方式，第一种方式会比较容易，就是各种的操作就调用各种的接口，然后显示。第二种就是自己处理数据显示出来，如果可以我会选择第一种方式，可能要后台配合吧，第二种也可以，可以锻炼自己的逻辑能力吧。

每天忙于写论文，小论文倒也罢了，没有多少需要排版的东西，最多是一栏变两栏，字体字号等等，简单得很，可大论文就不一样了，需要封面设计、页眉页脚、表格不能跨页、一级标题、二级标题……，几乎把我变成了一个排版工人！没办法，只能一点点学，但学会了也发现其实很简单的，俗话说：求人不如求己，所以还是自己学会一点排版的知识，防止在需要的时候束手无策！以后我会把文章编排的各种小窍门写下来与大家共享。

1、如何设置页眉页脚？

          “视图”→“页眉和页脚”，将会打开页眉页脚编辑工具栏，同时切换到页眉编辑状态，只要在相应的地方输入内容即可。

2、什么是“分节符”，如何设置？

          “分节符”就是把文档从插入的分节符处分为两节，可以对每节的页面、格式进行单独设置。

          设置方法：“插入”→“分隔符”，选择“分节符类型”里的“下一页”即可在指定位置插入分节符。

3、文档中有封面有正文，封面中不需要页眉页码，而正文要设置，怎么做？

     ①、在封面尾插入“分节符”将封面与正文分节：光标调至要插入分节符的地方，“插入”→“分隔符”→“分节符类型”“下一页”；

          ②、进行页眉页码编辑：“视图”→“页眉和页脚”，输入页眉内容及插入页码，这时封面和正文都将会有页眉和页码；

     ③、取消每节的“同上一节”设置，以便对每节进行单独编写：将光标调至第2节(即正文所在节)在页眉，点击页眉页脚编辑工具栏上的“同前”，这样就是取消“同上一节”的设置，使得两节的页眉可以分别设置(因为默认设置为“同前”)，否则无论修改哪一节，另一节都会跟着改变的，同理，页脚也同样处理。

     ④、取消封面页眉文字：光标调至第1节的页眉，删除页眉文字，此时将还有默认下划线存在，同样取消页码即可；

     ⑤、删除页眉中的下划线：全选页眉(注意，一定要将段落标记也选入。也可以三击鼠标左键),“格式”→“边框和底纹”→ “边框”→“无”，注意对话框右下解的“应用范围”应该是“段落”，再点击“确定”即可取消下划线；

     ⑥、在正文页眉或页脚设置页码：若直接插入页码，会将封面页做为第1页，顺序下排。这时，只要选中页码，点击页眉页脚编辑工具栏中的“设置页码格式”→“页码编排”→“起始页码”，输入相应数字即可。(想从哪个页数开始都行)

          这样设置下来，封面既无页眉也无页码。当然，第①～③顺序不要变，后面几项可以颠倒顺序。举一反三，对于对章节或多封面的文档，重复使用这些设置即可做到每章节页眉不同，页码不同了。

4、带表格的文档，排版时总是会将编辑好的表格打乱，怎么办？

          为防止编辑好的表格因为格式的变动而被打乱，在表格前后插入“分页符”即可保证无论如何排版都不有打乱表格：“插入”→“分隔符”→“分隔符类型”→“分页符”。

5、竖排页面的文档中，突然需要某页进行横排，怎么办？

          在需要横排的页前页后分别设置两个“分节符”，然后对此页进行“页面设置”，选择版面“横向”即可。

6、“分节符”与“分页符”的区别是什么？

          这两种符，都可以将页面单独分页，有时候看上去一样的功能，很难区别。其实主要的一点区别就是“分节符”分开的每个节都可以进行不同的页面、页眉、页脚、页码的设置，而分页符则不能。

7、一个文档有多个章节，每个章节有不同的封面，同时文档中还有很多表格，有横版，有竖版，却要求每个章节页眉内容不同、页码相连、每章封面不排页码、无论横版竖版统一页眉以供装订，需要怎么样操作？

     ①、插入“分节符”，将文档分为若干个节：光标调至每个章节、章节封面、不同方向版面的最后一个字符后，“插入”→“分隔符”→“分节符类型”“下一页”，重复操作；

    ②、取消每节的“同上一节”设置：将光标调至页眉，点击页眉页脚编辑工具栏上的“同前”，这样就是取消“同上一节”的设置，以便对每节的页眉页脚进行单独设置而不会改变其它节的内容，页脚也同样处理。

     ③、进行页眉页码编辑：在相应位置输入页眉内容及插入页码；

     ④、取消封面页眉文字：光标调至封面的页眉，删除页眉文字，此时将还有默认下划线存在，同样取消页码即可；

    ⑤、删除页眉中的下划线：全选要取消的页眉(注意，一定要将段落标记也选入。也可以三击鼠标左键),“格式”→“边框和底纹”→ “边框”→“无”，注意对话框右下解的“应用范围”应该是“段落”，再点击“确定”即可取消下划线；

     ⑥、在正文页眉或页脚设置页码：若直接插入页码，会将封面页也排序。这时，只要选中页码，点击页眉页脚编辑工具栏中的“设置页码格式”→“页码编排”→“起始页码”，输入相应数字即可。(想从哪个页数开始都行)

     ⑦、重新编辑不同方向页面的页眉页脚：竖版文档中的横版页面的页眉将默认在长边，而竖版页面的页眉在短边，这就需要进行调整。

          a、取消横版页面的页眉和页脚：见④、⑤；

          b、在页眉处插入文本框：光标调至页眉，“插入”→“文本框”→“竖排”，按鼠标左键，光标变为“+”，不放，画一个文本框，输入文字，将文字和段落标记均选中，“格式”→“边框和底纹”→ “边框”→“自定义”，选择“线型”、“颜色”、“宽度”，在“预览”里选择下边框线，“确定”；

          c、调整文字方向：选中页眉文本框中的文字，“格式”→“文字方向”，调整相应的文字方向；

          d、页码设置：对页码也是如此操作即可，只是文本框中插入的是页码而已；

          e、取消文本框的框线：将鼠标点至文本框边界，当光标变为十字箭头时，双击鼠标左键，出现“设置文本框格式”对话框，将“线条”设置为“无”，即可消除文本框的外框线了。

          f、将页眉页码文本框放至\相应位置：当光标高为十字箭头时，按左键不放拉至相应位置即可。

          只要设置好一个版面，以后相同版面就可使用粘贴功能进行复制了。

          经过以上操作，目的就可以达到了。