Vue框架Element UI教程（二）

原文：https://www.jianshu.com/p/1704b5935a8

【時間選擇器】

Element UI手冊：https://cloud.tencent.com/developer/doc/1270
中文文檔：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

---

前一篇已經安裝好了Element UI環境，現在開始來實際操作框架提供的一些組件的運用了。

在准備好以下文章里面的內容之后，可以打開test.vue文件，開始寫代碼了。Vue框架Element UI教程-安裝環境搭建（一）https://www.jianshu.com/p/ab3c34a95128

打開test.vue文件，開始寫代碼

<template> <div> <el-time-picker is-range v-model="value" range-separator="-" start-placeholder="開始時間" end-placeholder="結束時間" placeholder="選擇時間范圍"> </el-time-picker> </div> </template> <script> export default { data() { return { value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], }; } } </script> 

npm run dev 運行，瀏覽器顯示如下,實現了一個簡單的時間選擇器

 

 

---

出現和隱藏動畫

Vue框架Element UI教程-安裝環境搭建（一）https://www.jianshu.com/p/ab3c34a95128

今天繼續寫組件的運用相關例子
點擊按鈕的時候，元素會呈現一個出現和隱藏的動畫功能。

<template> <div> <el-button @click="show = !show">點擊按鈕</el-button> <div style="display: flex; margin-top: 20px; height: 100px;"> <transition name="el-fade-in-linear"> <div v-show="show" class="transition-box">我會消失在人海之中</div> </transition> </div> </div> </template> <script> export default { data: () => ({ show: true }) } </script> <style> .transition-box { margin-bottom: 10px; width: 300px; height: 100px; border-radius: 4px; background-color: #42B983; text-align: center; color: #fff; padding: 40px 20px; box-sizing: border-box; margin-left: 520px; } </style> 

效果大家可以自行嘗試。

 

 

---

左側導航欄

Vue框架Element UI教程-安裝環境搭建（一）https://www.jianshu.com/p/ab3c34a95128

在用Element UI框架的時候

<template> <div> <el-row class="tac"> <el-col :span="4"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-s-platform"></i> <span>服務大廳</span> </template> <el-menu-item-group> <el-menu-item index="1-1">在場服務</el-menu-item> <el-menu-item index="1-2">歷史服務</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-s-tools"></i> <span>系統設置</span> </template> <el-menu-item-group> <el-menu-item index="1-1">權限管理</el-menu-item> <el-menu-item index="1-2">角色管理</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-user-solid"></i> <span>人員數據</span> </template> <el-menu-item-group> <el-menu-item index="1-1">人員數量</el-menu-item> <el-menu-item index="1-2">人員位置</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="4"> <template slot="title"> <i class="el-icon-message-solid"></i> <span>健康報警</span> </template> <el-menu-item-group> <el-menu-item index="1-1">心率報警</el-menu-item> <el-menu-item index="1-2">血壓報警</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-col> </el-row> </div> </template> <script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script> 

導航菜單效果如下所示

 

 

---

導航欄跳轉路由

1：components
新建頁面

 

 

2：打開app.vue
寫代碼

<template> <div> <el-col :span="2"> <el-menu :default-active="this.$route.path" router mode="horizontal" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name"> <template slot="title"> <i class="el-icon-s-platform"></i> <span> {{ item.navItem }}</span> </template> </el-menu-item> </el-menu> </el-col> <router-view class="menu-right"/> </div> </template> <script> export default { data() { return { navList:[ {name:'/components/ServiceHall',navItem:'服務大廳'}, {name:'/components/Management',navItem:'權限管理'}, {name:'/components/User',navItem:'用戶管理'}, {name:'/components/Personnel',navItem:'人員數據'}, {name:'/components/Alarm',navItem:'報警中心'}, ] } }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script> <style> .menu-right{ margin-left:200px; } </style> 

 

 

3:路由index.js

 

 

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import ServiceHall from '@/components/ServiceHall' import Management from '@/components/Management' import User from '@/components/User' import Personnel from '@/components/Personnel' import Alarm from '@/components/Alarm' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/components/ServiceHall', name: 'ServiceHall', component: ServiceHall }, { path: '/components/Management', name: 'Management', component: Management }, { path: '/components/User', name: 'User', component: User },{ path: '/components/Personnel', name: 'Personnel', component: Personnel },{ path: '/components/Alarm', name: 'Alarm', component: Alarm } ] }) 

4：新頁面的內容,我寫的比較簡單，需要自己寫下功能需求所在的代碼

<template> <div> 我是權限管理頁面 </div> </template> <script> </script> <style> </style> 

5：效果就可以看了

 

 

---

axios請求數據

1：進入項目，npm安裝

   npm install axios --save

 

 

2.在main.js下引用axios

  import axios from 'axios' 

 

 

3:准備json數據
自己寫了一個json數據，放在服務器上，現在要通過vue項目調用數據
http://www.intmote.com/test.json

4：跨域問題，設置代理，利用proxyTable屬性實現跨域請求
在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代碼

   proxyTable: { '/api': { target: 'http://www.intmote.com',//設置你調用的接口域名和端口號 別忘了加http changeOrigin: true,//允許跨域 pathRewrite: { '^/api': '' //這個是定義要訪問的路徑，名字隨便寫 } } }, 

 

 

5:打開一個界面User.vue，開始寫請求數據的方法

 methods: { getData() { axios.get('/api/test.json').then(response => { console.log(response.data); }, response => { console.log("error"); }); } } 

 

 

User.vue參考代碼：

<template> <div id="app"> </div> </template> <script> import axios from "axios"; export default { name: "app", data() { return { itemList: [] } }, mounted() { this.getData(); }, methods: { getData() { axios.get('/api/test.json').then(response => { console.log(response.data); }, response => { console.log("error"); }); } } } </script> 

6：再次運行
npm run dev

這個時候，我們可以看見，請求的數據

 

 

---

Mock的使用

1：在項目里面新建一個mock文件夾，在mock文件夾里面新建一個test.json文件

 

 

test.json:

{ "first":[ {"name":"520","nick":"我愛你"}, {"name":"521","nick":"我願意"}, {"name":"1314","nick":"一生一世"} ] } 

2:在build目錄下找到webpack.dev.conf.js文件，編寫以下代碼

// mock code const express = require('express') const app = express() const posts = require('../mock/test.json') const routes = express.Router() app.use('/api', routes) // 如果是post請求，那么將get改為post即可 devServer: { ... before(app){ app.get('/api/test', (req, res) => { res.json(posts) }) } } 

 

 

 

 

3:瀏覽器輸入http://localhost:8080/api/test
成功看到模擬數據

 

 

 

4:使用第三方http請求庫axios進行ajax請求,這里不會，可以從參考上一篇文章內容。

 methods: { getData() { axios.get('http://localhost:8080/api/test').then(response => { console.log(response.data); }, response => { console.log("error"); }); } } 

 

 

vue頁面代碼參考

<template> <div id="app"> </div> </template> <script> import axios from "axios"; export default { name: "app", data() { return { itemList: [] } }, mounted() { this.getData(); }, methods: { getData() { axios.get('http://localhost:8080/api/test').then(response => { console.log(response.data); }, response => { console.log("error"); }); } } } </script> 

5:在瀏覽器里面，我們可以看到，mock里面的數據請求成功顯示如下

 

 

---

原文作者：祈澈姑娘 技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚，對於博客上面有不會的問題，歡迎加入編程微刊qq群：260352626。

以上幾章代碼寫在了github上面，需要的可以參考，后續會繼續完善：https://github.com/wangxiaoting666/Element-UI

頁面渲染

寫了那么多，最終的數據都是要展示在前端的界面，才算是完成工作。
Element UI手冊：https://cloud.tencent.com/developer/doc/1270
中文文檔：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

---

其實步驟很簡單，代碼如下

<template> <div id="app"> <div v-for="item in itemList"> <span>{{item.name}}</span> <span>{{item.nick}}</span> </div> </div> </template> <script> import axios from "axios"; export default { name: "app", data() { return { itemList: [] } }, mounted() { this.getData(); }, methods: { getData() { axios.get('http://localhost:8080/api/test').then(response => { console.log(response.data); this.itemList =response.data.first; }, response => { console.log("error"); }); } } } </script> 

打開界面，既可以看到，所需要的數據一家展示在前端的界面了

 

 

---

原文作者：祈澈姑娘 技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚，對於博客上面有不會的問題，歡迎加入編程微刊qq群：260352626。

以上幾章demo代碼寫在了github上面，需要的可以參考，后續會繼續完善：https://github.com/wangxiaoting666/Element-UI

axios表格分頁

今天來寫一個分頁，表格分頁在實際項目中經常用到，之前也寫過關與bootstrap table 里面的表格分頁，道理都差不多一樣的，Element UI也有自己的組件可以用，話不多說，直接上代碼了。

Element UI手冊：https://cloud.tencent.com/developer/doc/1270
中文文檔：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

---

接着之前的項目繼續寫，打開一個vue界面，在里面寫如下代碼：

<template> <div> <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"> <el-table-column prop="id" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="price" label="地址"> </el-table-column> </el-table> <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes,prev, pager, next" :total="tableData.length" prev-text="上一頁" next-text="下一頁"> </el-pagination> </div> </div> </template> <script> import axios from "axios"; export default { name: "app", data() { return { currentPage: 1, //默認顯示頁面為1 pagesize: 5, // 每頁的數據條數 tableData: [], //需要data定義一些，tableData定義一個空數組，請求的數據都是存放這里面 } }, mounted() { this.getData(); }, methods: { getData() { axios.get('http://localhost:8080/api/test').then(response => { console.log(response.data); this.tableData = response.data; }, response => { console.log("error"); }); }, //每頁下拉顯示數據 handleSizeChange: function(size) { this.pagesize = size; /*console.log(this.pagesize) */ }, //點擊第幾頁 handleCurrentChange: function(currentPage) { this.currentPage = currentPage; /*console.log(this.currentPage) */ }, } } </script> 

test.json

 [ { "id": 0, "name": "Item 0", "price": "徐家匯" }, { "id": 1, "name": "Item 1", "price": "$1" }, { "id": 2, "name": "Item 2", "price": "$2" }, { "id": 3, "name": "Item 3", "price": "徐家匯" }, { "id": 4, "name": "Item 4", "price": "徐家匯" }, { "id": 5, "name": "Item 5", "price": "$5" }, { "id": 6, "name": "Item 6", "price": "$6" }, { "id": 7, "name": "Item 7", "price": "$7" }, { "id": 8, "name": "Item 8", "price": "徐家匯" }, { "id": 9, "name": "Item 9", "price": "$9" }, { "id": 10, "name": "Item 10", "price": "$10" }, { "id": 11, "name": "Item 11", "price": "$11" }, { "id": 12, "name": "Item 12", "price": "徐家匯" }, { "id": 13, "name": "Item 13", "price": "$13" }, { "id": 14, "name": "Item 14", "price": "$14" }, { "id": 15, "name": "Item 15", "price": "$15" }, { "id": 16, "name": "Item 16", "price": "徐家匯" }, { "id": 17, "name": "Item 17", "price": "$17" }, { "id": 18, "name": "Item 18", "price": "$18" }, { "id": 19, "name": "Item 19", "price": "徐家匯" }, { "id": 20, "name": "Item 20", "price": "$20" } ] 

效果如下

 

 

到這里就成功的實現了一個表格和分頁了，數據是用mock模擬的，實際中換成后端的接口就可以了。

---

原文作者：祈澈姑娘 技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚，對於博客上面有不會的問題，歡迎加入編程微刊qq群：260352626。

以上幾章代碼寫在了github上面，需要的可以參考，后續會繼續完善：https://github.com/wangxiaoting666/Element-UI

作者：祈澈菇涼
鏈接：https://www.jianshu.com/p/afdfbec53ded
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。