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

Vue组件库Element

目录

  • Vue组件库Element
    • Element简介
    • Element快速入门环境配置
    • Element常用组件
      • Table表格
        • Table表格演示
        • Table表格属性详解
      • Pagination分页
        • Pagination分页演示
        • Pagination分页属性详解
        • Pagination分页事件详解
      • Dialog对话框
        • Dialog对话框组件演示
        • Dialog对话框属性详解
      • Form表单
        • Form表单组件演示

Vue组件库Element

Element简介

关于前端开发模式MVVM,之前学习的vue是侧重于VM开发的,主要用于数据绑定到视图的,那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架,主要用于开发美观的页面的。

Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。
Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比。

在这里插入图片描述

对于ElementUI,我们作为一个后台开发者,只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中,并且做一些修改即可。
其官网地址点击这里。

Element快速入门环境配置

先要在项目下安装ElementUI的组件库:
npm install element-ui@2.15.3

在这里插入图片描述

然后在main.js这个入口js文件中引入ElementUI的组件库,其代码如下:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

然后我们需要按照vue项目的开发规范,在src/views目录下创建一个vue组件文件,注意组件名称后缀是.vue,并且在组件文件中编写之前介绍过的基本组件语法:

在这里插入图片描述

最后我们只需要去ElementUI的官网,找到组件库,然后找到按钮组件,抄写代码即可

在这里插入图片描述

最后,我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件

在这里插入图片描述

然后运行我们的vue项目发现成功显示抄写组件,入门编写完成。

在这里插入图片描述




Element常用组件

对于组件的学习比较简单,我们只需要参考官方提供的
代码,然后复制粘贴即可。

Table表格

Table表格演示

Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。然后复制代码到我们之前的ElementVue.vue组件中,需要注意的是,我们组件包括了3个部分,如果官方有除了template部分之外的style和script都需要复制

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

Table表格属性详解

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

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

在这里插入图片描述

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

在这里插入图片描述



Pagination分页

Pagination分页演示

Pagination: 分页组件,主要提供分页工具条相关功能。首先在官网找到分页组件,我们选择带背景色分页组件,然后复制代码到我们的ElementView.vue组件文件的template中

在这里插入图片描述

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

在这里插入图片描述

Pagination分页属性详解

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

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

比如我们修改layout属性如下:

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

浏览器打开呈现如下效果,发现在原来的功能上,添加了一些额外的功能,其具体对应关系如下图所示:

在这里插入图片描述

Pagination分页事件详解

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

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

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

在这里插入图片描述

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

在这里插入图片描述

