Element-UI-快速入门(极简教程)_single_dog_yang_tao的博客-程序员宅基地

技术标签: JavaWeb学习笔记  

4. ElementUI

4.1 ElementUI介绍

ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官网地址:http://element-cn.eleme.io/#/zh-CN

传智健康项目后台系统就是使用ElementUI来构建页面,在页面上引入 js 和 css 文件即可开始使用,如下:

<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

4.2 常用组件

4.2.1 Container 布局容器

用于布局的容器组件,方便快速搭建页面的基本结构:

<el-container>:外层容器。当子元素中包含 <el-header><el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列

<el-header>:顶栏容器

<el-aside>:侧边栏容器

<el-main>:主要区域容器

<el-footer>:底栏容器

<body>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <style>
    .el-header, .el-footer {
     
      background-color: #B3C0D1;
      color: #333;
      text-align: left;
      line-height: 60px;
    }

    .el-aside {
     
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
     
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 590px;
    }
  </style>
</body>
<script>
  new Vue({
     
    el:'#app'
  });
</script>

4.2.2 Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

<el-dropdown split-button size="small" trigger="click">
  个人中心
  <el-dropdown-menu>
    <el-dropdown-item >退出系统</el-dropdown-item>
    <el-dropdown-item divided>修改密码</el-dropdown-item>
    <el-dropdown-item divided>联系管理员</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

4.2.3 NavMenu 导航菜单

为网站提供导航功能的菜单。

<el-menu>
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item>选项1</el-menu-item>
    <el-menu-item>选项2</el-menu-item>
    <el-menu-item>选项3</el-menu-item>
  </el-submenu>
  <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </template>
    <el-menu-item>选项1</el-menu-item>
    <el-menu-item>选项2</el-menu-item>
    <el-menu-item>选项3</el-menu-item>
  </el-submenu>
</el-menu>

4.2.4 Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

<el-table :data="tableData" stripe>
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
  <el-table-column label="操作" align="center">
    <!--
		slot-scope:作用域插槽,可以获取表格数据
    	scope:代表表格数据,可以通过scope.row来获取表格当前行数据,scope不是固定写法
    -->
    <template slot-scope="scope">
      <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
      <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
