当前位置: 首页 > news >正文

el-table 列分页

在这里插入图片描述

<template><div><el-table:data="tableData":key="tampTime"style="width: 100%"><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="gender"label="性别"></el-table-column><el-table-columnv-for="(item, index) in showColData":key="index":label="item.colLabel"><template slot="header"><div class="custom-header-cell"><span class="label">{{item.colLabel}}</span><template v-if="colPage.totalPage > 1"><div v-if="!index" :class="['prev-btn', {disabled: colPage.current === 1}]" @click="handlePrev">上一页</div><div v-if="index === showColData.length - 1" :class="['next-btn', {disabled: colPage.current === colPage.totalPage}]" @click="handleNext">下一页</div></template></div></template><template slot-scope="scope">{{ scope.row.colData[item.index].colValue }}</template></el-table-column></el-table></div>
</template><script>export default {data () {return {tableData: [],fullColData: [],showColData: [],colPage: {current: 1,size: 10,totalPage: 0},tampTime: ''}},created () {this.initTableData()},methods: {// 模拟一些数据initTableData () {const result = []for (let i = 0; i < 10; i++) {const obj = {name: '张三',age: 18,gender: '男',colData: []}for (let j = 0; j < 40; j++) {obj.colData.push({colLabel: `${j + 1}`,colValue: `${i + 1}_${j + 1}`})}result.push(obj)}this.tableData = resultthis.initColData()},// 初始化列initColData () {const { tableData, colPage } = thisconst { colData: fullColData } = tableData[0]// 添加索引,用于取数据fullColData.forEach((item, index) => {item.index = index})this.fullColData = fullColDatalet showColData = fullColDataif (fullColData.length > colPage.size) {showColData = fullColData.slice(0, 10)}this.showColData = showColDatathis.colPage.totalPage = Math.ceil(fullColData.length / colPage.size)},// 上一页handlePrev () {let { current } = this.colPageif (current > 1) {current--this.colPage.current = currentthis.changeCellData()}},// 下一页handleNext () {let { current, totalPage } = this.colPageif (current < totalPage) {current++this.colPage.current = currentthis.changeCellData()}this.$forceUpdate()},// 根据页数改变列数据changeCellData () {const { colPage, fullColData } = thisconst startSlice = (colPage.current - 1) * colPage.sizeconst endSlice = startSlice + colPage.sizeconst showColData = fullColData.slice(startSlice, endSlice)this.showColData = showColDatathis.tampTime = new Date().valueOf()}}
}
</script><style lang="scss" scoped>
::v-deep .el-table {// 默认是 hidden 按钮超出会隐藏.el-table__header-wrapper,th.el-table__cell,.cell {overflow: visible;}.custom-header-cell {position: relative;.label {position: relative;z-index: 2;color: #000;}.prev-btn,.next-btn {width: 20px;padding: 6px 0;position: absolute;z-index: 9;top: -12px;background-color: #3f3fbb;color: #fff;text-align: center;font-weight: 400;line-height: 18px;transition: all .4s;&:hover {cursor: pointer;opacity: .8;}&.disabled {cursor: not-allowed;background-color: #a6a7e2;}}.prev-btn {left: -30px;}.next-btn {right: -10px;}}
}
</style>

相关文章:

el-table 列分页

<template><div><el-table:data"tableData":key"tampTime"style"width: 100%"><el-table-columnprop"name"label"姓名"width"180"></el-table-column><el-table-columnprop&quo…...

APP攻防--ADB基础

进入app包 先使用 adb devices查看链接状态 手机连接成功的 adb shell 获取到手机的一个shell 此时想进入app包时没有权限的&#xff0c;APP包一般在data/data/下。没有执行权限&#xff0c;如图 Permission denied 权限被拒绝 此时需要手机root&#xff0c;root后输入 su …...

【Linux】第十站:git和gdb的基本使用

文章目录 一、git的基本操作1.gitee新建仓库注意事项2.git的安装3.git的克隆4.git的add5.git的commit6.git的push7.git log8.git status9. .gitignore 二、Linux调试器---gdb1.背景2.gdb安装、进入与退出3.list/l4.r/run运行程序5. break/b 打断点6.info/i b 查看断点7.delete/…...

Single Image Haze Removal Using Dark Channel Prior(暗通道先验)

去雾算法都会依赖于很强的先验以及假设&#xff0c;并结合相应的物理模型&#xff0c;完成去雾过程。本文作者何凯明及其团队通过大量的无雾图像和有雾图像&#xff0c;归纳总结出无雾图像在其对应的暗通道图像上具有极低的强度值&#xff08;趋近于0&#xff09;&#xff0c;并…...

力扣382.链表随机节点(java利用数组随机返回节点值)

Problem: 382. 链表随机节点 文章目录 思路解题方法复杂度Code 思路 注意链表与数组的特性&#xff0c;对于随机访问读取的操作利用数组可以较方便实现&#xff0c;所以我们可以将链表中的节点值先存入到数组中最后再取出随机生成节点位置的值。 解题方法 1.生成List集合与Rand…...

在jupyter中使用R

如果想在Jupyter Notebook中使用R语言&#xff0c;以下几个步骤操作可行&#xff1a; 1、启动Anaconda Prompt 2、进入R的安装位置&#xff0c;切换到R的安装位置&#xff1a;D:\Program Files\R\R-3.4.3\bin&#xff0c;启动R&#xff0c;具体代码操作步骤如下&#xff0c;在…...

2023(第四届)江西开放数据创新应用大赛等你来挑战!

邀请函 这是一个友好的邀请。无论你是数据领域的专家、学生还是爱好者&#xff0c;我们都欢迎你加入这个平台。这不仅仅是一场比赛&#xff0c;更是一个交流、学习和展示自己的机会。 丰厚奖金&#xff1a;我们为参赛者准备了总计15W的奖金池&#xff0c;期待你的才华在这里得…...

2023-mac rz sz 安装

之前安装过一次&#xff0c;没问题&#xff0c;这次按照之前教程装了就不管上传下载都会卡住&#xff1b; step1: brew install lrzsz step2&#xff1a;在/usr/local/bin 路径下配置两个sh,之前从网上找到的直接用都不对&#xff0c;下面这个是调试过的正式可用的 iterm2…...

使用Matplotlib绘画3D图时运行不出结果,也不报错,图片是空白 !!

1.问题&#xff1a; 我使用如下代码运用matplotlib中的Axes3D绘画3D图&#xff0c;但是运行出来的结果是空白。 import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D #导入3D包 fig plt.figure() #窗口 #ax Axes3D(fig) # X, Y …...

Matlab函数——find

介绍 当你需要返回某个数组中符合指定条件的所有元素的索引时&#xff0c;可以使用 MATLAB 中的 find 函数。 find 函数语法&#xff1a; indices find(X) indices find(X, k) indices find(X, k, first) indices find(X, k, last) 其中&#xff0c;X 是一个数组&#xf…...

mac安装python3

文章目录 1. 安装1.1 brew安装&#xff08;失败&#xff09;2. 下载安装包 2. 查看版本3. 配置 1. 安装 1.1 brew安装&#xff08;失败&#xff09; brew install python3下载完成后报错&#xff1a;Error: python3.10: unknown or unsupported macOS version: :dunno 解决&a…...

【星海出品】VUE(一)

Windows安装nvm控制器 Windows里找都PowerShell。右击点击管理员运行。 1.安装choco Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(https://chocolatey.org/install.ps1))2.安装NVM choco install nvm 3.查看可…...

Stable Diffusion 的提示词使用技巧

推荐Stable Diffusion自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 什么是提示语&#xff1f; 提示语是人工智能中的一个重要组成部分&#xff0c;尤其是自然语言处理 &#xff08;NLP&#xff09;。在AI自人工智能中&#xff0c;想要获得好的效果&#xff0c;简…...

Hook函数

在嵌入式系统中&#xff0c;hook函数&#xff08;也被称为钩子函数&#xff09;是一种特殊类型的函数&#xff0c;它会在特定的事件发生时被操作系统内部调用。例如&#xff0c;在实时操作系统&#xff08;RTOS&#xff09;中&#xff0c;如果删除了一个任务&#xff0c;就会调…...

USB简介系列-01

文章目录 USB简介一、电气USB简介 通用串行总线(USB)是由Compaq,Intel,Microsoft和NEC开发的规范,后来惠普,朗讯和飞利浦加入。这些公司成立了 USB Implementers Forum, Inc 作为一家非营利性公司,以发布规范并组织 USB 的进一步开发。 USB-IF的目的是为当时使用的PC…...

算法小白的心得笔记:比较小数点后五位,而不会受到浮点数精度问题的影响。

epsilon 来比较浮点数 double epsilon 1e-6; // for 6 decimal places for (const auto &ratio : colorRatio) {std::cout << "__" << inum << "__" << ratio << " ";if ((inum - 1) % 10 0){std::cout &l…...

11月起,33个省份纳入数电票开票试点范围内,发票无纸化已是大势所趋!

10月底&#xff0c;北京、贵州、山东&#xff08;不含青岛市&#xff09;、湖南、宁夏5个地区相继发布开展数电票试点工作的通知&#xff0c;至此&#xff0c;全国已有33个省份纳入数电票开票试点范围内。根据上述5地区发布的相关公告&#xff0c;11月1日将正式推行“数电票”开…...

NLP之Bert多分类实现案例(数据获取与处理)

文章目录 1. 代码解读1.1 代码展示1.2 流程介绍1.3 debug的方式逐行介绍 3. 知识点 1. 代码解读 1.1 代码展示 import json import numpy as np from tqdm import tqdmbert_model "bert-base-chinese"from transformers import AutoTokenizertokenizer AutoToken…...

matlab中的mapminmax函数初步理解和应用

matlab中的mapminmax函数初步认识 一、mapminmax 顾名思义&#xff1a;映射最大最小 二、语法及举例 2.1 语法1 [Y,PS] mapminmax(X) 将矩阵X映射形成矩阵Y, Y中每行中的最小值对应-1&#xff0c;最大值对应1。PS是一个包含映射信息的结构体。 举例&#xff1a; clc cle…...

svc和ingress的关系

在Kubernetes中&#xff0c;SVC有三种类型&#xff0c;分别是ClusterIP、NodePort和LoadBalancer。而Ingress则是一种服务类型的扩展&#xff0c;它主要用于处理HTTP和HTTPS流量&#xff0c;并提供了对集群内部服务的路由和负载均衡功能。 下面简要介绍SVC的三种类型和Ingress…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...