在vuejs中編輯默認分頁？

我處理 vuejs laravel

我的控制器：

public function listData (Request $request)
{
   $currentPage = !empty($request-> currentPage) ? $request->currentPage : 1;
   $pageSize = !empty($request-> pageSize) ? $request->pageSize : 30;
   $skip = ($currentPage - 1) * $pageSize。
   $totalProduct = Product::select(['id', 'name'])-> get();
   $listProduct = Product::select(['id'/span>, 'name'/span>])
            -> skip($skip)
            ->take($pageSize)
            ->get()。
  return response()->json([
      'listProduct' => $listProduct,
      'total' => $totalProduct,
  ]);
}

在vuejs中

data() {
    return {
      pageLength: 30,
      列。[
        {
          標簽。"Id"。
          欄位。"id"。
        },
        {
          標簽。"Name",
          欄位。"name",
        },
      ],
      總數。""。
      行數。[],
      currentPage: 1,
    };
  },
  created() {
    軸心
      .get("/api/list")
      .then((res) => {
        this.rows = res.data.listProduct;
        this.total = res.data.total;
      })
      .catch((error) => {
        console.log(error)。
      });
  },


方法: {
    changePagination() {
      軸心
        .get("/api/list"/span>, {
          引數。{
            currentPage: this.currentPage,
            pageSize: this.pageLength,
          },
        })
        .then((res) => {
          this.rows = res.data.listProduct;
          this.total = res.data.total。
        })
        .catch((error) => {
          console.log(error)。
        });
    },
  },

Template :

<vue-good-table
        :columns="columns"/span>
        :rows="rows""方向" :response-options=
        :search-options="{
          enabled: true,
          externalQuery: searchTerm,
        }"
        :select-options="{ enabled: true, externalQuery: searchTerm, }"
          enabled: false,
          selectOnCheckboxOnly: true,
          selectionInfoClass: 'custom-class',
          selectionText: '選中的行'。
          clearSelectionText: '清除'。
          disableSelectInfo: true,
          selectAllByGroup: true,
        }"
        :pagination-options="{
          enabled: true,
          perPage: pageLength,
        }"
      >
       <模板槽="分頁-底部">
          < div class="d-flex justify-content-between flex-wrap" >
            < div class="d-flex align-items-center mb-0 mt-1" >
              <span class="text-nowrap" > 顯示 1 到 </span>
              <b-form-select
                v-model="pageLength"
                :options="['30', '50', '100']"
                class="mx-1"
                @input="changePagination"
              />
              <span class="text-nowrap" > of {{ total }} entries </span>
            </div>
            <div>
              <b-pagination
                :value="1"
                :total-rows="總數"。
                :per-page="pageLength" :per-page="pageLength" 
                第一個數字
                末位數
                align="right"/span>
                prev-class="prev-item"
                next-class="next-item"
                class="mt-1 mb0"
                v-model="currentPage"
                @input="changePagination"
              >
                <template #prev-text>
                  <羽毛-icon icon="ChevronLeftIcon" size="18" />
                </template>
                <template #next-text>
                  <羽毛-icon icon="ChevronRightIcon" size="18" />
                </template>
              </b-pagination>
            </div>
          </div>
        </template>

我正在處理一個有50萬個產品的產品串列。我不想一次就把它取出來。我想讓它每次拿出30個產品，當我點擊磁區時，它將呼叫api來呼叫下一個30個產品。但我的問題是默認的pageLength是30個產品，當我選擇顯示50個產品時，它仍然在頁面串列上顯示30個產品（但我控制臺.log（res.data.listProduct））它顯示50個產品，我如何改變pageLength的默認值。 有什么辦法可以解決這個問題，或者我做錯了什么。請告知。謝謝

uj5u.com熱心網友回復：

把這個添加到計算中 =>

paginationOptionsComputed(){
   return { enabled: true, perPage: Number(this.pageLength), }
}

然后改變 :pagination-options="paginationOptionsComputed"

注意：實際的問題是，vue-good-table期望perPage為數字。如果你看一下這里的initializePagination方法，你可以看到：

if (typeof perPage === 'number'/span>) {
    this.perPage = perPage;
}

標籤：

上一篇：拉威爾檢測大規模分配

下一篇：如何將我的Python代碼連接到托管在互聯網上的mysql資料庫？