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>

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

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

相关文章

使用nvm快速切换node版本,windows安装nvm实现管理node版本

使用nvm node管理工具管理node版本&#xff0c;可以做到node版本随意切换&#xff0c;能快速的降低、升高node版本 这里写目录标题 使用nvm node管理工具管理node版本&#xff0c;可以做到node版本随意切换&#xff0c;能快速的降低、升高node版本安装和使用步骤&#xff1a; 一…

XC6206 低压线性稳压器 300mA低功耗LDO

XC6206系列是一款采用CMOS和激光修整技术制造的高精度、低能耗、3端子、正电压调压器。该系列提供了一个大的电流和一个明显的小的辍学电压。 XC6206由限流器电路、驱动器晶体管、精确参考电压和纠错电路组成。该系列兼容低ESR陶瓷电容。电流限制器的折叠电路作为短路保护以及输…

如何通过Gunicorn和Niginx部署Django

本文主要介绍如何配置Niginx加载Django的静态资源文件&#xff0c;也就是Static 1、首先需要将Django项目中的Settings.py 文件中的两个参数做以下设置&#xff1a; STATIC_URL /static/ STATIC_ROOT os.path.join(BASE_DIR, static) 然后在宝塔面板中执行python manage.…

86、Redis 的 value 所支持的数据类型(String、List、Set、Zset、Hash)---->String相关命令

本次讲解要点&#xff1a; String相关命令&#xff1a;String是指value中的数据类型 启动redis服务器&#xff1a; 打开小黑窗&#xff1a; C:\Users\JH>e: E:>cd E:\install\Redis6.0\Redis-x64-6.0.14\bin E:\install\Redis6.0\Redis-x64-6.0.14\bin>redis-server.…

10.12广州见 | 第十六届智慧城市大会报名通道全面开启

第十六届中国智慧城市大会 将于10月12日至13日 在广州举办 智慧城市是数字中国、智慧社会的核心载体&#xff0c;是数字时代城市发展的高级形态。由中国服务贸易协会、中国测绘学会、中国遥感委员会主办的第十六届中国智慧城市大会&#xff0c;将以“数实融合开放创新智引未…

【Java基础-JDK21新特性】它发任它发,我用java8

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

STL set 和 map

文章目录 一、标准库中 set 和 multiset 的使用二、标准库中 map 和 multimap 的使用三、set 和 map 底层红黑树的模拟实现四、set 类 和 map 类的模拟实现 一、标准库中 set 和 multiset 的使用 set 是一颗 K 模型的红黑树&#xff0c;可以存储任意类型&#xff0c;multiset 和…

【数据结构】顺序查找,折半查找,分块查找的知识点总结及相应的代码实现

目录 1、顺序查找 定义及步骤 代码实现 2、折半查找 定义及步骤 代码实现 折半查找判定树 3、分块查找 定义及步骤 1、顺序查找 定义及步骤 顺序查找的定义&#xff1a;从数据集合的起始位置开始&#xff0c;逐一比较每个数据元素&#xff0c;直到找到所要查找…

哈希表的模拟实现

unordered_set: 接口函数&#xff1a; 对应的应用&#xff1a; unrodered_map: 对应的函数接口&#xff1a; 对应的应用&#xff1a; 比较set和unordered_set的效率&#xff1a; 可以看到各个方面hashset是优于set的。 哈希表的模拟实现&#xff1a; 哈希表的实现分为两种&…

什么是Peppol ID?如何创建?

Peppol 网络的两大优势是安全和高效&#xff0c;由于Peppol 最常用于电子发票&#xff0c;因此这些优势在电子发票上展露无遗。相比之下&#xff0c;通过电子邮件发送 PDF 格式的发票和其他文件不仅处理成本较高&#xff0c;而且容易出现发票欺诈。 如果您所在的公共部门组织或…

华为云云耀云服务器 L 实例评测:快速建站的新选择,初创企业和开发者的理想之选

