ElementPlus· tab切换/标签切换 + 分页

tab切换 --->  <el-tabs><el-tab-pane>...

分页 -------->  <el-pagination>


tab切换

// tab标签切换
// v-model双向绑定选项中的name,tab-change事件在 activeName改变时触发
<script setup>
const tabChange = (tab, event)=>{console.log(tab, event)
}
</script><template><el-tabs v-model="activeName" @tab-change="tabChange"><el-tab-pane name="..." label="..."></el-tab-pane></el-tabs>
</template>

例:

效果图:

分页

// 分页
// layout 组件布局,子组件名用逗号隔开
// total 总条目
// page-size  每页显示条目个数 --> (不写,默认每页10个)
// current-change事件  current-page改变时触发
<template><el-paginationlayout="prev, pager, next" :total="..." :page-size="..." @current-change="..." ></el-pagination>
</template>

我们现在会检查一些不合理的用法,如果发现分页器未显示,可以核对是否违反以下情形:

  • total 和 page-count 必须传一个,不然组件无法判断总页数;优先使用 page-count;
  • 如果传入了 current-page,必须监听 current-page 变更的事件-->current-change事件@update:current-page),否则分页切换不起作用;
  • 如果传入了 page-size,且布局包含 page-size 选择器(即 layout 包含 sizes),必须监听 page-size 变更的事件@update:page-size),否则分页大小的变化将不起作用。

 

例:

 

效果图:

参考:Tabs 标签页 | Element Plus (element-plus.org)

Pagination 分页 | Element Plus (element-plus.org)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/92556.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器应用程序不可用的原因是什么引起的

服务器应用程序不可用的原因是什么引起的 服务器应用程序不可用的原因是什么引起的?其实服务器应用程序不可用可能是由多种原因引起的。主要包括软件故障、网络问题、硬件故障、安全问题、配置错误、容量不足、数据库问题等&#xff0c;具体详细服务器应用程序不可用的原因如下…

28391-2012 建筑施工机械与设备 人力移动式液压动力站

声明 本文是学习GB-T 28391-2012 建筑施工机械与设备 人力移动式液压动力站. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了人力移动式液压动力站(以下简称动力站)的范围、分类、要求、试验方法和检验规则。 本标准适用于以中小…

2023年9月文章一览

2023年9月编程人总共更新了4篇文章&#xff1a; 1.2023年8月文章一览 2.Programming abstractions in C阅读笔记&#xff1a;p144-p160 3.Programming abstractions in C阅读笔记&#xff1a;p161-p165 4.我为什么选择这样一份经常出差的工作 9月份大部分时间在出差&#…

Anderson-Darling正态性检验【重要统计工具】

Anderson-Darling正态性检验是一种用于确定数据集是否服从正态分布&#xff08;也称为高斯分布或钟形曲线分布&#xff09;的统计方法。它基于Anderson和Darling于1954年提出的检验统计量。该检验的基本原理和用途如下&#xff1a; 基本原理&#xff1a; 零假设&#xff08;Nu…

信息安全:网络安全漏洞防护技术原理与应用.

信息安全&#xff1a;网络安全漏洞防护技术原理与应用. 网络安全漏洞又称为脆弱性&#xff0c;简称漏洞。漏洞一般是致使网络信息系统安全策略相冲突的缺陷&#xff0c;这种缺陷通常称为安全隐患。 安全漏洞的影响主要有机密性受损、完整性破坏、可用性降低、抗抵赖性缺失、可…

yolov8 opencv模型部署(C++版)

yolov8 opencv模型部署&#xff08;C 版&#xff09; 使用opencv推理yolov8模型&#xff0c;仅依赖opencv&#xff0c;无需其他库&#xff0c;以yolov8s为例子&#xff0c;注意&#xff1a; 使用opencv4.8.0 &#xff01;使用opencv4.8.0 &#xff01;使用opencv4.8.0 &#…

FFmpeg 命令:从入门到精通 | ffppeg 命令参数说明

FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg 命令参数说明 FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg 命令参数说明主要参数音频参数视频参数更多参考 FFmpeg 命令&#xff1a;从入门到精通 | ffmpeg 命令参数说明 本节主要介绍了 ffmpeg 命令的常用参数。 主要参数 …

幽默直观的文档作者注释

注释是程序中非常重要的一部分&#xff0c;在不同的编程语言中&#xff0c;注释的风格和语言描述会有所不同。以下是一些常用的注释风格和语言描述&#xff1a; 直观注释&#xff1a;这种注释使用简洁、明了的语言&#xff0c;帮助读者快速地理解代码。例如&#xff0c;代码中…

