• ElementUI入门到入土

    1.简介

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

    在这里插入图片描述
    注意ElementUI是基于VUE2.0版本的，所以在页面引入的时候通常也要引入VUE.JS

    2.快速入门

    
<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>

    • 1
    • 2
    • 3
    • 4
    • 5

    目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

    Hello world

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUItitle>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">script>
    
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>

<body>
    <div id="app">
        <el-button @click="visible = true">Buttonel-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Elementp>
        el-dialog>
    div>


    <script>

        new Vue({
            el: '#app',
            data: function () {
                return { visible: false }
            }
        }) 
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    3.常用组件

    进入开头超链接 官方网站
    在这里插入图片描述

    在这里插入图片描述

    3.1 Container 布局容器

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

    ：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

    ：顶栏容器。

    ：侧边栏容器。

    ：主要区域容器。

    ：底栏容器。

    以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， 的子元素只能是后四者，后四者的父元素也只能是 。

    <div id="app">
    <el-container>
      <el-header>Headerel-header>
      <el-container>
        <el-aside width="200px">Asideel-aside>
        <el-container>
          <el-main>Mainel-main>
          <el-footer>Footerel-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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    3.2 button按钮

    <body>
    <div id="app">
        <el-row>
            <el-button>默认按钮el-button>
            <el-button type="primary">主要按钮el-button>
            <el-button type="success">成功按钮el-button>
            <el-button type="info">信息按钮el-button>
            <el-button type="warning">警告按钮el-button>
            <el-button type="danger">危险按钮el-button>
          el-row>
          
          <el-row>
            <el-button plain>朴素按钮el-button>
            <el-button type="primary" plain>主要按钮el-button>
            <el-button type="success" plain>成功按钮el-button>
            <el-button type="info" plain>信息按钮el-button>
            <el-button type="warning" plain>警告按钮el-button>
            <el-button type="danger" plain>危险按钮el-button>
          el-row>
          
          <el-row>
            <el-button round>圆角按钮el-button>
            <el-button type="primary" round>主要按钮el-button>
            <el-button type="success" round>成功按钮el-button>
            <el-button type="info" round>信息按钮el-button>
            <el-button type="warning" round>警告按钮el-button>
            <el-button type="danger" round>危险按钮el-button>
          el-row>
          
          <el-row>
            <el-button icon="el-icon-search" circle>el-button>
            <el-button type="primary" icon="el-icon-edit" circle>el-button>
            <el-button type="success" icon="el-icon-check" circle>el-button>
            <el-button type="info" icon="el-icon-message" circle>el-button>
            <el-button type="warning" icon="el-icon-star-off" circle>el-button>
            <el-button type="danger" icon="el-icon-delete" circle>el-button>
          el-row>
    div>


    <script>
        new Vue({
            el: '#app',
            data: {
            },
            methods: {
                
            }
        }) 
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    3.3 Dropdown 下拉菜单

        <div id="app">
        <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>
    div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    3.4 NavMenu 导航菜单

        <div id="app">
        <el-menu>
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location">i>
                    <span slot="title">导航一span>
                template>
                <el-menu-item>选项1el-menu-item>
                <el-menu-item>选项2el-menu-item>
                <el-menu-item>选项3el-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>选项1el-menu-item>
                <el-menu-item>选项2el-menu-item>
                <el-menu-item>选项3el-menu-item>
            el-submenu>
        el-menu>
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台template>
                <el-menu-item index="2-1">选项1el-menu-item>
                <el-menu-item index="2-2">选项2el-menu-item>
                <el-menu-item index="2-3">选项3el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">选项4template>
                    <el-menu-item index="2-4-1">选项1el-menu-item>
                    <el-menu-item index="2-4-2">选项2el-menu-item>
                    <el-menu-item index="2-4-3">选项3el-menu-item>
                el-submenu>
            el-submenu>
            <el-menu-item index="3" disabled>消息中心el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理a>el-menu-item>
    div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    3.5 Table 表格+ Pagination 分页

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUItitle>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">script>
    
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>

<body>
    <div id="app">
        <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">
                
                <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>
        <el-pagination @current-change="handleCurrentChange" current-page="5" page-size="10"
            layout="total, prev, pager, next, jumper" :total="305">
        el-pagination>
    div>


    <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);
                },
                handleCurrentChange(page) {
                    alert(page);
                } 
            }
        }) 
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    3.6 Message 消息提示

    <body>
    <div id="app">
        <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>
    div>


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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    3.7 Message Box 弹框

    <body>
    <div id="app">
        <el-button  type="danger"  @click="open">删除el-button>
    div>


    <script>
        new Vue({
            el: '#app',
            data: {
            },
            methods: {
                open() {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            }
        }) 
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    3.8 Form 表单

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUItitle>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">script>
    
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>

<body>
    <div id="app">
        
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            
            <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>
    div>


    <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>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
  • 相关阅读:
    ElementUI实现在下拉列表里面进行搜索
    通讯网关软件014——利用CommGate X2HTTP实现HTTP访问OPC Server
    面试题：什么是this.$nextTick
    SIEM（安全信息和事件管理）解决方案
    Kubernetes:kube-apiserver 和 etcd 的交互
    log4js node日志插件
    创建域名的步骤
    【PyTorch 攻略】（6-7/7）
    低代码平台选型，你一定要知道以下5点
    浅谈消防设备电源监控系统在高层民用建筑内的应用
  • 原文地址：https://blog.csdn.net/weixin_44480609/article/details/125620909