vue+elementUI元件table實作前端分頁功能

這也是在做項目中遇到的現在把它記錄一下：上代碼

然後就是table資料的長度，在vue中你可以定義一個值在變量中然後取值，也可以這樣寫：

最後就是分頁器的設定：

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;
			    }
    }
           

最後是效果圖：