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

原文地址：https://www.cnblogs.com/rxbook/p/12221762.html

时间： 2024-08-10 06:31:50

Vue框架Element UI教程（二）的相关文章

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid

net MVC +Vue.js+Element UI 笔记

最近项目需求要用到Vue 与 Element UI.但是又不想用Node.js.就结合了Net.MVC来做项目开发.故而做个笔记来记录一些遇到的问题和处理思路 用到MVC主要考虑是到 对 Node.js 不是特别了解.不想给自己埋坑. 而且基于MVC的话,能用到MVC的服务器端渲染,Session,验证,路由机制等等还是非常和嗨皮的. 然而集合MVC的话,比较烦的是在做可复用Component和JS文件的封装上没Node.js那么方便. Note:不得不吐槽,Vue.js简直和Flash Fle

关于vue和element ui的国际化

因为公司需求近日一直在做国际化处理, 首先,我们用的是vue的单文件组件,实现国际化是在写好的一个文件组件里面vue_min.js里,而且它相当于一个js的模块,在每一个单文件的组件里面使用. 遇见的第一个问题国际化失败,只显示自己定义的json文件国际化.而且element ui的的国际化不显示, 解决的方案就是, 1.引入的时候应该从新引入 import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'e

vue开源Element UI表单设计及代码生成器

在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库   https://github.com/JakHuang/form-generator 码云仓库  https://gitee.com/mrhj/form-generator 演示地址 https://mrhj.gitee

vue 集成 element ui

打开vue项目所在的项目路径 输入 npm install element-ui -S 安装element ui 表示安装成功 在vue项目下的node_modules下会显示 element ui 配置element ui 改变项目目录中的main.js文件: 初始main.js文件: import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-u

Spring+SpringMvc+Mybatis框架集成搭建教程二(依赖配置及框架整合)

依赖导入以及框架整合 (1).打开项目的pom.xml文件,声明依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_

Vue 添加element UI

根据文档.按需加载模块需要配置(若不是按需加载则不用改这个文件) .babelrc文件; er vue-cli预先生成的文件内容是: { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <=

vue 修改element ui 的默认样式

应该还能针对其他的奇葩样式修改的 比如:mint-ui,vux 应该都适用 1.在样式  后加 !important ,例如:width: 178px !important; 2.<style scope>  </style> 中的scope去掉 3.vue有一个默认的<style scope>  </style>标签,这是后重新新建一个<style>  </style>的标签.区分开来,就是使用两个<style>  &l

vue基于 element ui 的按钮点击节流

vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几个场景,对 element-ui 的按钮进行扩展 节流 主要使用到了 vue的 $listeners 和 $attrs $listeners:子组件里面,获取父组件对子组件 v-on 的所有监听事件 $attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和