Element-ui学习使用
这是我使用Element-ui的布局，排布的一个界面，本来我是使用WinfowsForm来作的一个摄像头注册以及查询的小工具，目前我关注先后端的开发，因此就想着能不能把这么个小工具，我用先后端的形式开发。发现是能够的，前端我使用Element-ui和vue,后端服务我使用.net core，这样在生产车间部署起来也很快，将启动这个工具使用批处理命令组合起来，启动服务，随后使用浏览器打开指定的访问地址就能够了。也很方便，并且这个界面能够作的很炫酷，有大量的UI样式可供修改，瞬间高大上。 如下是我界面前端界面排布部分示例。css
<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>
相关文章
- 1. （vuejs学习）二、使用ElementUI（*）
- 2. ElementUi学习笔记
- 3. Vue.js 使用 ElementUI
- 4. ElementUi 的使用
- 5. elementui的使用
- 6. elementUi的使用
- 7. elementUI的form表单学习
- 8. elementUI学习笔记（一）
- 9. Vue+ElementUI学习总结
- 10. 【学习】reactjs（一）——使用npm建立react项目并整合elementUI
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • 适用于PHP初学者的学习线路和建议
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