此时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}`);},},

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

在这里插入图片描述



Dialog对话框

Dialog对话框组件演示

Dialog: 在保留当前页面状态的情况下,告知用户并承载相关操作。其企业开发应用场景示例如下图所示:

在这里插入图片描述

在ElementUI官方找到Dialog组件

在这里插入图片描述

然后复制如下代码到我们的组件文件的template模块中

<br /><br /><!--Dialog 对话框 -->
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table>
</el-dialog>

并且复制数据模型script模块中:

gridData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},
],
dialogTableVisible: false,

然后我们打开浏览器,点击按钮,呈现如下效果:

在这里插入图片描述

Dialog对话框属性详解

如何做到对话框的显示与隐藏的呢?是通过如下的属性:


visible.sync :是否显示 Dialog

具体释意如下图所示

在这里插入图片描述

visible属性绑定的dialogTableVisble属性一开始默认是false,所以对话框隐藏;然后我们点击按钮,触发事件,修改属性值为true



Form表单

Form表单组件演示

Form 表单:由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。
表单在我们前端的开发中使用的还是比较多的,在ElementUI的官方找到对应的组件示例,我们的需求效果是:在对话框中呈现表单内容:

在这里插入图片描述

所以,首先我们先要根据上一小结的内容,制作一个新的对话框,还需要注意的是,针对这个新的对话框,我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示。
然后我们复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中,但是,此处官方提供的表单项标签太多,所以我们只需要保留前面3个表单项组件,我们发现其中表单项标签使用了v-model双向绑定,所以我们需要在vue的数据模型中声明变量。
通过观察上述代码,我们发现双向绑定的属性有4个,分别是form.name,form.region,form.date1,form.date2,同样,官方的代码中,在script部分中,还提供了onSubmit函数,表单的立即创建按钮绑定了此函数,我们可以输入表单的内容,而表单的内容是双向绑定到form对象的,所以我们修改官方的onSubmit函数即可,而且我们还需要关闭对话框。

然后打开浏览器,我们打开对话框,并且输入表单内容,点击立即创建按钮,呈现如下效果

在这里插入图片描述

最终vue组件完整代码如下:

<template><div><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-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><!-- Pagination分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"backgroundlayout="sizes,prev, pager, next,jumper,total":total="1000"></el-pagination><br /><br /><!-- Dialog对话框-Form表单 --><el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button><el-dialog title="Form表单" :visible.sync="dialogFormVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="form.date1"style="width: 100%"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-pickerplaceholder="选择时间"v-model="form.date2"style="width: 100%"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog></div>
</template><script>
export default {data() {return {dialogFormVisible: false,//表单案例的数据双向绑定form: {name: "",region: "",date1: "",date2: "",},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 弄'}]};},methods: {handleSizeChange(val) {console.log(`每页 ${val}`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);},//表单案例的提交事件onSubmit() {console.log(this.form); //输出表单内容到控制台this.dialogFormVisible = false; //关闭表案例的对话框},},
};
</script><style>
</style>

相关文章:

Vue组件库Element

目录 Vue组件库ElementElement简介Element快速入门环境配置Element常用组件Table表格Table表格演示Table表格属性详解 Pagination分页Pagination分页演示Pagination分页属性详解Pagination分页事件详解 Dialog对话框Dialog对话框组件演示Dialog对话框属性详解 Form表单Form表单…...

broadcast自动扩展

broadcast&#xff1a; 1、能够进行维度扩展&#xff0c;是自动的2、在扩展的时候不需要拷贝数据要点&#xff1a; - 从最小的维度开始匹配&#xff0c;如果前面没有维度了&#xff0c;在前面插入一个新的维度。- 插入的新维度size是1&#xff0c;再将其扩展为与目标相同大小si…...

【Pm4py第七讲】关于visualization

本节用于介绍pm4py中的可视化函数&#xff0c;包括可视化bpmn、petri、性能图谱、变迁系统等。 1.函数概述 本次主要介绍Pm4py中一些常见的可视化函数&#xff0c;总览如下表&#xff1a; 函数名说明view_alignments(log, aligned_traces[, format])可视化对齐方法 view_bpmn(…...

通过 BigQuery 中的 11 个新链增强 Google Cloud 的区块链数据服务

2018 年初&#xff0c;Google Cloud 与社区合作&#xff0c;通过BigQuery 公共数据集实现区块链数据民主化&#xff1b;2019 年&#xff0c;又扩展了六个数据集&#xff1b;今天&#xff0c;我们在 BigQuery 公共数据集中添加了 11 个最受欢迎的区块链预览版。我们也在对该程序…...

C++笔记之文档术语——将可调用对象作为函数参数

C笔记之文档术语——将可调用对象作为函数参数 相关博文&#xff1a;C笔记之函数对象functors与可调用对象 文章目录 C笔记之文档术语——将可调用对象作为函数参数1.在函数参数中传递可调用对象2.‘在参数中传入可调用对象’和‘将可调用对象作为函数参数’哪个描述更加专业…...

【Android知识笔记】FrameWork中的设计模式

一、FrameWork中有哪些设计巧妙之处 例如: Binder调用,模糊进程边界: 屏蔽跨进程IPC通信的细节,让开发者把精力放在业务上面,无需关心进程之间的通信。Bitmap大图传输,高性能: 只传递Binder句柄,到目标进程后做内存映射,不用做大量数据拷贝,速度非常快。Zygote创建进…...

机器学习西瓜书+南瓜书吃瓜教程第三章学习笔记

本次学习为周老师的机器学习西瓜书谢老师南瓜书Datawhale视频 视频地址 下面为本人的学习笔记&#xff0c;最近很忙还没学多少&#xff0c;之后补&#xff01;&#xff01;&#xff01; u1s1&#xff0c;边看视频边自己手推一遍真的清楚很多&#xff0c;强烈推荐自己手推虽然花…...

JUnit5单元测试提示“Not tests were found”错误

JUnit5单元测试提示“Not tests were found”错误&#xff0c;如下图所示&#xff1a; 或者 问题解析&#xff1a; 1&#xff09;使用Test注解时&#xff0c;不能有返回值&#xff1b; 2&#xff09;使用Test注解时&#xff0c;不能使用private关键字&#xff1b; 存在以上情…...

C++ -- IO流

目录 C语言的输入与输出 CIO流 C标准IO流 C文件IO流 文件常见的打开方式如下 以二进制的形式操作文件 以文本的形式操作文件 读写结构体 stringstream的简单介绍 C语言的输入与输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf()。 scanf(): 从标准输…...

uniapp:如何修改组件默认样式

日历组件默认样式如下图&#xff0c;但是我不想要右上角的红点&#xff0c;并且日期下面的数字要加红色背景&#xff0c;变成圆形&#xff0c;还是先用元素检查找到元素的类名&#xff0c;然后通过/deep/来覆盖样式&#xff0c;需要注意的是&#xff0c;lang要scss或者less&…...

Lombok @Accessors(chain = true) 导致 FastJson parsObject()对父类属性失效

我们在项目中经常会用到lombok工具对POJO类进行简化,但不可避免的存在父类和子类的设计,并且会对父类和子类进行序列化和反序列化,今天遇到了一个问题,序列化的json字符串转化为子类对象时无法获取到父类属性值,对象中所有父类属性均为空值或默认值,很是奇怪,代码如下: 父类:P…...

Aztec交易架构解析

1. 引言 前序博客有&#xff1a; Aztec的隐私抽象&#xff1a;在尊重EVM合约开发习惯的情况下实现智能合约隐私完全保密的以太坊交易&#xff1a;Aztec网络的隐私架构Aztec.nr&#xff1a;Aztec的隐私智能合约框架——用Noir扩展智能合约功能Account Abstraction账号抽象——…...

商品秒杀系统整理

1、使用redis缓存商品信息 2、互斥锁解决缓存击穿问题&#xff0c;用缓存空值解决缓存穿透问题。 3、CAS乐观锁解决秒杀超卖的问题 4、使用redission实现一人一单。&#xff08;分布式锁lua&#xff09;脚本。 5、使用lua脚本进行秒杀资格判断&#xff08;将库存和用户下单…...

C语言实现八种功能的通讯录(添加、删除、查找、修改、显示、排序、退出、清空)

通讯录功能概要及前提说明 此通讯录利用C语言完成&#xff0c;可以实现八种功能的通讯录&#xff08;添加、删除、查找、修改、显示、排序、退出、清空&#xff09; 代码由三部分组成&#xff0c;为什么要写成三部分而不写成一部分可以参考我以前的博客&#xff0c;如下&…...

视频监控/视频汇聚/安防视频监控平台EasyCVR配置集群后有一台显示离线是什么原因?

开源EasyDarwin视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多…...

【RabbitMQ实战】02 生产者和消费者示例

在上一节中&#xff0c;我们使用docker部署了RabbitMQ&#xff0c;这一节我们将写一段生产者和消费者的代码。将用到rabbitmq的原生API来进行生产和发送消息。 一、准备工作 开始前&#xff0c;我们先在RabbitMQ控制台建相好关的数据 本机的RabbitMQ部署机器是192.168.56.201…...

Linux下ThinkPHP5实现定时器任务 - 结合crontab

实例一&#xff1a; 1.在/application/command创建要配置的PHP类文件&#xff0c;需要继承Command类&#xff0c;并重写configure和execute两个方法&#xff0c;例如: <?php namespace app\command; use think\console\Command; use think\console\Input; use think\cons…...

3dsmax模型烘焙光照贴图并导入unity流程详解

目录 前言 软件环境 前置知识储备 一、模型场景搭建 二、模型材质处理 三、vray渲染准备 四、烘焙至贴图 五、unity场景准备 六、贴图与材质 前言 该流程针对某些固定场景&#xff08;模型发布、无法使用实时渲染引擎等&#xff09;情况下的展示&#xff0c;本文记录烘…...

安卓生成公钥和md5签名

安卓公钥和md5证书签名 大家好&#xff0c;最近需要备案app&#xff0c;用到了公钥和md5&#xff0c;MD5签名我倒是知道&#xff0c;然而对于公钥却一下子不知道了&#xff0c; 现在我讲一下我的流程。 首先是md5证书签名的查看&#xff0c; 生成了apk和签名.jks后&…...

pwndbg安装(gdb插件)

pwndbg安装&#xff08;gdb插件&#xff09; 源地址&#xff1a;https://github.com/pwndbg/pwndbg 手动安装 git clone https://github.com/pwndbg/pwndbg cd pwndbg ./setup.sh 没啥问题运行gdb的话就可以看到明显的不同了 如果安装成功了&#xff0c;但没有生效 如果有问…...

热点 | Harness 架构深度解析:AI智能体编排框架的核心原理

热点 | Harness 架构深度解析:AI智能体编排框架的核心原理 声明: 📝 作者:甜城瑞庄的核桃(ZMJ) 原创学习笔记,欢迎分享,但请保留作者信息及原文链接哦~ 本文深度解析 Claude Code 背后的核心架构 Harness,揭示为何"Harness 比模型更重要"成为 2026 年 AI …...

MGeo地址实体对齐镜像快速上手:5分钟部署,支持自定义阈值

MGeo地址实体对齐镜像快速上手&#xff1a;5分钟部署&#xff0c;支持自定义阈值 1. 引言&#xff1a;地址数据混乱&#xff0c;是时候换个思路了 你有没有被这样的问题困扰过&#xff1f; 公司CRM系统里&#xff0c;同一个客户因为地址写法不同&#xff0c;被重复记录了十几…...

SparseMoE实战:从零构建一个高效的稀疏混合专家层

1. 稀疏混合专家层&#xff08;SparseMoE&#xff09;入门指南 第一次听说稀疏混合专家层时&#xff0c;我也是一头雾水。这玩意儿听起来像是某种高科技黑箱&#xff0c;但实际上它的核心思想特别接地气——就像我们去医院看病&#xff0c;普通全科医生能处理常见病症&#xff…...

Win11Debloat:让Windows 11系统轻盈如飞的优化工具

Win11Debloat&#xff1a;让Windows 11系统轻盈如飞的优化工具 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter and custo…...

万象视界灵坛应用案例:博物馆数字藏品语义标注系统开发实录

万象视界灵坛应用案例&#xff1a;博物馆数字藏品语义标注系统开发实录 1. 项目背景与挑战 博物馆数字化进程中&#xff0c;海量文物藏品的语义标注一直是个难题。传统方法依赖人工标注&#xff0c;不仅效率低下&#xff0c;而且难以保证一致性。以某省级博物馆为例&#xff…...

Alpamayo-R1-10B参数详解:Top-p=0.98与Temperature=0.6组合的工程意义解析

Alpamayo-R1-10B参数详解&#xff1a;Top-p0.98与Temperature0.6组合的工程意义解析 1. 项目背景与技术架构 1.1 Alpamayo-R1-10B核心定位 Alpamayo-R1-10B是NVIDIA开发的自动驾驶专用视觉-语言-动作(VLA)模型&#xff0c;其核心设计目标是通过类人因果推理能力提升自动驾驶…...

Pixel Couplet Gen效果展示:抽象门神像素方块+动态卷轴交互演示

Pixel Couplet Gen效果展示&#xff1a;抽象门神像素方块动态卷轴交互演示 1. 项目概览 Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的AI春联生成器。通过ModelScope大模型驱动&#xff0c;将传统春联创作转化为充满游戏感的数字体验。 核心特点&#xff1a…...

Win10/Win11磁盘合并全攻略:第三方工具 vs 系统自带功能实测对比

Win10/Win11磁盘合并全攻略&#xff1a;第三方工具 vs 系统自带功能深度解析 当你的电脑硬盘空间告急时&#xff0c;合并磁盘分区可能是最直接的解决方案之一。不同于简单的删除文件或清理垃圾&#xff0c;磁盘合并能从根本上重组存储空间&#xff0c;让系统运行更加流畅。本文…...

3大创新突破:CoreCycler单核心稳定性测试全攻略

3大创新突破&#xff1a;CoreCycler单核心稳定性测试全攻略 【免费下载链接】corecycler Script to test single core stability, e.g. for PBO & Curve Optimizer on AMD Ryzen or overclocking/undervolting on Intel processors 项目地址: https://gitcode.com/gh_mir…...

5分钟搞懂线结构光三维重建:从激光平面到深度信息的完整流程

线结构光三维重建&#xff1a;从激光平面到深度信息的实战解析 当你第一次看到激光线扫过物体表面时&#xff0c;可能不会想到这条细细的光线背后隐藏着精确测量物体三维形状的能力。线结构光三维重建技术正悄然改变着工业检测、逆向工程和医疗影像等领域——它不需要接触物体…...