【JaveWeb教程】(8)Web前端基础:Vue组件库Element之Table表格组件和Pagination分页组件 详细示例介绍

目录

  • 1 Table表格组件
    • 1.1 组件演示
    • 1.2 组件属性详解
  • 2 Pagination分页
    • 2.1 组件演示
    • 2.2 组件属性详解
    • 2.3 组件事件详解

在这里插入图片描述
接下来我们来学习一下ElementUI的常用组件,对于组件的学习比较简单,我们只需要参考官方提供的代码,然后复制粘贴即可。本节主要学习Tbale表格组件和Pagination分页组件

1 Table表格组件

1.1 组件演示

Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

接下来我们通过代码来演示。

首先我们需要来到ElementUI的组件库中,找到表格组件,如下图所示:

在这里插入图片描述

然后复制代码到我们之前的ElementVue.vue组件中,需要注意的是,我们组件包括了3个部分,如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示:

template模板部分:

在这里插入图片描述

script脚本部分

在这里插入图片描述

ElementView.vue组件文件整体代码如下:

<template><div><!-- Button按钮 --><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><!-- Table表格 --><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}
}
</script><style></style>

此时回到浏览器,我们页面呈现如下效果:

在这里插入图片描述

1.2 组件属性详解

那么我们的ElementUI是如何将数据模型绑定到视图的呢?主要通过如下几个属性:

  • data: 主要定义table组件的数据模型
  • prop: 定义列的数据应该绑定data中定义的具体的数据模型
  • label: 定义列的标题
  • width: 定义列的宽度

其具体示例含义如下图所示:

在这里插入图片描述

PS:Element组件的所有属性都可以在组件页面的最下方找到,如下图所示:

在这里插入图片描述

2 Pagination分页

2.1 组件演示

Pagination: 分页组件,主要提供分页工具条相关功能。其展示效果图下图所示:

在这里插入图片描述

接下来我们通过代码来演示功能。

首先在官网找到分页组件,我们选择带背景色分页组件,如下图所示:

在这里插入图片描述

然后复制代码到我们的ElementView.vue组件文件的template中,拷贝如下代码:

<el-paginationbackgroundlayout="prev, pager, next":total="1000">
</el-pagination>

浏览器打开呈现如下效果:

在这里插入图片描述

2.2 组件属性详解

对于分页组件我们需要关注的是如下几个重要属性(可以通过查阅官网组件中最下面的组件属性详细说明得到):

  • background: 添加北京颜色,也就是上图蓝色背景色效果。
  • layout: 分页工具条的布局,其具体值包含sizes, prev, pager, next, jumper, ->, total, slot 这些值
  • total: 数据的总数量

然后根据官方分页组件提供的layout属性说明,如下图所示:

在这里插入图片描述

我们修改layout属性如下:

 layout="sizes,prev, pager, next,jumper,total"

浏览器打开呈现如下效果:

在这里插入图片描述

发现在原来的功能上,添加了一些额外的功能,其具体对应关系如下图所示:

在这里插入图片描述

2.3 组件事件详解

对于分页组件,除了上述几个属性,还有2个非常重要的事件我们需要去学习:

  • size-change : pageSize 改变时会触发
  • current-change :currentPage 改变时会触发

其官方详细解释含义如下图所示:

在这里插入图片描述

对于这2个事件的参考代码,我们同样可以通过官方提供的完整案例中找到,如下图所示:

在这里插入图片描述

然后我们找到对应的代码,首先复制事件,复制代码如下:

@size-change="handleSizeChange"
@current-change="handleCurrentChange"

此时Panigation组件的template完整代码如下:

<!-- Pagination分页 -->
<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"backgroundlayout="sizes,prev, pager, next,jumper,total":total="1000">
</el-pagination>

紧接着需要复制事件需要的2个函数,需要注意methods属性和data同级,其代码如下:

