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

CharmDeer

已于 2022-01-20 09:30:00 修改

阅读量6.2k

点赞数 66

分类专栏： Vuejs学习文章标签： vue.js html node.js

于 2021-10-16 18:02:50 首次发布

本文链接：https://blog.csdn.net/m0_57249797/article/details/120799290

版权

Vuejs学习专栏收录该内容

21 篇文章 9 订阅

订阅专栏

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、自定义校验规则

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>危险按钮</el-button>
        </el-row>
        <el-row :gutter="10">
            <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 :gutter="10">
            <el-button circle>大圆角按钮</el-button>
            <el-button type="primary" circle>主要按钮</el-button>
            <el-button type="success" circle>成功按钮</el-button>
            <el-button type="info" circle>信息按钮</el-button>
            <el-button type="warning" circle>警告按钮</el-button>
            <el-button type="danger" circle>危险按钮</el-button>
        </el-row>
        <el-row :gutter="10">
            <el-button disabled>禁用按钮</el-button>
            <el-button type="primary" disabled>主要按钮</el-button>
            <el-button type="success" disabled>成功按钮</el-button>
            <el-button type="info" disabled>信息按钮</el-button>
            <el-button type="warning" disabled>警告按钮</el-button>
            <el-button type="danger" disabled>危险按钮</el-button>
        </el-row>
    </div>
</template>

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

<style scoped>

</style>

运行：
在这里插入图片描述

6.3、按钮尺寸

Button组件提供除了默认值以外，还有3种额外的尺寸：medium、small、mini，通过设置size属性来配置它们，可以在不同场景下选择合适的按钮尺寸

		<el-row>
            <el-button>默认按钮</el-button>
            <el-button size="medium">中等按钮</el-button>
            <el-button size="small">小型按钮</el-button>
            <el-button size="mini">超小按钮</el-button>
        </el-row>

在这里插入图片描述

6.4、按钮组

使用<el-button-group>标签来嵌套按钮，可以构建关系更加紧密的一组按钮

<el-button-group>
            <el-button type="primary">编辑</el-button>
            <el-button type="primary">分享</el-button>
            <el-button type="primary">删除</el-button>
        </el-button-group>

在这里插入图片描述

		<el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
          <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>

在这里插入图片描述

7、Icon图标

返回目录

element-ui提供了一套常用的图标集合

7.1、使用方法

为i标签直接设置class为el-icon-iconName的属性来使用图标。例如
Icon.vue

	<div>
        <i class="el-icon-delete"></i>
        <i class="el-icon-edit"></i>
        <i class="el-icon-share"></i>
    </div>

在这里插入图片描述
更多的图标可以查看官网

class设置为对应值即可（建议写icon属性）

8、input输入框

返回目录

input输入框组件必须使用v-model与数据绑定，并且它总是会显示Vue的绑定值

8.1、type=text输入框

使用clearable属性即可得到一个可清空的输入框

	<el-row :gutter="10">
     <el-input v-model="username" placeholder="请输入信息" type="text" clearable></el-input>
    </el-row>

在这里插入图片描述
必须绑定一个值：

可清空的意思是：

8.2、密码框

使用show-password属性即可得到一个可切换显示隐藏的密码框

<el-input v-model="password" placeholder="请输入密码" type="password" clearable show-password></el-input>

在这里插入图片描述

8.3、type=textarea文本域

通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整，并且autosize还可以设定为一个对象，指定最小行数和最大行数，对于类型为text或textarea的输入框，可使用maxlength属性限制最大输入长度，还可通过设置show-word-limit属性来展示字数统计

	<el-row :gutter="10">
        <el-input v-model="description" type="textarea" :autosize="{minRows:2,maxRows:4}" maxlength="200" show-word-limit></el-input>
    </el-row>

在这里插入图片描述

8.4、尺寸

可通过size属性指定输入框的尺寸，除了默认的大小外，还提供了large、small和mini三种尺寸

	<el-row :gutter="10">
        <el-input v-model="input" placeholder="placeholder"></el-input>
        <el-input v-model="input" placeholder="placeholder" size="medium"></el-input>
        <el-input v-model="input" placeholder="placeholder" size="small"></el-input>
        <el-input v-model="input" placeholder="placeholder" size="mini"></el-input>
    </el-row>

