Vue框架Element UI教程（二）

其他 2020-01-21 15:20:38 阅读次数: 0

原文：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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


猜你喜欢

转载自www.cnblogs.com/rxbook/p/12221762.html
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022