Vue3搭配BalmUI使用时ui-pagination分页功能异常如何解决？

问题原因 #

BalmUI的表格与分页组件为独立模块，默认不会自动联动处理数据分页逻辑。你当前直接将全量车辆数据绑定给表格，分页组件仅更新了UI状态，未关联到表格数据过滤，因此分页参数变化时表格始终展示全量数据。

解决步骤 #

1. 在data中新增pageSize变量，存储当前每页展示条数，默认值和分页配置的默认值保持一致设为10
2. 给<ui-pagination>组件添加每页条数的双向绑定，同步用户切换的每页条数
3. 新增计算属性paginatedCars，对排序后的全量数据做分页切片，返回当前页需要展示的条目
4. 将<ui-table>的data属性绑定修改为分页后的数据paginatedCars

修改后的核心代码 #

模板部分修改 #

<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="paginatedCars" :thead="thead" :tbody="tbody">
      <ui-pagination
        v-model="page"
        <!-- 新增pageSize双向绑定 -->
        v-model:page-size="pageSize"
        :page-size="[10, 25, 50]"
        :total="total"
        show-total
        show-jumper
        position="center"
      ></ui-pagination>
    </ui-table>
  </div>
</template>

脚本部分修改 #

export default {
  name: "CarList",
  components: {},
  data() {
    return {
      formData: {
        id: "",
        vehicle: "",
        color: "",
        fuel: "",
        status: "",
        price: "",
      },
      page: 1,
      // 新增当前每页条数变量
      pageSize: 10,
      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 = 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;
    },
    // 新增分页后的数据计算属性
    paginatedCars() {
      const startIndex = (this.page - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.cars.slice(startIndex, endIndex);
    },
    isAdmin() {
      return this.$store.state.isAdmin;
    },
    total() {
      return this.$store.state.cars.length;
    },
  },
  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);
          });
        });
      });
    },
  },
};

如果你的BalmUI版本较低不支持v-model:page-size的写法，可以改用事件监听的方式同步pageSize：

<ui-pagination
  v-model="page"
  :page-size="[10, 25, 50]"
  :total="total"
  show-total
  show-jumper
  position="center"
  @change-page-size="size => pageSize = size"
></ui-pagination>

修改完成后切换页码和每页条数时，paginatedCars会自动重新计算，表格就会展示对应页的条目了。

内容的提问来源于stack exchange，提问作者Bianca Balan