在这里插入图片描述

8.5、带图标的输入框

可以通过prefix-icon和suffix-icon属性在input组件首部和尾部增加显示图标，也可以通过slot来放置图标
第一种方式：

	<el-row :gutter="10" type="flex" justify="space-around">
        <el-col :span="3">slot方式</el-col>
        <el-col :span="6">
            <el-input v-model="input" placeholder="请选择日期"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input>
        </el-col>
        <el-col :span="6">
            <el-input v-model="input" placeholder="请输入内容"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
        </el-col>
    </el-row>

在这里插入图片描述
第二种方式：

 <el-row :gutter="10" type="flex" justify="space-around">
        <el-col :span="6">
            <el-input v-model="input" placeholder="请选择日期" suffix-icon="el-icon-date"></el-input>
        </el-col>
        <el-col :span="6">
            <el-input v-model="input" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
        </el-col>
    </el-row>

在这里插入图片描述

8.6、复合型输入框

可通过slot来指定在input中前置或者后置内容

	<div>
        <el-input v-model="input" placeholder="请输入内容">
            <template slot="prepend">Http://</template>
        </el-input>
    </div>
    <div style="margin-top: 15px;">
        <el-input v-model="input" placeholder="请输入内容">
            <template slot="append">.com</template>
        </el-input>
    </div>

在这里插入图片描述

9、Form表单基础

返回目录

由输入框、选择器、单选框、多选框等控件组成，用于收集、校验、提交数据

9.1、典型表单

在Form组件中，每一个表单域由一个From-Item组件构成，表单域中可以放置各种类型的表单控件，包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。必须为表单的model属性绑定一个数据，表单的ref属性类似id用户标识一个表单
请添加图片描述
Form.vue：一个简单的表单

<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">登入</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  export default {
    name: "Form",
    data(){
      return{
        user:{
          username:'',
          password:''
        }
      }
    }
  }
</script>

<style scoped>

</style>

9.2、行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单，设置inline属性可以让表单域变为行内的表单域

		<el-form ref="form" :model="form" label-width="80px" :inline="true">
            <el-form-item label="用户名">
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">登入</el-button>
            </el-form-item>
        </el-form>

在这里插入图片描述

9.3、对齐方式

通过设置label-position属性可以改变表单域标签的位置，可选值为top、left、right，当设为top时标签会置于表单域的顶部

 		<el-form ref="form" :model="user" label-width="80px" label-position="top">
            <el-form-item label="用户名">
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">登入</el-button>
            </el-form-item>
        </el-form>

在这里插入图片描述

10、Radio单选按钮

返回目录

Radio单选框（在一组选项中进行单选）

10.1、基础语法

由于选项默认可见，不宜过多，若选项过多，建议使用Select选择器
添加为一组按钮要使用label标签指定属性值，v-model绑定为一组单选按钮：

<el-radio v-model="user.sex" label="男">男</el-radio>
<el-radio v-model="user.sex" label="女">女</el-radio>

在这里插入图片描述
sex的属性值为‘男’的时候男默认被选中，为‘女’的时候女默认被选中，且sex的值随自选状态而改变值

上面这种绑定一组单选按钮的方式并不简单，现在让我们来接触一下简单的绑定

10.2、单选框组

当一组单选按钮数量多时，再通过v-model分别为多个单选按钮绑定数据就会非常的繁琐，此时可以通过el-radio-group简化绑定，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量。另外，单选框组还提供了change事件来响应变化，它会传入一个参数value

		<el-radio-group v-model="user.sex" @change="handleChange">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>

在这里插入图片描述

11、Checkbox复选框

返回目录

基本使用
和单选框相似，复选框组件也使用label属性定义按钮值，使用v-model绑定的数据必须是按钮的label值

 		<el-row :gutter="10">
            <el-checkbox v-model="favorites" label="吃" @change="handleChange">吃</el-checkbox>
            <el-checkbox v-model="favorites" label="喝" @change="handleChange">喝</el-checkbox>
            <el-checkbox v-model="favorites" label="玩" @change="handleChange">玩</el-checkbox>
            <el-checkbox v-model="favorites" label="乐" @change="handleChange">乐</el-checkbox>
        </el-row>

