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學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