华为云云耀云服务器 L 实例评测&#xff1a;快速建站的新选择&#xff0c;初创企业和开发者的理想之选 文章目录 华为云云耀云服务器 L 实例评测&#xff1a;快速建站的新选择&#xff0c;初创企业和开发者的理想之选导语&#xff1a;摘要&#xff1a; 正文产品概述部署简易性步…

使用免费软件将数据从机械硬盘克隆到固态硬盘!

正如大家所知道的那样&#xff0c;固态硬盘无论是在读写速度、功耗、噪声还是在耐用性等许多方面都比机械硬盘要更好&#xff0c;所以现在有越来越多的人想要使用升级硬盘&#xff0c;将自己的旧机械硬盘克隆到固态硬盘&#xff0c;从而优化计算机的性能。 目前市面上…

1、Elasticsearch 8.X 概述与安装

第1章 Elasticsearch 8.X 概述 1.1 Elasticsearch 8.X 距 2019 年 Elasticsearch 上一大版本 7.0 发布至今已经过去了 3 年。2022 年 2 月 11 日&#xff0c;Elasticsearch 发布了全新的 8.0 正式版本&#xff0c;这着实给了我们不 小的惊喜&#xff01;新版本中通过改进 Elas…

局域网点歌系统

网盘下载 1、先打开服务端&#xff0c;设置好IP地址 2、客户端打开连接服务器 3、客户端点歌&#xff0c;服务器即可播放

【RV1103】RTL8723bs (SD卡形状模块)驱动开发

文章目录 前言硬件分析Luckfox Pico的SD卡接口硬件原理图LicheePi zero WiFiBT模块总结 正文Kernel WiFi驱动支持Kernel 设备树支持修改一&#xff1a;修改二&#xff1a; SDK全局配置支持 wifi全局编译脚本支持编译逻辑拷贝rtl8723bs的固件到文件系统的固定目录里面去 上电后手…

jvs-rules(规则引擎)和jvs智能bi(自助式数据分析)9.22更新内容

规则引擎更新功能 新增: 1.新增节点匹配筛选 用于做多个条件的数据筛选&#xff0c;以便将符合条件的数据传递给下一个节点进行处理&#xff0c;通常用于实现复杂的查询逻辑。 2.复合变量节点新增判断条件选项说明 用户可以根据自己的需求&#xff0c;为复合变量节点添加不…

深入学习计算机组成原理文章体系

大家好&#xff0c;欢迎阅读《计算机组成原理》的系列文章&#xff0c;本系列文章主要教内容是从零学习计算机组成原理&#xff0c;内容通俗易懂&#xff0c;大家好好学习吧&#xff01;&#xff01;&#xff01; 更多的优质内容&#xff0c;请点击以下链接查看哦~~ 序号链接…

Java深入理解线程的三大特性

目录 1 CPU缓存导致可见性问题2 线程切换导致原子性问题3 性能优化导致有序性问题4 JMM(Java Memory Model)5 volatile6 synchronized 1 CPU缓存导致可见性问题 线程的三大特性&#xff1a; 可见性&#xff1a;Visibility有序性&#xff1a;Ordering原子性&#xff1a;Atomic…

ShapeableImageView 不只是圆形ImageView

偶然间看到了这位老哥的 https://juejin.cn/post/6869376452040196109#comment 文章&#xff0c;发现了ShapeableImageView–一个多形状的ImageView &#xff0c;虽然似乎发布了很久了&#xff0c;现在学习不晚。 效果图 布局文件 <com.google.android.material.imageview.S…

图形处理软件Photoshop Elements 2020 mac中文版 ps简化版

Photoshop Elements 2020 mac是一款非常实用的图形处理工具。ps elements 2020 mac中文版可以帮助您自动生成照片和视频作品的功能&#xff0c;采用Adobe Sensei AI技术可进行图像组织、编辑和创建等。Photoshop Elements 2020 for Mac激活版可以帮助您轻松整理照片和视频&…