favorites此时必须为数组，且有大于1的默认值
在这里插入图片描述
此时函数值返回的是按钮选中状态，true或false

默认选中：
在这里插入图片描述

在这里插入图片描述
11.2、复选框组
当一组复选框数量多时，再通过v-model分别为多个复选框绑定数据就会非常繁琐，此时可以通过el-checkbox-group简化绑定。在el-checkbox-group中绑定v-model，
在el-checkbox中设置好label即可，无需再给每一个el-checkbox绑定数量

		<el-checkbox-group v-model="favorites">
          <el-checkbox v-for="item in favoritesList" :label="item" :key="item">{{item}}</el-checkbox>
        </el-checkbox-group>

在这里插入图片描述

这种循环遍历的方式很不错，推荐后面以后都这样使用

12、Switch开关

返回目录

表示两种相互对立的状态间的切换，多用于触发开关

12.1、基本用法：

绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的颜色。使用active-text属性与inactive-text属性来设置开关的文字描述

<template>
    <div>
        <el-row :gutter="10">
            <el-switch v-model="value"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-text="开"
                       inactive-text="关">
            </el-switch>
        </el-row>
    </div>
</template>

<script>
  export default {
    name: "Switch",
    data(){
      return{
        value:true
      }
    }
  }
</script>

<style scoped>

</style>

在这里插入图片描述

12.2、扩展的value类型

开关可绑定的数据默认为Boolean类型，开就是true，关就是false，可以通过active-value和inactive-value属性自定义开和关的值

<template>
    <div>
        <el-row :gutter="10">
            <el-switch v-model="value"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-text="1"
                       inactive-text="0">
            </el-switch>
        </el-row>
    </div>
</template>

<script>
  export default {
    name: "Switch",
    data(){
      return{
        value:0
      }
    }
  }
</script>

<style scoped>

</style>

在这里插入图片描述
个人爱好：

<template>
    <div>
        <el-row :gutter="10">
            <el-switch v-model="value"
                       active-color="#13ce66"
                       inactive-color="gray"
                       active-text="用户锁定">
            </el-switch>
        </el-row>
    </div>
</template>

<script>
  export default {
    name: "Switch",
    data(){
      return{
        value:0
      }
    }
  }
</script>

<style scoped>

</style>

在这里插入图片描述

13、Select选择器

返回目录

当选项过多时，使用下拉菜单展示并选择内容。选择器由el-Select标签通过v-model绑定数据。当选中的值发生变化时，会触发change事件

Select.vue:

<template>
    <el-row :gutter="10">
        <el-select v-model="model" placeholder="请选择食物">
            <el-option
                    v-for="item in optionsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
    </el-row>
</template>

<script>
  export default {
    name: "Select",
    data(){
      return{
        model:'',
        optionsList:[
          {value:'1',label:'黄金糕'},{value: '2',label: '双皮奶'},{value: '3',label: '蚵仔煎'},{value: '4',label: '龙须面'},
          {value: '5',label: '北京烤鸭'}
        ]
      }
    }
  }
</script>

<style scoped>

</style>

在这里插入图片描述
写个回调函数看看输出内容：

输出的value对应的值（这里是数字）

我们还可以设置clearable属性：

14、Cascader级联选择器

返回目录

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择

14.1、基础用法

只需为Cascader的option属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。注意，此时使用v-model绑定的数据必须是一个数组。当选择一个选项时，会触发change事件

<template>
    <div>
        <div class="block">
            <span class="demonstration">默认 click 触发子菜单</span>
            <el-cascader
                    v-model="value"
                    :options="options"
                    @change="handleChange"></el-cascader>
        </div>
        <div class="block">
            <span class="demonstration">hover 触发子菜单</span>
            <el-cascader
                    v-model="value"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                    @change="handleChange"></el-cascader>
        </div>
    </div>
</template>

