你还在用古老的HTML和CSS吗？还在手敲吗？那么你是时候打开新前端的大门了————Element-UI全面详解

Posted 2021-11-06 CharmDeer

目录

• 1、Element-UI简介
• 2、Element-UI起步
• 3、Element插件和学习建议
• 4、Container布局容器
• 5、Layout布局
• 6、button按钮
• 7、Icon图标
• 8、input输入框
• 9、Form表单基础
• 10、Radio单选按钮
• 11、Checkbox复选框
• 12、Switch开关
• 13、Select选择器
• 14、Cascader级联选择器
• 15、DateTimePicker日期时间选择器
• 16、Validator表单校验
• 17、自定义校验规则
• 18、表单校验综合案例
• 19、Table表格
• 20、Pagination分页
• 21、Dialog对话框
• 22、实战一、环境准备
• 23、实战二、分页查询
• 24、实战三、添加
• 25、实战四、删除功能
• 26、实战五、更新功能
• 27、Card卡片
• 28、Breadcrumb面包屑
• 29、Steps进度条
• 30、导航菜单的基本使用
• 31、导航菜单的折叠
• 32、导航菜单的select事件
• 33、导航的路由模式
• 34、组合应用
• 35、Avatar头像
• 36、Dropdown下拉菜单
• 37、Alert警告
• 38、页头
• 39、Loading加载
• 40、Message消息提示
• 41、MessageBox弹窗
• 42、Tabs标签页
• 43、Tree树型控件的基本使用
• 44、Tree树型控件的可选择
• 45、Tree树型控件-从服务器获取数据
• 46、Tree树型控件-自定义节点内容

1、Element-UI简介

返回目录

element-ui，一套为开发者，设计师和产品经理准备的基于Vue的桌面端组件库，使用前端框架封装的代码帮助工程师快速开发
Element-UI的特点：

丰富的组件

element-ui的组件分为六大类：分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好的满足大部分PC端to B业务开发需求

成熟的生态

element-ui是国内做Vue的UI框架中最早，也最成熟的一家。用户群体多，遇到问题基本都能解决

优秀的开发文档

element-ui文档和demo是融为一体的，我们打开它的文档，可以看到文档不仅介绍了每个组件的使用方式，还展示看组件的各种示例，并且还可以清楚的看到每个示例的源码，对用户而言非常友好

自定义主题

element-ui的一大特色是支持自定义主题，你可以使用在线主题编辑器，可以修改Element所有全局和组件的Design Tokens，并可以方便地实时预览样式改变后的视觉

2、Element-UI起步

返回目录

官方推荐使用npm的方式使用element-ui，接下来我们借助vue-cli项目演示element-ui的使用

2.1、第1个Element-UI项目

1.新建vue-cli项目：
Vue CLI详解
我使用vuecli4版本
2.在项目中添加element-ui库

进入项目目录，执行安装element-ui的命令：

npm install element-ui --save

3.在main.js中配置element-ui：

//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用插件
Vue.use(ElementUI);

element-ui样式初体验：

<template>
  <div id="app">
    <hr>
      <el-button type="primary">elementUI的按钮</el-button><!--蓝色按钮-->
      <el-button type="danger">elementUI的按钮</el-button><!--红色按钮-->
      <el-date-picker type="date"></el-date-picker><!--日期-->
    <hr>
  </div>
</template>

<script>
  export default {
    name:'App'
  }
</script>

<style>

</style>

运行测试：npm run serve

3、Element插件和学习建议

返回目录

打开WebStorm的设置，搜索并下载element插件

点击install下载安装，重启

该插件为我们提供了默认补全功能

element-ui的学习建议

掌握核心的组件

不同的element-ui组件封装不同的UI效果，element-ui有60多个组件，常用的组件并不多，抓住关键的常用组件即可

掌握典型语法

element-ui的组件功能都比较强大，也就有了大量的配置属性，很多属性并不常用，在掌握组件时，通过典型用法，掌握关键属性即可

