element_Plus中表格和分页的使用

HTML

表格(:data="filterData"绑定的数据)

<el-table ref="multipleTableRef" :data="filterData" style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column property="question" label="问题" width="200"></el-table-column><el-table-column property="answer" label="答案" width="200" />        
</el-table>

分页

<el-paginationv-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[100, 200, 300, 400]":small="small":disabled="disabled":background="background"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>//:total="tableData.length"总数据长度

js

<script lang="ts" setup>import { ref } from 'vue'//原始数据
const tableData = reactive([{question: '问题01',answer: '答案01',classify: '分类01',state: '生效01',},{question: '问题02',answer: '答案02',classify: '分类02',state: '生效02',},
])let filterData: any = reactive([])   // 过滤后的数据,用于绑定分页
filterData = tableData.slice(0, 10)  //重新赋值加载十条数据,避免加载没有数据,或数据过长const currentPage4 = ref(4)  //当前在第几个分页
const pageSize4 = ref(10)    //:page-sizes="[10, 20, 30, 40]" 默认每页展示几条数据
const small = ref(false)
const disabled = ref(false)
const background = ref(false)// 点击每页显示多少触发的函数  
const handleSizeChange = (val: number) => {//把需要展示的数据替换为截取的数据filterData = tableData.slice(0, val)
}// 点击前往第几页触发的函数
const handleCurrentChange = (val: number) => {//把需要展示的数据替换为截取的数据filterData = tableData.slice(10*(val-1),val*10)
}</script>

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

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

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

相关文章

图像增强与特效-API调用实践-百度AI

百度智能云-图像增强-清晰度 文章目录 介绍实践Python 解释器获取token调用 最近在整理草稿箱。2022-07-25。我的token应该早过期了哈&#xff0c;需要大家去官网查看最新的api接口申请替换钥匙喔。 介绍 图像清晰度增强官网介绍&预览 API文档 API调用方式 ApiExplorer平…

【译】Celery文档3:在Django中使用Celery

https://docs.celeryq.dev/en/latest/django/first-steps-with-django.html#django-first-steps First steps with Django Django3.1后默认支持Celery&#xff0c;不再需要安装额外的库。 Django项目布局大概是这样的&#xff1a; - proj/- manage.py- proj/- __init__.py- se…

书生·浦语大模型实战营Day01全链路开源体系

书生浦语大模型实战营-全链路开源体系 大模型 通用人工智能的重要途经 专用大模型–通用大模型 大模型&#xff1a;通用人工智能的重要途经&#xff08;专用大模型–通用大模型–多模态大模型–智能体&#xff09; InternLM发展历程 InternLM–书生 万卷&#xff08;数据…

海报生成器源码(Python版)

海报生成器源码&#xff08;Python版&#xff09; 效果图部分源码领取源码下期更新预报 效果图 部分源码 from flask import Flask, Response, request from flask_cors import CORS from flask_uploads import UploadSet, configure_uploads, IMAGES, patch_request_classimp…

使用ldirectord实现LVS健康检测

注意&#xff1a;在LVS/DR模式环境下&#xff0c;具体配置见上篇LVS/DR配置 1.1 ldirectord介绍 LVS监控: ldirectord 主要设计用于监控Linux虚拟服务器&#xff08;LVS&#xff09;架构中的服务器池状态。LVS是一种负载均衡解决方案&#xff0c;用于将网络流量和请求分发到多…

Enhancing Diffusion——利用三维透视几何约束增强扩散模型

概述 透视在艺术中被广泛研究&#xff0c;但现代高质量图像生成方法却缺乏透视精度。新的生成模型引入了几何约束&#xff0c;通过训练过程提高透视精度。这样可以生成更逼真的图像&#xff0c;并提高相关深度估计模型的性能。 最近的图像生成技术使研究人员能够创造性地进行…

点成分享 | 温度控制的艺术:TX150系列水浴中的稳定性与均匀性解析

前言 在实验室和工业生产中&#xff0c;温度控制对于确保实验结果的精确性和产品的高质量至关重要&#xff0c;尤其是针对温度敏感的样品和原材料&#xff0c;如蛋白酶等&#xff0c;微小的温度误差都会对实验结果可靠性和生产质量造成影响。而在控温性能中&#xff0c;稳定性…

自学Java要到什么程度才足够能力去实习和就业?

引言 Java&#xff0c;作为当今软件开发领域的主流编程语言之一&#xff0c;对于初学者而言&#xff0c;明确掌握到什么程度才能开始寻找实习和入职机会是至关重要的。这涉及到对Java知识体系的理解深度、技能掌握程度以及实际项目经验的积累。 本文将分别从实习和入职两个不…

学习VUE2第6天