<script>
  export default {
    name:'Cascader',
    data() {
      return {
        value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

<style scoped>

</style>

在这里插入图片描述
为el-cascader设置clearable属性，则可将选择器清空。为el-cascader添加filterable属性即可启用搜索功能，这里不再演示代码，都挺简单

15、DateTimePicker日期时间选择器

返回目录

通过设置DatePicker组件的type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择

15.1、基本使用

通过v-model为日期选择器绑定数据，选择日期时间后会触发change事件

DatePicker.vue

<template>
    <div>
        <el-date-picker v-model="value"
                        type="date" placeholder="请选择日期事件"
                        @change="handleChange">
        </el-date-picker>
    </div>
</template>

<script>
  export default {
    name: "DatePicker",
    data(){
      return{
        value:''
      }
    },
    methods:{
      handleChange(value){
        console.log(value)
        console.log(this.value)
      }
    }
  }
</script>

<style scoped>

</style>

在这里插入图片描述
我们可以指定日期输出格式：（利用value-format属性指定）

value-format="yyyy-MM-dd HH:mm:ss"

在这里插入图片描述

16、Validator表单校验

返回目录

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误

16.1、简单案例：

Form组件提供了表单验证功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可
请添加图片描述

<template>
    <el-form ref="form" :model="user" label-width="180px" :rules="formRules" label-position="top" size="medium">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item align="center">
            <el-button type="primary" @click="handleSubmit">登入</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
  export default {
    name: "Validator",
    methods:{
      handleSubmit(){
        //发起登入请求前,再次进行表单校验
        //先获取表单对象,然后执行校验方法
        //ref具有id的效果，所以我们可以使用$refs
        this.$refs["form"].validate(valid=>{
          //valid为校验后的结果，值为true校验通过，false校验失败
          if(valid){
            alert("校验通过，可以发起请求")
          }else {
            alert("校验失败，不可以发起请求")
          }
        })
      }
    },
    data(){
      return{
        user:{
          username:'',
          password:''
        },
        formRules:{
          username: [
            {required:true,message:"用户名不能为空",trigger:"blur"},
            {min:3,max:5,message: "用户名长度在3~5个字符间",trigger: "blur"}
          ],
          password: [
            {required:true,message:"密码不能为空",trigger:'blur'}
          ]
        }
      }
    },
  }
</script>

<style scoped>

</style>

在这里插入图片描述

17、自定义校验规则

返回目录

<template>
    <div>
        <el-form ref="form" :model="user" label-width="180px" label-position="top" size="mini" :rules="formRules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="user.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
                <el-input v-model="user.password2" placeholder="请确认密码"></el-input>
            </el-form-item>
            <el-form-item align="center">
                <el-button type="primary" @click="handleSubmit">登入</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  export default {
    name: "Validator",
    methods:{
      handleSubmit(){
        //发起登入请求前,再次进行表单校验
        //先获取表单对象,然后执行校验方法
        //ref具有id的效果，所以我们可以使用$refs
        this.$refs["form"].validate(valid=>{
          //valid为校验后的结果，值为true校验通过，false校验失败
          if(valid){
            alert("校验通过，可以发起请求")
          }else {
            alert("校验失败，不可以发起请求")
          }
        })
      }
    },
    data(){
      let checkPwd2 = (rule,value,callback)=>{
        if(value.trim().length === 0){
          callback(new Error("确认密码不能为空"));
        }else if(value !== this.user.password){
          callback(new Error("两次输入密码不一致!"))
        }else {
          callback();
        }
      }

      return {
        user:{
          username:'',
          password:'',
          password2:''
        },
        formRules:{
          username: [
            {required:true,message:"用户名不能为空",trigger:"blur"},
            {min:3,max:5,message: "用户名长度在3~5个字符间",trigger: "blur"}
          ],
          password: [
            {required:true,message:"密码不能为空",trigger:'blur'}
          ],
          password2: [
            {validator:checkPwd2,trigger:"blur"}
          ]
        }
      }
    },
  }
</script>

<style scoped>

</style>

在这里插入图片描述

CharmDeer

关注

66
点赞
踩
313

收藏

觉得还不错? 一键收藏
打赏
8
评论
你还在用古老的HTML和CSS吗？还在手敲吗？那么你是时候打开新前端的大门了————Element-UI全面详解

目录1、Element-UI简介element-ui，一套为开发者，设计师和产品经理准备的基于Vue的桌面端组件库，使用前端框架封装的代码帮助工程师快速开发Element-UI的特点：丰富的组件element-ui的组件分为六大类：分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好的满足大部分PC端to B业务开发需求成熟的生态element-ui是国内做Vue的UI框架中最早，也最成熟的一家。用户群体多，遇到问题基本都能解决优秀
复制链接

扫一扫