SharePoint前台pnpjs使用vue+elementui分页

  <el-table ref="multipleTable" border stripe
                  :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
                  @row-click="handleRowClick" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column align="center" width="55" label="序号">
                    <template slot-scope="scope">
                      {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
                    </template>
                  </el-table-column>
 </el-table>

　　

 <div class="page">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, ->,prev, pager, next, jumper" :total="tableData.length" background>
                  </el-pagination>
                </div>

　　

<script type="text/javascript">

        var app = new Vue({
          el: "#app",
          data: {
            multipleSelection: [],
            currentPage: 1,  // 当前页码
            pageSize: 10,  // 每页显示的行数
            tableData: [],
          },

          methods: {

            async getList() {
              var _this = this;
              _this.pageSize = 10;//再次查询时，重置每页显示的条数
              const list = $pnp.sp.web.lists.getByTitle("DocumentBox");

              var query = "Status  eq '" + encodeURIComponent('待入库') + "'";

              if (_this.model.boxNo != "" && _this.model.boxNo != null) {
                //模糊搜索
                query += " and substringof('" + _this.model.boxNo + "',Title)"
              }
              if (_this.model.department != "" && _this.model.department != null) {
                query += " and DepartmentName eq '" + _this.model.department + "'";;
              }
              if (_this.model.beginDate != "" && _this.model.beginDate != null) {

                query += " and Created ge '" + _this.model.beginDate + "'";;
              }
              if (_this.model.endDate != "" && _this.model.endDate != null) {

                query += " and Created le '" + _this.model.endDate + "'";;
              }
              if (_this.model.description != "" && _this.model.description != null) {
                query += " and substringof('" + _this.model.description + "',Description)"

              }

              let items = await list.items.select("ID,Title,Created,DepartmentName,Description").filter(query).getAll();
              // console.log(items);
              items.forEach(element => {
                element.Created = _this.dateFormat(element.Created);
              });
              _this.tableData = items;
              //   console.log(items);
            },
            handleSizeChange(val) {
              this.pageSize = val;

            },
            handleRowClick(row) {
              this.$refs.multipleTable.toggleRowSelection(row);
            },
            handleCurrentChange(val) {
              this.currentPage = val;
            },
            handleSelectionChange(val) {
              this.multipleSelection = val;
            },
            dateFormat(val) {
              var date = val;
              if (date === undefined) {
                return ''
              }
              date = new Date(date);
              return date.format("yyyy-MM-dd HH:mm:ss")
            },
           
            }
          },
          created() { },
          mounted() {
            //初始化数据
         this.getList()

}, }) </script>