<script>
  new Vue({
     
    el:'#app',
    data:{
     
      tableData: [{
     
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
     
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
     
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    },
    methods:{
     
      handleUpdate(row){
     
        alert(row.date);
      },
      handleDelete(row){
     
        alert(row.date);
      }
    }
  });
</script>

4.2.5 Pagination 分页

当数据量过多时,使用分页分解数据。

<!--
	current-change:内置的事件,当前页码改变时会触发,可以获取到改变之后的页码
-->
<el-pagination
               @current-change="handleCurrentChange"
               current-page="5"
               page-size="10"
               layout="total, prev, pager, next, jumper"
               :total="305">
</el-pagination>
<script>
  new Vue({
     
    el:'#app',
    methods:{
     
      handleCurrentChange(page){
     
        alert(page);
      }
    }
  });
</script>

4.2.6 Message 消息提示

常用于主动操作后的反馈提示。

<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
<script>
  new Vue({
     
    el: '#app',
    methods: {
     
      open1() {
     
        this.$message('这是一条消息提示');
      },
      open2() {
     
        this.$message({
     
          message: '恭喜你,这是一条成功消息',
          type: 'success'
        });
      },
      open3() {
     
        this.$message({
     
          message: '警告哦,这是一条警告消息',
          type: 'warning'
        });
      },
      open4() {
     
        this.$message.error('错了哦,这是一条错误消息');
      }
    }
  })
</script>

4.2.7 Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

<h3>基础的、简洁的标签页</h3>
<!--
	通过value属性来指定当前选中的标签页
-->
<el-tabs value="first">
  <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<h3>选项卡样式的标签页</h3>
<el-tabs value="first" type="card">
  <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<h3>卡片化的标签页</h3>
<el-tabs value="first" type="border-card">
  <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<script>
  new Vue({
     
    el: '#app'
  })
</script>

4.2.8 Form 表单

由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

<!--
	rules:表单验证规则
-->
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <!--
  	prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的
  -->
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
  </el-form-item>
</el-form>
<script>
  new Vue({
     
    el: '#app',
    data:{
     
      form: {
     
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      //定义校验规则
      rules: {
     
        name: [
          {
      required: true, message: '请输入活动名称', trigger: 'blur' },
          {
      min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          {
      required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    },
    methods:{
     
      onSubmit() {
     
        console.log(this.form);
        //validate:对整个表单进行校验的方法,参数为一个回调函数。
        //该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。
        this.$refs['form'].validate((valid) => {
     
          if (valid) {
     
            alert('submit!');
          } else {
     
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  })
</script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33820545/article/details/108529789

智能推荐

如何查看自己oracle版本,如何查看oracle数据库的版本_鲸晚好梦的博客-程序员宅基地

有时候我们需要知道所使用oracle的版本是什么,这时候我们要用select * from v$version;BANNEROracle Database 11g Enterprise Edition Release 11.2.0.3.0 - 64bit ProductionPL/SQL Release 11.2.0.3.0 - Production"CORE11.2.0.3.0Productio...

已解决且已修复:StreetPass停止在Nintendo 3DS XL上运行_cunfusq0176的博客-程序员宅基地

Yes, this is kind of a silly blog post but it's been bugging me for months so I wanted to get it out there in case it helps someone who is googling for the answer! 是的,这是一个愚蠢的博客文章,但是几个月来一直困扰着我,所以我想把它发布...

小白上楼梯(递归)_周杰伦今天喝奶茶了吗的博客-程序员宅基地

小白上楼梯 楼梯有n阶一次可以上1阶或者2阶或者3阶 请问小白总共有多少种上楼梯的方法?import java.util.Scanner;public class recursion1 { public static void main(String[] args) { // TODO Auto-generated method stub Scanner sc =new ...

Dubbo+Zookeeper 入门_qw84578872的博客-程序员宅基地

Dubbo概述是一款高性能的Java RPC框架。其前身是阿里巴巴公司开源的一个高性能、轻量级的开源Java RPC框架,可以和Spring框架无缝集成。什么是RPC?RPC全称为remote procedure call,即远程过程调用。比如两台服务器A和B,A服务器上部署一个应用,B服务器上部署一个应用,A服务器上的应用想调用B服务器上的应用提供的方法,由于两个应用不在一个内存空间,不能直接调用,所以需要通过网络来表达调用的语义和传达调用的数据。需要注意的是RPC并不是一个具体的技术,而是指整个

如何通过curl完成一些功能_weixin_34356310的博客-程序员宅基地

微信微博公众号、QQ公众号、地图和很多的第三方功能提供都是采用http 的API(应用程序)形式向开发人员提供的功能。如果你只希望能够做些简单的微信公众号、QQ公众号等小应用,深入学习PHP。学习到本章,你就可以完全掌握微信公众号服务端的的所需知识了千锋PHP。如何请求微信、地图等第三方API呢?这个时候就需要使用到——cURL。c...

漏洞攻击,Firefox浏览器插件,set搭建钓鱼网站,hash密码破解_开tanke的贝塔的博客-程序员宅基地_火狐浏览器渗透插件

metasploit配置使用实验步骤kali启动metasploit检测靶机是否存在ms17-010漏洞使用ms17_010 eternalblue模块对目标机进行漏洞检测,确认存在ms17-010漏洞输入以下命令最后查看被攻击的靶机IP,发现可以查出来,说明实验成功。(注意:被攻击的靶机是win7的镜像,445的端口没有打开,需要打开445的端口才能攻击成功。)2.firefox浏览器插件启...

随便推点

使用httpd虚拟主机实现不同主机名使用同一IP_weixin_33873846的博客-程序员宅基地

背景介绍传统的httpd服务只能给一个主机提供服务,有时候会有同一IP地址为多个主机名提供服务的需求,以下就来介绍具体步骤,拓扑图如下:操作步骤1.安装httpd服务后启动httpd服务,启动时会有点慢,可以根据提示看到是因为没有找到主机名解析地址2./etc/httpd/conf/httpd.conf下将本地IP地址添加进来,这样就直接使用本地地址3.在/var/www/h...

第一次接触WebSocket遇到的坑以及感受_weixin_30415801的博客-程序员宅基地

要求用.net写一个服务,然后通过webscoket实现客户端与服务端之间的通信。第一次知道.net还可以用来写服务,然后问题来了,服务是什么- -。。下面图里的就是服务,可以停止暂停和启动。我要实现websocket需要什么:1.首先得确保你的windows安装了webScoket功能,如何安装参考https://blog.csdn.net/yelin042/article...

mysql 事务执行sql_MySQL执行事务的语法与流程详解_鋾鎁的博客-程序员宅基地

摘要:MySQL 提供了多种存储引擎来支持事务。MySQL 提供了多种存储引擎来支持事务。支持事务的存储引擎有 InnoDB 和 BDB,其中,InnoDB 存储引擎事务主要通过 UNDO 日志和 REDO 日志实现,MyISAM 存储引擎不支持事务。拓展:任何一种数据库,都会拥有各种各样的日志,用来记录数据库的运行情况、日常操作、错误信息等,MySQL 也不例外。例如,当用户 root 登录到 ...

Pandas语法笔记(二)pandas基础_sunshinecxm_BJTU的博客-程序员宅基地

https://github.com/datawhalechina/joyful-pandas第二章 pandas基础In [1]: import numpy as npIn [2]: import pandas as pd在开始学习前,请保证 pandas 的版本号不低于如下所示的版本,否则请务必升级!请确认已经安装了 xlrd, xlwt, openpyxl 这三个包,其中xlrd版本不得高于 2.0.0 。In [3]: pd.__version__Out[3]: '1.2.0'

java导入excel时去除空行,使用VBA将空行复制到新工作表后删除Excel中的空行_veritascxy的博客-程序员宅基地

您可以使用 AutoFilter 方法,它将节省您在所有行中使用 For 循环的需要,并且只需将整个过滤范围复制到"Tab 2"工作表 .Code (评论内部评论)Option ExplicitSub CopyRow()Application.ScreenUpdating = FalseDim x As LongDim MaxRowList As LongDim MaxCol As LongDim...

winform控件缩写(七)印刷_盗理者的博客-程序员宅基地

winform控件缩写(七)印刷序号缩写空间名1psdPageSetupDialog2prdPrintDialog3pdcPrintDocument4prvPrintPreviewControl5ppdPrintPreviewDialog

推荐文章

热门文章

相关标签