vue3.2/Vite/Ts40: 品牌管理分页数据展示

└─src
    └─views
        └─product
            └─trademark
                └─index.vue

<template>
  <el-card>
    <!-- ... -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="limit"
      :page-sizes="[3,5,7,9]"
      :background="true"
      layout="prev,pager,next,jumper,->,sizes,total"
      :total="total"
      @current-change="getHasTrademark"
      @size-change="sizeChange"
    ></el-pagination>
  </el-card>
</template>
<script setup lang="ts">
  import { ref, onMounted } from "vue";
  import type {
    Records,
    TradeMarkResponseData,
  } from "@/api/product/trademark/type";
  // 引入接口
  import { reqHasTrademark } from "@/api/product/trademark";
  let pageNo = ref<number>(1);
  let limit = ref<number>(3);
  let total = ref<number>(0);
  let trademarkArr = ref<Records>([]);
  // 获取品牌数据
  const getHasTrademark = async (page = 1) => {
    pageNo.value = page;
    const result: TradeMarkResponseData = await reqHasTrademark(
      pageNo.value,
      limit.value
    );
    if (result.code === 200) {
      total.value = result.data.total;
      trademarkArr.value = result.data.records;
    }
  };
  onMounted(() => {
    getHasTrademark();
  });
  const sizeChange = () => {
    getHasTrademark();
  };
</script>