在 vuejs 中编辑默认分页？

Question

我处理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', 'name'])
            ->skip($skip)
            ->take($pageSize)
            ->get();
  return response()->json([
      'listProduct' => $listProduct,
      'total' => $totalProduct,
  ]);
}

在 vuejs 中

data() {
    return {
      pageLength: 30,
      columns: [
        {
          label: "Id",
          field: "id",
        },
        {
          label: "Name",
          field: "name",
        },
      ],
      total: "",
      rows: [],
      currentPage: 1,
    };
  },
  created() {
    axios
      .get("/api/list")
      .then((res) => {
        this.rows = res.data. listProduct;
        this.total = res.data.total;
      })
      .catch((error) => {
        console.log(error);
      });
  },


methods: {
    changePagination() {
      axios
        .get("/api/list", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageLength,
          },
        })
        .then((res) => {
          this.rows = res.data. listProduct;
          this.total = res.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

模板：

<vue-good-table
        :columns="columns"
        :rows="rows"
        :rtl="direction"
        :search-options="{
          enabled: true,
          externalQuery: searchTerm,
        }"
        :select-options="{
          enabled: false,
          selectOnCheckboxOnly: true,
          selectionInfoClass: 'custom-class',
          selectionText: 'rows selected',
          clearSelectionText: 'clear',
          disableSelectInfo: true,
          selectAllByGroup: true,
        }"
        :pagination-options="{
          enabled: true,
          perPage: pageLength,
        }"
      >
       <template slot="pagination-bottom">
          <div class="d-flex justify-content-between flex-wrap">
            <div class="d-flex align-items-center mb-0 mt-1">
              <span class="text-nowrap"> Showing 1 to </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="total"
                :per-page="pageLength"
                first-number
                last-number
                align="right"
                prev-class="prev-item"
                next-class="next-item"
                class="mt-1 mb-0"
                v-model="currentPage"
                @input="changePagination"
              >
                <template #prev-text>
                  <feather-icon icon="ChevronLeftIcon" size="18" />
                </template>
                <template #next-text>
                  <feather-icon icon="ChevronRightIcon" size="18" />
                </template>
              </b-pagination>
            </div>
          </div>
        </template>

我正在处理一个包含 500,000 种产品的产品列表。一次都不想拿出来。我希望它每次拉出 30 个产品，当我点击分区时，它会调用 api 来调用接下来的 30 个产品。但是我的问题是默认的 pageLength 是 30 个产品，当我选择show showing showing 50 products ,它仍然在页面列表中显示30个产品（但是我console.log（res.data.listProduct））它显示了50个产品，如何更改默认值pageLength。有什么办法可以解决这个问题，还是我做错了什么。请指教。谢谢

Answer 1

将其添加到计算中 =>

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

并改变:pagination-options="paginationOptionsComputed"

注意：实际问题是 vue-good-table 期望 perPage 作为数字。如果您查看 here 中的 initializePagination 方法，您会看到：

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

在 vuejs 中编辑默认分页？

Edit default pagination in vuejs?

laravel

vue.js

laravel-5

vuejs2

vuex