处理 Element Plus 告警

处理 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变量初始化时没有赋值导致的。