一.请求拦截器 可以节流&#xff0c;防止多次点击请求 toast是单例 二.前置路由守卫 在Vue.js中&#xff0c;前置路由守卫是指在路由转换实际发生之前执行的钩子函数。这是Vue Router&#xff08;Vue.js官方的路由管理器&#xff09;提供的一种功能&#xff0c;允许开发者在用…

UNI-APP_拨打电话权限如何去掉,访问文件权限关闭

uniapp上架过程中一直提示&#xff1a;允许“app名”拨打电话和管理通话吗&#xff1f; uniapp配置文件&#xff1a;manifest.json “permissionPhoneState” : {“request” : “none”//拨打电话权限关闭 }, “permissionExternalStorage” : {“request” : “none”//访…

CAN总线介绍及在ZYNQ 7020中的应用

一、CAN总线协议介绍 1.CAN是 Controller Area Network 的缩写&#xff08;以下称为 CAN &#xff09;&#xff0c;是 ISO 国际标准化的串行通信协议。可以用来满足“多总线通信时&#xff0c;线束的数量过多”、“通过多个 LAN &#xff0c;进行大量数据的高速通信”的需要。…

设计数据库

一、设计数据库 ER图&#xff1a;Entity-Relation实体关系图 RDBMS关系型数据库管理系统里不支持多对多的关系&#xff0c;只支持一对一或一对多关系 1、数据库三大范氏 第一范式&#xff1a;每个字段不能再分 第二范式&#xff1a;每个表都有主键 第三范式&#xff1a;从…

FIFO Generate IP核使用——Native接口Basic页配置

Xilinx FIFO Generator IP核是一个经过全面验证的先入先出&#xff08;FIFO&#xff09;内存队列&#xff0c;专为需要按顺序存储和检索的应用而设计。该IP核为所有FIFO配置提供了优化解决方案&#xff0c;并在利用最小资源的同时实现最大性能&#xff08;高达500MHz&#xff0…

《Python编程从入门到实践》day19

#昨日知识点回顾 使用unittest模块测试单元和类 #今日知识点学习 第12章 武装飞船 12.1 规划项目 游戏《外星人入侵》 12.2 安装pygame 终端管理器执行 pip install pygame 12.3 开始游戏项目 12.3.1 创建Pygame窗口及响应用户输入 import sysimport pygameclass…

预编码算法学习笔记

预编码算法学习笔记 摘要&#xff1a; 本文将深入探讨预编码算法的学习要点&#xff0c;包括其基本概念、原理、实现方法以及在通信系统中的应用。通过详细的阐述和实例分析&#xff0c;帮助读者全面理解预编码算法&#xff0c;并掌握其在实际问题中的应用技巧。 关键词&…

vim与tmux配置文件及常用命令总结

一. 配置文件 1. .tmux.conf # 使用CtrlA作为前缀组合键 set -g prefix C-a unbind C-b bind C-a send-prefix# 支持鼠标操作 setw -g mouse on# 为了能够重新加载配置文件而无需重启tmux&#xff0c;可以绑定一个快捷键 bind r source-file ~/.tmux.conf \; display-message…

mysql linux远程连接失败处理

问题一&#xff1a;远程连接不上mysql&#xff0c;提示Access denied 一、通过下面命令连接不上数据库 mysql -uroot -p mysql -uroot -h 10.5.122.100 -P 3306 -p报错信息如下&#xff1a; ERROR 1045 (28000): Access denied for user ‘root’‘localhost’ (using passwo…

Android4.4真机移植过程笔记(三)

如果文章字体看得不是很清楚&#xff0c;大家可以下载pdf文档查看&#xff0c;文档已上传&#xff5e;oo&#xff5e; 7、安装加密APK 需要修改文件如下&#xff1a; 相对Android4.2改动还是蛮大的&#xff0c;有些文件连路径都变了: //Android4.2 1、frameworks/native/libs…

tableau基础学习——添加标靶图、甘特图、瀑布图

标靶图 添加参考线 添加参考分布 甘特图 创建新的字段 如设置延迟天数****计划交货日期-实际交货日期 为正代表提前交货&#xff0c;负则代表延迟交货 步骤&#xff1a;创建——计算新字段 把延迟天数放在颜色、大小里面就可以 瀑布图 两个表按照地区连接 先做个条形图&…

Linux的vim下制作进度条

目录 前言&#xff1a; 回车和换行有区别吗&#xff1f; 回车和换行的区别展示&#xff08;这个我在Linux下演示&#xff09; 为什么会消失呢? 回车和换行的区别 为什么\r和\n产生的效果不同&#xff1f; 打印进度条&#xff1a; &#xff08;1&#xff09;打印字符串 …