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. 卸载完 ...
随机推荐
- 如何证明CRM WebClient UI上的应用是有状态(Stateful)的
随便找一个在CRM WebClient UI里会被频繁调用到的函数,在函数里创建一个隐式增强,打印当前的会话ID. 不关闭浏览器,在浏览器里不断做操作,可以观察到不管做任何操作,每次断点出发后,打印出 ...
- hdu1215 七夕节---因子和
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1215 题目大意: 求N的因子和(不包括N本身) 解题思路: 模板传送门 #include<io ...
- HDU 5723 最小生成树上的期望
题意:求最小生成树,和任意两个点之间距离的期望 官方题解: 最后求两遍点的积的时候,还是要判断父子关系. 注意 long long #include <bits/stdc++.h> usi ...
- 什么是React中的组件
组件就是页面上的一部分.如图,左边是一个网页.右边是对应的一个组件图.我们可以把一个大的网页拆分成很多小的部分.比如标题部分,对应一个组件,就是标题组件.搜索部分,对应的组件就是搜索组件.而这个搜索组 ...
- DEM、DTM和DSM的区别
一.DTM(Digital Terrain Model) 数字地面模型是利用一个任意坐标系中大量选择的已知x.y.z的坐标点对连续地面的一个简单的统计表示,或者说,DTM就是地形表面形态属性信息的数字 ...
- 【遥感专题系列】微波遥感（二、合成孔径雷达SAR基础）
目前使用最广的成像雷达系统就是合成孔径雷达(Synthetic Aperture Radar:SAR),SAR几乎成为了雷达的代名词.本文从应用角度介绍SAR系统的基本知识. 本文主要包括: SAR基 ...
- FastJSON、Gson、Jackson（简单了解使用）
下载地址(maven) Jackson:http://mvnrepository.com/search?q=jackson FastJson:http://mvnrepository.com/sear ...
- Java并发程序基础
Thread.stop() 直接终止线程,并且会立即释放这个线程所持有的锁. Thread.interrupt() 并不会是线程立即退出,而是给线程发送一个通知,告知目标线程,有人希望你退出啦,至于目 ...
- Sublime Text Build 3065 License key
Sublime Text Build 3065 License key 复制如下三个任意一个正版注册码即可 —– BEGIN LICENSE —– Andrew Weber Single User ...
- 小白袍 -- Chapter 1.1 避不开的编解码
1.1 避不开的编解码 能阅读本文的想开都是从事计算机开发工作的,那么弱弱的问自己一下,有没有受到过编码的纠缠呢?有没有动过心思,如果没有编码该多好? 1.1.1 这个翻译你得捏着鼻子用 要想说明 ...