methods: {handleSizeChange(val) {console.log(`每页 ${val}`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}},

此时Panigation组件的script部分完整代码如下:

<script>
export default {methods: {handleSizeChange(val) {console.log(`每页 ${val}`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}
}
</script>

回到浏览器中,我们f12打开开发者控制台,然后切换当前页码和切换每页显示的数量,呈现如下效果:

在这里插入图片描述

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

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

相关文章

c++学习:STL库(框架)+字符串模板类string+vector容器+list链表

目录 stl库 常用组件包括 字符串库 字符串模板类string 头文件 最常用的字符串模板类 字符串类型 模板原型 模板的成员数据类型 模板成员函数 有些函数会有重载&#xff0c;可以去下面网址查看std::basic_string - cppreference.comhttps://zh.cppreference.com/w/cp…

加速科技ST2500 数模混合信号测试设备累计装机量突破500台!

国产数字机&#xff0c;测试中国芯&#xff01;新年伊始&#xff0c;国产半导体测试设备领军企业加速科技迎来了振奋人心的一刻&#xff0c;ST2500 数模混合信号测试设备累计装机量突破500台&#xff01;加速科技凭借其持续的创新能力、完善的解决方案能力、专业热忱的本地化服…

【Linux Shell】10. 函数

文章目录 【 1. 函数的定义 】【 2. 函数参数 】 【 1. 函数的定义 】 所有函数在使用前必须定义 。这意味着必须将函数放在脚本开始部分&#xff0c;直至shell解释器首次发现它时&#xff0c;才可以使用。 调用函数仅使用其函数名即可 。 函数返回值在调用该函数后通过 $? 来…

SAP SD-DN-MM 交货单相关物料凭证的视图的日期问题

眼下有个需求 获取交货单对应的物料凭证的过账日期BLDAT。 同步BW数据过去 新增一个数据库视图 但是实际使用时&#xff0c;有效部分仅本月&#xff0c;再选择条件里面要加上 MATdoc-bldat > sy-datum - sydatum6(2). 于是使用ST05 跟踪了一下&#xff0c;发现在DD28S…

MCU最小系统原理图中四个问题详解——芯片中有很多电源管脚的原因(VDD/VSS/VBAT)、LC滤波、两级滤波、NC可切换元件

前言&#xff1a;本文对MCU最小系统原理图中的四个问题进行详解&#xff1a;芯片中有很多电源管脚的原因&#xff08;VDD/VSS/VBAT&#xff09;、LC滤波、两级滤波、NC可切换元件。本文以GD32F103C8T6最小系统原理图举例 目录&#xff1a; 芯片中有很多电源管脚的原因&#x…

SQL Server 配置远程连接

Windows 安装好 SQL Server 的 SSMS,打开SSMS配置远程连接 找到 配置管理器 启用 TCP/IP 打开防火墙设置 新建入站规则 端口TCP - 特定本地端口 (1433)允许连接下一步名称完成 重启 SQL Server 服务

yum来安装php727

yum 安装php727,一键安装&#xff0c;都是安装在系统的默认位置&#xff0c;方便快捷 先确定linux平台中centos的版本信息&#xff0c;一下内容针对el7 查看linux版本 &#xff1a; cat /etc/redhat-release 查看内核版本命令&#xff1a; cat /proc/version (0)如果有安装好…

使用Adobe Acrobat Pro DC给pdf文件填加水印

前言 GPT4的官方售价是每月20美元&#xff0c;很多人并不是天天用GPT&#xff0c;只是偶尔用一下。 如果调用官方的GPT4接口&#xff0c;就可以按使用量付费&#xff0c;用多少付多少&#xff0c;而且没有3个小时内只能提问50条的使用限制。 但是对很多人来说调用接口是比较麻烦…

了解什么是UV纹理?

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 什么是UV&#xff1f; UV 是与几何图形的顶点信息相对应的二维纹理坐…

温和去油去黑头,只需敷上一刻钟的泥膜就够了

冬季天气干燥&#xff0c;很多朋友脸部更容易出油&#xff0c;连带着黑头也变多了。这是因为干燥的环境会刺激皮脂腺分泌&#xff0c;导致皮肤油脂分泌过多&#xff0c;容易堵塞毛孔形成黑头。因此&#xff0c;在冬季特别需要注意控油去黑头的工作。 控油去黑头需要清洁毛孔&am…

Linux学习(1):目录结构、编辑器和用户管理

Linux学习&#xff08;1&#xff09;&#xff1a;目录结构、编辑器和用户管理 1 Linux目录结构2 vi和vim编辑器2.1 快捷键练习 3 用户管理3.1 添加用户3.2 删除用户即主目录3.3 切换用户 4 用户组 1 Linux目录结构 在linux世界里&#xff0c;一切皆为文件。 linux目录结构&a…

软件测试|PyQt5实战教程(一)安装与环境配置

简介 我们之前介绍过使用tkinter创建图形用户界面&#xff08;GUI&#xff09;应用程序&#xff0c;现在我们来介绍另外一个用于创建GUI的神器——pyQt5&#xff0c;它可以用于创建跨平台的桌面应用程序。PyQt5 实现了一个 Python模块集&#xff0c;有 620 个类&#xff0c;60…

软件测试|如何使用Python取句中中英文内容

简介 提取句子中的中英文内容在自然语言处理中是一个常见任务&#xff0c;通常用于文本处理、机器翻译和语言学研究。本文将详细介绍如何使用 Python 提取句子中的中英文内容&#xff0c;包括准备工作、选择合适的库、编写代码示例和演示示例。 准备工作 我们可以使用Python…

Linux系统SSH远程管理服务概述

目录 一.SSH协议 1.定义 2.优点 &#xff08;1&#xff09;加密 &#xff08;2&#xff09;压缩 3.SSH的客户端与服务端 &#xff08;1&#xff09;客户端 &#xff08;2&#xff09;服务端 4.原理 5.实验&#xff1a;使用ssh远程登录 二.OpenSSH服务器 1.概念 2.…

【Linux】之搭建 PostgreSQL 环境

前言 在 Linux 系统下安装 PostgreSQL&#xff0c;可以选择快捷方便的 Docker 安装&#xff0c;但正常的服务器都是直接原生安装的&#xff0c;所以&#xff0c;这里我将讲解如何正常安装 PostgreSQL 以及安装之后的一些配置。如果想了解 Docker 安装的话&#xff0c;可以查看我…

软件测试|Pydantic BaseModel使用详解

简介 当我们在Python中编写应用程序时&#xff0c;通常需要处理和验证数据。Pydantic 是一个流行的库&#xff0c;它可以帮助我们定义数据模型并自动进行数据验证。在Pydantic中&#xff0c;BaseModel是一个核心概念&#xff0c;它用于定义数据模型和验证输入数据。在这篇文章…

【管理篇 / 升级】❀ 13. FortiOS 7.4固件升级新规则 ❀ FortiGate 防火墙

【简介】飞塔防火墙的固件升级一直是所有厂家中最好的。只要有注册官方帐号&#xff0c;有注册设备&#xff0c;并且只要有一台设备在服务期内&#xff0c;即可下载所有型号的所有版本的固件。即使其它设备服务期已过&#xff0c;也可以通过固件文件手动升级&#xff0c;避免防…

VMware安装CentOS7虚拟机

VMware 安装 获取 VMware 安装包 下载地址&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1ELR5NZa7rO6YVplZ1IUigw?pwdplz3 提取码&#xff1a;plz3 包括&#xff1a;当然&#xff0c;也可以自己去别的地方下载&#xff0c;WMware 版本都差不多&#xff0c;现在用的比…

Vulnhub-DC1

前言 一个比较简单的实战靶场&#xff0c;官方要求是找到/root下的flag&#xff0c;所以直接提权即可。但对于学习和训练来说还是太简略了&#xff0c;在打靶场的时候还是全面一些较好。 本次靶场实战涉及信息收集、漏洞查找与利用、getshell、数据库渗透、密码破解、linux提…

创建mysql普通用户

一、创建mysql普通用户的原因&#xff1a; 权限控制&#xff1a;MySQL的权限系统允许您为每个用户分配特定的权限。通过创建普通用户&#xff0c;您可以根据需要为每个用户分配特定的数据库和表权限&#xff0c;而不是将所有权限授予一个全局管理员用户。这有助于提高数据库的…