大胆试错，多查官方文档

学习任何新的知识都不要怕错，多做多尝试，在错误中学习掌握知识，官方示例非常全面，在遇到问题时，可以阅读官方文档，对照文档示例挑错

熟能生巧，巧能生精

世上无难事只怕有心人，多敲多练，哪个不熟就针对性练习哪个，无需死记硬背，练多了自然就掌握了

4、Container布局容器

返回目录

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

<el-container>:外层容器
<el-header>:顶栏容器
<el-aside>:侧边栏容器
<el-main>:主要区域容器
<el-footer>:底栏容器

常见的页面布局

代码体验展示：
在view包下建立Home.vue组件:

<template>
  <div id="app">
    <router-link to="/Home">按钮</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name:'App',
  }
</script>

<style>

</style>

路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const Home = () => import("../views/Home.vue")

const routes = [
  {
    path: '/Home',
    name: 'Home',
    component:Home,
  },
]

const router = new VueRouter({
  routes,
  mode:'history'
})

export default router

App.vue:

运行测试：

调样式：点加标签名即可

运行：

加入aside使其并列排序：（因为容器是单行排列的，所以我们要借助el-container）


总结：

• el-container内有el-header或者el-footer子元素，全部子元素呈垂直排列
• 需要水平左右排列时，需要再定义el-container包含水平左右排列的子元素

为了方便演示，我们给路由添加默认路径：

5、Layout布局

返回目录

布局可以快速的将一块区域，分成多列，每列最多可以分成基础的24分栏，迅速简便地创建布局

5.1、基础布局

通过row和col组件，并通过col组件的span属性我们就可以自由地组合布局

Layout.vue:

<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row :gutter="10">
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
    </div>
</template>

<script>
  export default {
    name: "Layout"
  }
</script>

<style scoped>
    .el-row{
        margin-bottom: 20px;
    &:last-child{
         margin-bottom: 0;
     }
    }
    .el-col{
        border-radius: 4px;
    }
    .bg-purple-dark{
        background-color: #99a9bf;
    }
    .bg-purple{
        background-color: #d3dce6;
    }
    .bg-purple-light{
        background-color: #e5e9f2;
    }
    .grid-content{
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg{
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>

路由注册：

上面的可以直接通过地址访问：

设置路由本页访问：将/Layout设置为/Home的子路径：

在Home.vue中设置展出按钮和展出位置：

运行测试：

5.2、分栏间隔：

row组件提供gutter属性来指定每一栏之间的间隔：

5.3、分栏偏移：

通过制定col组件的offset属性可以指定分栏位置向右偏移的栏数

组件之间不会挤压

5.4、对齐方式：

将row组件type属性赋值为flex，可以启用flex布局，并可通过justify属性来指定start，center，end，space-between，space-around其中的值来定义子元素的排版方式

6、button按钮

返回目录

element-ui提供了常用的操作按钮组件：el-button

6.1、基础用法

通过type属性定义按钮的风格

Button.vue：

<template>
    <div>
        <el-row :gutter="10">
            <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>
    </div>
</template>

<script>
  export default {
    name: "Button"
  }
</script>

<style scoped>

</style>

路由配置：

App.vue:

运行测试：

路由显示使用方法后续不再展示（不懂的请订阅我的Vue专栏学习，或者直接看：Vuejs第五篇（vue-router路由和tabbar））

路由展示的
数据组件分离式写法：


去掉li的样式代码自己写
运行：

6.2、按钮样式：

通过plain、round、circle和disabled属性来定义Button的样式

<template>
    <div>
        <el-row :gutter="10">
            <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 :gutter="10">
            <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>危险按钮Python日志模块之你还在用PRINT打印日志吗

 Python日志模块之你还在用PRINT打印日志吗
 五年了，你还在用junit4吗？
 调试接口你还在用postman吗
 数组: 你还在用暴力法解 两数之和 吗? 力扣1
 你还在用迭代器处理集合吗？试试Stream，真香！