前端框架Vue学习 ——(六)Vue组件库Element

文章目录

  • Element 介绍
  • 快速入门
  • 常见组件
    • 表格
    • 分页
    • Dialog 对话框组件
    • 表单
  • Container 布局容器


Element 介绍

Element:是饿了么团队研发的,一套为开发者、 设计师和产品经理准备的基于Vue 2.0的桌面端组件库。
组件:组成网页的部件,例如超链接、按钮、图片、表格、表单、分页条等等。
官网: https://element.eleme.cn/#/zh-CNListener

快速入门

  • 安装 ElementUI 组件库(在当前工程的目录下),在命令执行指令:
npm install element-ui@2.15.3
  • 引入 ElementUI 组件库(官网有)

在这里插入图片描述
main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});
  • 访问官网复制组件代码,调整(比如按钮)

views/element/ElementView.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-row></div>
</template>
<script>
export default {name: "ElementView"
}
</script>
<style scoped></style>

App.vue 中导入上述组件

<template><div id="app"><ElementView></ElementView></div>
</template><style>
</style>
<script setup>
import ElementView from "@/views/element/ElementView.vue";
</script>

显示效果

在这里插入图片描述

常见组件

表格

在这里插入图片描述

每一个组件对应的属性,在组件底部都有说明。

在这里插入图片描述

<template><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></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>

在这里插入图片描述

分页

<el-paginationbackgroundlayout="sizes, prev, pager, next, jumper, total"@size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000">
</el-pagination>
<script>
export default {methods: {handleSizeChange: function (val) {alert("每页记录数变化" + val)},handleCurrentChange: function (val) {alert("页码发生变化" + val)}}
}</script>

在这里插入图片描述

layout 与下面组件的对应关系
在这里插入图片描述
在这里插入图片描述
size-change 和 current-change 事件来处理页码大小和当前页变动时候触发的事件。

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><!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><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><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div>
</el-dialog><script>export default {data() {return {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,dialogFormVisible: false,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '120px'};}};
</script>

表单

在这里插入图片描述

<!-- Dialog对话框 Form表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套form表单的 Dialog</el-button><el-dialog title="Form表单" :visible.sync="dialogFormVisible" width="800px"><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-picker type="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-picker placeholder="选择时间" 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>
<script>
export default {name: "ElementView",data() {return {form: {name: '',region: '',date1: '',date2: ''},dialogFormVisible: false}},methods: {onSubmit: function () {alert(JSON.stringify(this.form));}}
}
</script>

Container 布局容器

Container 布局容器可以实现如下类似的页面效果:

在这里插入图片描述

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

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

相关文章

【Unity】2D角色跳跃控制器

最近加了学校的Nova独游社&#xff0c;本文是社团出的二面题&#xff0c;后续有时间优化下可能会做成一个二维冒险小游戏。本文主要涉及相关代码&#xff0c;参考教程&#xff1a;《勇士传说》横版动作类游戏开发教程 效果演示 【Unity】2D角色跳跃模拟器 主要实现功能&#xf…

CV计算机视觉每日开源代码Paper with code速览-2023.11.2

精华置顶 墙裂推荐&#xff01;小白如何1个月系统学习CV核心知识&#xff1a;链接 点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【目标检测】Re-Scoring Using Image-Language Similarit…

Spring Boot 整合SpringSecurity和JWT和Redis实现统一鉴权认证

&#x1f4d1;前言 本文主要讲了Spring Security文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日一句&#xff1a;努力…

多功能声学综合馆:空间的“膜法师”

建筑是文明的承载者&#xff0c;是历史的见证者&#xff0c;也是城市的象征。但在现代都市中&#xff0c;我们不仅需要“固定”的建筑&#xff0c;更需要灵活与多功能性的空间。而这&#xff0c;正是多功能声学综合馆为我们带来的“膜法”。 不仅仅是建筑&#xff0c;更是艺术的…

【文末送书】【Java中的异常处理机制】提供常见的异常报错详情及其解决方案

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

【技术干货】开源库 Com.Gitusme.Net.Extensiones.Core 的使用

目录 1、项目介绍 2、为项目添加依赖 3、代码中导入命名空间 4、代码中使用 示例 1&#xff1a;string转换 示例 2&#xff1a;object转换 1、项目介绍 Com.Gitusme.Net.Extensiones.Core是一个.Net扩展库。当前最新版本1.0.4&#xff0c;提供了常见类型转换&#xff0c…

专精特新申报条件

&#xff08;一&#xff09;申报条件 申报企业须满足《山东省“专精特新”中小企业认定管理办法》&#xff08;鲁工信发〔2020〕7号&#xff09;所列条件。其中&#xff0c;企业近两年平均营业收入增速调整为不低于5%&#xff0c;其他条件不变。2018年认定的山东省“专精特新”…

Linux认证 | RHCA是什么等级的证书?考到工资能有多少?

