vue+elementUI组件table实现前端分页功能

这也是在做项目中遇到的现在把它记录一下：上代码

 :data="headeDataList.slice((pageNumHE-1)*pageSizeHE,pageNumHE*pageSizeHE)"//这个就是每页计算的要展示几条数据

然后就是table数据的长度，在vue中你可以定义一个值在变量中然后取值，也可以这样写：

   :total="headeDataList.length"

最后就是分页器的设置：

 methods: {
         handleSizeChangeHE(val){
                this.pageNumHE = 1;
                this.pageSizeHE = val;
            },
            handleCurrentChangeHE(val){
              this.pageNumHE = val;
            }
            }

现在把我在项目中做的记录一下：我这个是做在一个弹框里

html:

   <el-dialog :close-on-click-modal="false" width="960px" title="详情" top="5vh" v-dialogDrag :visible.sync="dialogFormVisible1">
             <!-- <el-main> -->
               <h3>Header信息详情{{titleTime}}</h3>
              <el-table :data="headeDataList.slice((pageNumHE-1)*pageSizeHE,pageNumHE*pageSizeHE)" v-loading="listLoading" border fit highlight-current-row
                  style="width:100%;min-height:500px;margin-top:8px" height="550" :header-cell-style="{background:'oldlace'}">
                  
                  <el-table-column align="center" label="序号" type="index">
                  </el-table-column>
                  <el-table-column prop="id" align="center" label="part">
                  </el-table-column>
                  <el-table-column prop="pickUp" align="center" label="抓取数量">
                  </el-table-column>
                  <el-table-column prop="place" align="center" label="安装数量">
                  </el-table-column>
                  <el-table-column prop="error" align="center" label="错误数量">
                  <template slot-scope="scope">
                    {{scope.row.partNG + scope.row.pickMiss}} 
                  </template>
                  </el-table-column>
                  <el-table-column align="center" label="PPM">
                  <template slot-scope="scope">
                    {{parseInt((scope.row.partNG + scope.row.pickMiss)/scope.row.pickUp*1000000)}} 
                  </template>
                  </el-table-column>
                </el-table>
                <!-- </el-main> -->
              <el-footer>
                <!-- 分页 -->
                <div class="pagination-container">
                  <el-pagination background 
                  @size-change="handleSizeChangeHE" 
                  @current-change="handleCurrentChangeHE" 
                  :current-page="pageNumHE" 
                  :page-sizes="[10,20,30,40]" 
                  :page-size="pageSizeHE" 
                  layout="total, sizes, prev, pager, next, jumper" 
                  :total="headeDataList.length">
                  </el-pagination>
                </div>
              </el-footer>
           </el-dialog>

js:

  methods:{
        // Header信息详情
              handleUpdate1(row){
                this.dialogFormVisible1 = true
                const Lists = JSON.parse(row.headerData)  //后台给我的是一个字符串，我要转成json格式的
               console.log(JSON.parse(row.headerData))
               this.headeDataList = Lists
               this.titleTime = row.createTime //这个是一个标题
              },
               handleSizeChangeHE(val){
			        this.pageNumHE = 1;
			        this.pageSizeHE = val;
			    },
			    handleCurrentChangeHE(val){
			      this.pageNumHE = val;
			    }
    }

最后是效果图：