为什么 ui-pagination 在带有 BalmUI 的 Vue3 中无法正常工作？

Question

我正在尝试使用 BalmUI 制作带有分页的表格。 这是我的代码：

<template>
  <div>
    <img alt="Vue logo" src="../assets/logo.png" />
    <ui-button raised v-if="isAdmin" @click="addCar">Add car</ui-button>
    <ui-button raised v-if="isAdmin" @click="addNewCars"
      >Add the newest cars</ui-button>
    <ui-table fullwidth align="center" :data="cars" :thead="thead" :tbody="tbody">
      <ui-pagination
        v-model="page"
        :page-size="[10, 25, 50]"
        :total="total"
        show-total
        show-jumper
        position="center"
      ></ui-pagination>
    </ui-table>
  </div>
</template>

<script>
import utils from "../utils.js";
// @ is an alias to /src
// import Car from "@/components/Car.vue";

export default {
  name: "CarList",
  components: {
    // Car,
  },
  data() {
    return {
      formData: {
        id: "",
        vehicle: "",
        color: "",
        fuel: "",
        status: "",
        price: "",
      },
      page: 1,
      thead: [
        "Car",
        "Color",
        "Fuel",
        "Status",
        "Price(lei/day)"
      ],
      tbody: [
        "vehicle",
        "color",
        "fuel",
        "status",
        "price"
      ]
    };
  },
  created() {
    let url = utils.url;
    let requestParam = utils.globalRequestParameters;
    if (!this.cars.length) {
      fetch(url + "cars", requestParam).then((res) =>
        res.json().then((res) => {
          this.$store.dispatch("fetchCars", res);
        })
      );
    }
  },
  computed: {
    cars() {
      let cars = [];
      cars = this.$store.state.cars;
      cars.sort(function (a, b) {
        return a.vehicle > b.vehicle
          ? 1
          : a.vehicle < b.vehicle
          ? -1
          : 0 || a.price - b.price;
      });
      return cars;
    },
    isAdmin() {
      return this.$store.state.isAdmin;
    },
    total() {
      let total = 0;
      total = this.$store.state.cars.length;
      return total;
    },
  },
  methods: {
    addCar() {
      this.$router.push({ path: "addEditCar" });
    },
    addNewCars() {
      let requestParameters = utils.globalRequestParameters;
      requestParameters.method = "POST";

      fetch(utils.url + "generateRandomCars", requestParameters).then((res) => {
        res.json().then((res) => {
          res.forEach((data) => {
            this.$store.dispatch("addCar", data);
          });
        });
      });
    },
  },
};
</script>

我在页面的底部得到了分页项，但是它不起作用。 我得到所有项目而不是其中的 10 个。 按钮正在改变，我的意思是如果我选择每页 50 行，我的页数会改变，但不是我表中每页的元素数。

有人能帮我吗？