第8章 Spring(二)

8.11 Spring 中哪些情况下,不能解决循环依赖问题 难度:★★ 重点:★★ 白话解析 有一下几种情况,循环依赖是不能解决的: 1、原型模式下的循环依赖没办法解决; 假设Girl中依赖了Boy,Boy中依赖了Girl;在实例化Girl的时候要注入Boy,此时没有Boy,因为是原型模式,每次都…

28270-2012 智能型阀门电动装置 学习笔记

声明 本文是学习GB-T 28270-2012 智能型阀门电动装置. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了智能型阀门电动装置(以下简称智能电装)的术语、技术要求、试验方法、检验规则、标 志、包装、运输和贮存条件等。 本标准适…

destoon根据查询标题小于5个字符的数据进行删除

最近客户有个需求&#xff0c;就是他采集的时候&#xff0c;标题有些小于5字符的短标题的垃圾数据&#xff0c;进行清空处理&#xff0c;让我进行批量删除。废话不多说&#xff0c;接着干。 首先在dt根目录新建delmysql.php文件&#xff0c;代码如下&#xff1a; <?php r…

open vswitch + veth 实验

第一步 ip link add veth0 type veth peer name veth1 ip link add veth2 type veth peer name veth3 ip link s veth0 netns ns0 第二部创建网桥 ovs-vsctl show ovs-vsctl add-br br2 ovs-vsctl add-port br2 veth1 ovs-vsctl add-port br2 veth3 ovs-vsctl show ip l …

linux设置应用开机自启(通用:mysql、jar、nginx、solr...)

1. 业务场景 用于单机生产环境&#xff0c;防止服务器断电或者强制重启导致的服务下线。 2. 实现方案 对于无状态服务&#xff0c;可容器部署设置 restart: always&#xff0c;systemctl eable docker对于有状态服务&#xff0c;可编写自启脚本&#xff0c;如下 ① 编写执行…

Tensorflow2 GPU 安装方法

一、Tensorflow2 GPU 安装方法 1. 首先安装Anaconda3环境2. 在Anaconda Prompt 中安装tensorflow23. 验证GPU是否可以使用 1. 首先安装Anaconda3环境 https://www.anaconda.com/ 2. 在Anaconda Prompt 中安装tensorflow2 conda update conda conda create -n tensorflow pyt…

华为智能企业上网行为管理安全解决方案(2)

本文承接&#xff1a; https://blog.csdn.net/qq_37633855/article/details/133339254?spm1001.2014.3001.5501 重点讲解华为智能企业上网行为管理安全解决方案的部署流程。 华为智能企业上网行为管理安全解决方案&#xff08;2&#xff09; 课程地址方案部署整体流程组网规划…

Python实用技术二:数据分析和可视化(2)

目录 一&#xff0c;多维数组库numpy 1&#xff0c;操作函数&#xff1a;​ 2&#xff0c;numpy数组元素增删 1&#xff09;添加数组元素 2&#xff09;numpy删除数组元素 3&#xff09;在numpy数组中查找元素 4&#xff09;numpy数组的数学运算 3&#xff0c;numpy数…

流程自动化(RPA)的好处有哪些?

流程自动化&#xff08;RPA&#xff09;是一种通过软件机器人实现业务流程自动化的技术。它可以模拟人类在计算机上执行的操作&#xff0c;从而自动化重复性、繁琐的任务&#xff0c;提高工作效率和准确性。流程自动化&#xff08;RPA&#xff09;的好处很多&#xff0c;下面我…

【数据结构】链表与LinkedList

作者主页&#xff1a;paper jie 的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVA数据结构》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精…

Feign接口调用GET请求@RequestParam传参丢失

文章目录 问题现象排查解决GET加注解解决使用POST方式解决 时间戳传参失败 问题现象 项目使用的是Spring Cloud微服务&#xff0c;服务间调用使用的是Feign在一次服务调用时&#xff0c;发现GET传参丢失&#xff0c;没有传递过去任何参数加了RequestParam注解&#xff0c;发现…

计算机网络学习易错点

目录 概述 1.internet和Internet的区别 2.面向连接和无连接 3.不同的T 4.传输速率和传播速率 5.传播时延和传输时延&#xff08;发送时延&#xff09; 6.语法&#xff0c;语义和同步 一.物理层 1.传输媒体与物理层 2.同步通信和异步通信 3.位同步&#xff08;比特同…