首页 > 其他分享 >处理 Element Plus 告警

处理 Element Plus 告警

时间:2024-07-17 21:10:07浏览次数:8  
标签:const res Element Plus articleCount 告警

处理 Element Plus 告警

在使用Element PlusPagination分页组件时,出现告警: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变量初始化时没有赋值导致的。

标签:const,res,Element,Plus,articleCount,告警
From: https://www.cnblogs.com/shouwangrenjian/p/18305629

相关文章

  • 从Mybatis-Plus开始认识SerializedLambda
    从Mybatis-Plus开始认识SerializedLambda背景对于使用过Mybatis-Plus的Java开发者来说,肯定对以下代码不陌生:@TableName("t_user")@DatapublicclassUser{ privateStringid; privateStringname; privateStringpassword; privateStringgender; privateintage;......
  • 如何生成好看的zabbix告警报表并发送邮件
    作者乐维社区(forum.lwops.cn) 许远一、场景模拟小东是一名资深的IT运维人员,其直属领导想要了解公司业务系统的健康状态以及小东日常的工作情况等,要求小东每周统计系统告警情况并发邮件给到他。小东所在公司搭建了一套zabbix开源监控,于是小东利用自己的专业知识,实现了zabbix告......
  • API引用在Element UI (Vue 2)和Element Plus (Vue 3)中的不同
    API变动样式类名变化:一些组件的样式类名有所变动,可能需要更新你的自定义样式。事件名和属性名变化:某些组件的事件名和属性名发生了变化,需要检查ElementPlus文档以了解详细信息。使用setup函数:在Vue3中,可以使用CompositionAPI(如setup函数)来组织代码,而......
  • el-date-picker的value-forma在Element UI (Vue 2)和Element Plus (Vue 3)中的不同
     ElementUI(Vue2):<template><el-form-itemprop="register_date"label="成立日期"><el-date-pickerv-model="temp.register_date"type="date"value-format="yyyy-MM-dd"......
  • 如何从 OnePlus 11/10 Pro/9 Pro等恢复已删除的照片
    在日常生活中,我们经常会遇到意外删除手机中重要照片的情况,这无疑会给我们带来不小的困扰。幸运的是,有多种方法可以帮助我们恢复这些珍贵的记忆。本文将向您介绍几种实用的解决方案,教您如何在不root手机的情况下,从OnePlus手机中恢复已删除的照片。 第1部分.利用OnePlus......
  • Element Plus使用
    目录ElementPlus快速入门常用组件Element:是饿了么团队研发的,基于Vue3,面向设计师和开发者的组件库。组件:组成网页的部件,例如超链接、按钮、图片、表格、表单、分页条等等。官网:https://element-plus.org/zh-CN/#/zh-CNElementPlus快速入门准备工作:创建一个工程化的v......
  • vue3+element-plus+typescript
    1.vue3+ts+elementui-plushttps://blog.csdn.net/qq_41737571/article/details/1390730852.自动调整font-size大小https://blog.csdn.net/qq_41737571/article/details/1401586143.简单小众电商购物项目模板:基于Vue3和Vant4的纯前端开发方案https://web-hls.blog.csdn.......
  • CodeForces 1992A Only Pluses
    题目链接:CodeForces1992A【OnlyPluses】思路    代码#include<functional>#include<iostream>#include<algorithm>#include<queue>usingnamespacestd;#definelllonglongconstintN=500+10;inta[N];voidsolve(){intn......
  • Pandas运行报错分析:ValueError: Length mismatch: Expected axis has 0 elements, new
    ✨✨欢迎大家来到景天科技苑✨✨......
  • elementui的el-cascader-panel在jsx里如何自定义label和props属性
    render(){return(<el-cascader-panelonChange={(val)=>{this.handleFormatChange(val,'format','dataColumns',indexInMap)}}props={{renderLabel:(params)=>{......