Element-ui学习使用
这是我使用Element-ui的布局，排布的一个界面，原本我是使用WinfowsForm来做的一个摄像头注册以及查询的小工具，目前我关注前后端的开发，所以就想着能不能把这么个小工具，我用前后端的形式开发。发现是可以的，前端我使用Element-ui和vue,后端服务我使用.net core，这样在生产车间部署起来也很快，将启动这个工具使用批处理命令组合起来，启动服务，随后使用浏览器打开指定的访问地址就可以了。也很方便，而且这个界面可以做的很炫酷，有大量的UI样式可供修改，瞬间高大上。 以下是我界面前端界面排布部分示例。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<el-container>
<el-header style="background: grey; text-align: center; vertical-align: auto;" height="80px">
<h2>摄像头数据查询</h2>
</el-header>
<el-container>
<el-aside width="260px" >
<div>
<fieldset style="border-color: #E2ded6;border-width: 4px;border-style: solid;">
<legend style="color:#333333;font-size: 0.8em;font-weight: bold;">
<span>第一种方式：按时间区间查询</span>
</legend>
<el-row>
<el-col :span="2">
<el-tag type="success">起始时间：</el-tag>
</el-col>
</el-row>
<el-row>
<el-col>
<div>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row>
<el-tag type="success">终止时间：</el-tag>
</el-row>
<el-row>
<el-col>
<div>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-button style="width: 220px;" type="primary">立即查询</el-button>
</el-col>
</el-row>
</fieldset>
</div>
<div>
<fieldset style="border-color: #E2ded6;border-width: 4px;border-style: solid;">
<legend style="color:#333333;font-size: 0.8em;font-weight: bold;">
<span>第二种方式:按序列号查询</span>
</legend>
<el-row>
<el-col>
<span>序列号：</span>
</el-col>
</el-row>
<el-row>
<el-col>
<el-input style="width: 220px;"></el-input>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button style="width: 220px;" type="primary">立即查询</el-button>
</el-col>
</el-row>
</fieldset>
</div>
<div>
<fieldset style="border-color: #E2ded6;border-width: 4px;border-style: solid;">
<legend style="color:#333333;font-size: 0.8em;font-weight: bold;">
<span>第三种方式：多序列号查询</span>
</legend>
<el-row>
<el-col>
<span>文件路径：</span>
</el-col>
</el-row>
<el-row>
<el-col>
<el-upload
:file-list="fileList"
:limit="3"
action=“”
>
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
</el-col>
</el-row>
<el-row>
<el-col>
<el-input style="width: 220px;"></el-input>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button style="width: 220px" type="primary">选择</el-button>
</el-col>
</el-row>
</fieldset>
</div>
<div>
<fieldset style="border-color: #E2ded6;border-width: 4px;border-style: solid;">
<legend style="color:#333333;font-size: 0.8em;font-weight: bold;">
<span>第四种方式：日报表</span>
</legend>
<el-row>
<el-col>
<div class="block">
<span class="demonstration">选择日期</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button style="width: 220px;" @click="dialogTableVisible=true" type="primary">立即查询</el-button>
</el-col>
</el-row>
</fieldset>
<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>
</div>
</el-aside>
<el-main>
<div>
<el-table height="627px"
:data="tableData3"
height="250"
border
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>
</div>
</el-main>
</el-container>
<el-footer height="50px" style="text-align: center; background-color: gray;">
<h3>时间：{{dateTime}}</span>
</el-footer>
</el-container>
</div>
<script>
var app = new Vue({
el: "#app",
created:function(){
//this.curTime();
},
data: {
fileList: [],
dialogTableVisible: false,
dateTime: '',
value1: '',
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
,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 弄'
}],
},
methods: {
curTime: function(){
var date = new Date();
this.dateTime = date.toString();
setInterval(this.curTime, 1000);
},
}
})
</script>
</body>
</html>
Element-ui学习使用的更多相关文章
- .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记
1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...
- element ui Angular学习笔记（一）
1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入El ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 2021新年 Vue3.0 + Element UI 尝鲜小记
2021年,又是新的一年,Vue 已经发布 3.0 版本,最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本,是时候开始学习一下这两个新技术. 本文主要记录了使用 Vu ...
- Element ui结合springboot的简单实战
Eelment UI简单实战 前端开发 1 创建项目,导入element ui(略) 2 大致设计出想要的效果,如下 3 创建包 根据设计的大致模样在项目的components中创建对应的包,方便以后 ...
- IOS开发－UI学习－sqlite数据库的操作
IOS开发-UI学习-sqlite数据库的操作 sqlite是一个轻量级的数据库,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了,而且它的处理速度比Mysql.PostgreSQL这 ...
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
随机推荐
- js事件学习的小demo
直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- vue-cli项目接口地址可配置化（多环境部署）一处修改多处适用
本文档目的在于帮助对vue了解比较少的同学,能够快速配置vue应用中的接口地址.方便项目切换服务环境后,重新修改多组件的http请求地址. 一.前言 我们在上一篇文章分享了vue-cli项目基本搭建( ...
- java基础重点： 面向对象，
java分了5片内存. 1:寄存器.2:本地方法区.3:方法区.4:栈.5:堆. 栈:存储的都是局部变量 ( 函数中定义的变量,函数上的参数,语句中的变量 ):只要数据运算完成所在的区域结束,该数据就 ...
- hack-checkbox
checkbox选择按钮要用我们自己的样式,看到这个的时候,很可能会以为需要checkbox才能实现,用css可能很难.其实狠简单. <style> .checkbox input{ di ...
- PHP设计模式——装饰器模式
<?php /** * 装饰器模式 * 如果已有对象的部分内容或功能发生变化,但是不需要修改原始对象的结构,应使用装饰器模式 * * 为了在不修改对象结构的前提下对现有对象的内容或功能稍加修改, ...
- labelme也可以标注polygan
https://blog.csdn.net/wc781708249/article/details/79595174 按照这个安装就可以了 sudo apt-get install python-qt ...
- 将psd格式批量转换成jpg或png格式（C#自制软件）
此项目基于.net framework 4.0 将psd格式批量转换成jpg或png格式. 链接:https://pan.baidu.com/s/16IEjX0sHaY9H3Ah7mv6IPQ 提取码 ...
- 【题解】洛谷P1463 [POI2002][HAOI2007] 反素数（约数个数公式+搜索）
洛谷P1463:https://www.luogu.org/problemnew/show/P1463 思路 约数个数公式 ai为质因数分解的质数的指数 定理: 设m=2a1*3a2*...*pak ...
- 自己做的HTML
<html> <body background="http://img1.imgtn.bdimg.com/it/u=821335874,2927998559&fm= ...
- Vue nodejs商城项目-登录模块
一.登录功能 后端server/routes/users.js var User = require('./../models/users.js'); // 二级路由 // 登录接口 router ...