處理 Element Plus 告警

守望人间發表於2024-07-17

處理 Element Plus 告警

在使用Element Plus的Pagination分頁元件時，出現告警：ElementPlusError: [ElPagination] Deprecated usages detected, please refer to the el-pagination documentation for more details
程式碼大致如下：

<template>
  <el-row style="margin-top: 15px;">
    <el-col :span="10" :offset="7">
      <el-pagination
        style="justify-content: center"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :pager-count="5"
        :total="articleCount"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";

import { getArticleListApi } from "@/apis/articleApis";

const articleCount = ref<number>();
let currentPage = 1;
const pageSize = ref<number>(10);

/**
 * 請求文章列表
 */
const refreshArticleList = () => {
  getArticleListApi({ page_num: currentPage, page_size: pageSize, search: searchVal.value }).then((res) => {
    if (res.code == 0) {
      articleList.value = res.data.results;
      articleCount.value = res.data.count;
    }
  });
};

const handleCurrentChange = (val: number) => {
  currentPage = val;
  refreshArticleList();
};

onMounted(async () => {
  refreshArticleList();
});
</script>

<style></style>

排查Pagination元件引數以及繫結值型別都沒有問題，最後發現是因為articleCount變數初始化時沒有賦值導致的。

相關文章