RHCA就是红帽认证架构师&#xff0c;RHCA是红帽公司在红帽认证工程师&#xff08;RHCE&#xff09;和红帽认证技师&#xff08;RHCT&#xff09;认证推出之后又一个最新的顶级认证&#xff0c;在业界也是最受欢迎的、最成熟的linux认证。 那么RHCA是什么等级的证书&#xff1f…

asp.net上传文件

第一种方法 前端&#xff1a; <div> 单文件上传 <form enctype"multipart/form-data" method"post" action"upload.aspx"> <input type"file" name"files" /> …

Amazon EC2 安全可调用的云虚拟主机服务器

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Amazon EC2 打造全新的科技链 Amazon Elastic Compute Cloud&#xff08;Amazon EC2&#xff09;提供最广泛、最深入的计算平台&#xff0c;拥有超过 500 个实例&…

【C++ 学习 ㉝】- C++11 使用 using 定义别名

众所周知&#xff0c;在 C 中可以使用 typedef 定义类型别名&#xff0c;例如&#xff1a; typedef unsigned int u_int; typedef void(*pf)(int, int); 但它也有一些限制&#xff0c;比如&#xff0c;无法定义类模板别名。当我们需要实现一个 key_type 固定为 string&#x…

50个网络运维工作者必须知道的小知识!建议收藏!

运维人员对公司互联网业务所依赖的基础设施、基础服务、线上业务进行稳定性加强&#xff0c;进行日常巡检发现服务可能存在的隐患&#xff0c;对整体架构进行优化以屏蔽常见的运行故障&#xff0c;多数据中接入提高业务的容灾能力。 通过监控、日志分析等技术手段&#xff0c;…

服务器经常被攻击的原因

很多中小型企业都是选择虚拟主机服务器&#xff0c;是把一个服务器分成很多个给很多企业一起共用&#xff0c;可能同一个 IP服务器上就有很多个不同企业的网站&#xff0c;这个时候如果跟你同一个IP服务器的网站遭到DDoS攻击&#xff0c;就很有可能会影响到你的网站也无法正常访…

golang的panic与recover基本使用

package mainimport ("errors""fmt" )func main() {// panic会使得程序会终止//panicDemo1()//panicDemo2()//fmt.Println(panicDemo3())panicDemo5()fmt.Println("程序正常执行...") }panicDemo1函数测试 func panicDemo1() {panic("抛出…

【数据集映射】(含完整可行Python代码)Yolo格式数据(txt)转RCNN格式数据(coco)

1&#xff1a;需求背景 目标检测研究中&#xff0c;通常不同的模型需要不同的数据格式&#xff0c;如yolo需要txt、rcnn需要coco等&#xff0c;因此就需要对标注的数据格式进行转换。 通常的数据格式有txt、coco(json)、Pascal VOC、xml等。 本文的需求是txt转coco&#xff…

Java中各个版本JDK分别有哪些常见的垃圾回收算法?它们的适用场景和开启方法是什么?

Java中各个版本JDK分别有哪些常见的垃圾回收算法&#xff1f;它们的使用场景和开启方法是什么&#xff1f; 1.1 JDK 1.8 中的垃圾回收算法1.2 JDK 11 中的垃圾回收算法1.3 JDK17中的垃圾回收算法 1.1 JDK 1.8 中的垃圾回收算法 Java 8引入了一些不同类型的垃圾回收算法&#x…

nginx配置支持PHP

前言 Nginx是通过php-fpm来通信的&#xff0c;所以需要修改的监听9000端口。 当 Nginx 配置支持 PHP 时&#xff0c;它可以将 PHP 请求转发给 PHP-FPM&#xff0c;由 PHP-FPM 处理请求并返回结果。 要配置 Nginx 支持 PHP&#xff0c;你需要在 Nginx 配置文件中添加一个 locat…

如何修改CentOS登录时默认目录

查了一下&#xff0c;有说改/etc/passwd文件的&#xff0c;有说改.bashrc文件的&#xff0c;也有说改.bash_profile&#xff0c;修改的方法都不一样。 我要改的是root登录时的目录&#xff0c;最后修改了/root/.bash_profile文件&#xff0c;只要加一行cd 路径就可以。 这个文…

关于中间件技术

中间件是一种独立的系统软件或服务程序&#xff0c;可以帮助分布式应用软件在不同的技术之间共享资源。中间件可以&#xff1a; 1、负责客户机与服务器之间的连接和通信&#xff0c;以及客户机与应用层之间的高效率通信机制。 2、提供应用的负载均衡和高可用性、安全机制与管…

单片机如何写好一个模块的驱动文件

搞单片机&#xff0c;MCU:STM32/GD32/HC32&#xff0c;通讯模组&#xff1a;4G/WIFI/BT/433&#xff0c;总线&#xff1a;USB/CAN/K/232/485&#xff0c;各种常见的传感器&#xff0c;都接触过。 一开始学习单片机的时候没有形成很好的编写习惯&#xff0c;如LED点亮/熄灭/闪烁…