ElementUi 学习(上)

封面P站: https://www.pixiv.net/artworks/82970659

对于向我这样的菜鸡来说还是看视频学、直接看文档太。。。

ElementUi引言

官网

  • 什么时ElementUI?

    官网: https://element.eleme.cn/#/zh-CN

    网站快速成型工具桌面端组件库

  • 定义

    element ui 就是基于vue的一个ui框架,改框架基于vue开发利很多相关的组件,方便我们快速开发页面。

安装与使用

  • 使用vuecli4创建项目

    1
    vue create elementui
  • npm 安装

    1
    npm i element-ui -S
  • 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    //导入ElementUi
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';

    Vue.config.productionTip = false

    //使用ElementUi
    Vue.use(ElementUI)

    new Vue({
    router,
    render: h => h(App)
    }).$mount('#app')

按钮组件

示例

默认按钮
1
2
3
4
5
6
7
8
<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>
朴素按钮
1
2
3
4
5
6
7
8
<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>
圆角按钮
1
2
3
4
5
6
7
8
<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>
图标按钮
1
2
3
4
5
6
7
8
<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>

按钮组件详细使用

elementui的相关的组件都是以el-开头的

  • 创建按钮

    1
    <el-button>默认按钮</el-button>
  • 按钮的属性使用

    <el-button 属性名=属性值 >按钮</el-button>

    1
    <el-button type="sucess" size="medium" plain round circle icon="el-icon-loading"></el-button>
  • 按钮组的使用

    1
    2
    3
    4
    <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>
  • 更多

    官网: https://element.eleme.cn/#/zh-CN/component/button

  • 注意

    在element ui中所有组件都是 el-组件名称 方式进行命名

    在element ui中组件的属性都是直接将属性名=属性值方式写在对应的组件标签上

文字链接

示例

没有示例、懒得弄了

使用

  • 基础用法

    type="primary|success|warning|danger|info"

    1
    <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  • 下划线: :underline="false" 默认为true 有下划线

    文字链接下划线

    1
    2
    3
    4
    5
    <div>
    <!-- 需要绑定属性 -->
    <el-link :underline="false">无下划线</el-link>
    <el-link>有下划线</el-link>
    </div>
  • 图标 icon

    带图标的文字链接可增强辨识度

    1
    2
    3
    4
    <div>
    <el-link icon="el-icon-edit">编辑</el-link>
    <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
    </div>

官网: https://element.eleme.cn/#/zh-CN/component/link

Layout布局

通过基础的 24 分栏,迅速简便地创建布局。在element ui中布局组件将页面分为多个行row,每行多分为24栏(列)

使用

el-row代表 el-col代表 :span 代表 占用的份数

1
2
3
4
5
<el-row>
<el-col :span="8">我是8份</el-col>
<el-col :span="8">我是8份</el-col>
<el-col :span="8">我是8份</el-col>
</el-row>

属性的使用

  • 行属性使用

    :gutter: 栅格间隔 如: :gutter=20

    tag: 将标签渲染成指定标签 如: tag="span" 渲染成 span标签

    1
    2
    3
    4
    5
    6
    <el-row :gutter="50" tag="span">
    <el-col :span="4" style="border: 1px solid red">我是4份</el-col>
    <el-col :span="12" style="border: 1px solid red">我是12份</el-col>
    <el-col :span="2" style="border: 1px solid red">我是2份</el-col>
    <el-col :span="6" style="border: 1px solid red">我是6份</el-col>
    </el-row>
  • 列属性使用

    :offset: 栅格左侧的间隔格数
    :push: 栅格向右移动格数
    :pull: 栅格向左移动格数

    1
    2
    3
    4
    <el-row >
    <el-col :offset="9" :push="3" :span="12" xs ><div style="border: 1px solid red">我是12份</div></el-col>
    <el-col :span="6" style="border: 1px solid red">我是6份</el-col>
    </el-row>

官网: https://element.eleme.cn/#/zh-CN/component/container

Container容器

使用

  • 创建布局容器

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

    1
    2
    3
    4
    5
    6
    7
    <el-header>:顶栏容器。

    <el-aside>:侧边栏容器。

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

    <el-footer>:底栏容器。
  • 容器嵌套

    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
    <el-container>
    <el-header><div><h2>我是标题</h2></div></el-header>
    <!-- 容器的嵌套 -->
    <el-container>
    <!-- aside -->
    <el-aside><div><h2>我是菜单</h2></div></el-aside>
    <!-- main -->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
    </el-container>
    <!-- footer -->
    <el-footer><div><h1>我是尾部内容</h1></div></el-footer>
    </el-container>


    <style>
    .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    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: 160px;
    }

    body > .el-container {
    margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
    line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
    line-height: 320px;
    }
    </style>
  • 水平容器 direction="horizontal"

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <el-container direction="horizontal">
    <el-header><div><h2>我是标题</h2></div></el-header>
    <!-- 容器的嵌套 -->
    <el-container>
    <!-- aside -->
    <el-aside><div><h2>我是菜单</h2></div></el-aside>
    <!-- main -->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
    </el-container>
    <!-- footer -->
    <el-footer><div><h1>我是尾部内容</h1></div></el-footer>
    </el-container>
  • 垂直容器 direction="vertical" 子元素中有 el-headerel-footer 时为 vertical

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <el-container direction="vertical">
    <el-header><div><h2>我是标题</h2></div></el-header>
    <!-- 容器的嵌套 -->
    <el-container>
    <!-- aside -->
    <el-aside><div><h2>我是菜单</h2></div></el-aside>
    <!-- main -->
    <el-main><div><h1>我是中心内容</h1></div></el-main>
    </el-container>
    <!-- footer -->
    <el-footer><div><h1>我是尾部内容</h1></div></el-footer>
    </el-container>

属性的使用

el-header 中的height属性: 顶栏高度、默认: 60px

el-aside中的width属性: 侧边栏宽度、默认: 300px

el-footer 中的height属性: 底栏高度、默认: 60px

官网: https://element.eleme.cn/#/zh-CN/component/container

Form相关组件

Radio 单选框

使用
  • 创建Radio按钮

    使用需要添加v-modellabel属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <template>
    <div>
    <el-radio v-model="label" label="男"></el-radio>
    <el-radio v-model="label" label="女"></el-radio>
    </div>
    </template>

    <script>
    export default {
    name: "Radio",
    data() {
    return {
    label: '男'
    }
    }
    }
    </script>
  • 创建Radio按钮组

    结合el-radio-group元素和子元素el-radio可以实现单选组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <template>
    <el-radio-group v-model="radio">
    <el-radio :label="3">备选项3</el-radio>
    <el-radio :label="6">备选项6</el-radio>
    <el-radio :label="9">备选项9</el-radio>
    </el-radio-group>
    </template>

    <script>
    export default {
    data () {
    return {
    radio: 3
    };
    }
    }
    </script>
  • 绑定事件

    change: 绑定值变化时触发的事件、选中的 Radio中label的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <el-radio v-model="label" @change="changRadio" label="男"></el-radio>
    <el-radio v-model="label" @change="changRadio" label="女"></el-radio>

    <script>
    export default {
    name: "Radio",
    data() {
    return {
    label: '男',
    }
    },
    methods:{
    changRadio(){
    console.log(this.label)
    }
    }
    }
    </script>
  • 创建按钮样式Radio组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <el-radio-group v-model="radio1">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>

    <script>
    export default {
    name: "Radio",
    data() {
    return {
    radio1: '上海',
    }
    }
    }
    </script>

    Radio组属性:

    注意: text-color 和 fill 只对el-radio-button生效

    参数说明类型可选值默认值
    value / v-model绑定值string / number / boolean
    size单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效stringmedium / small / mini
    disabled是否禁用booleanfalse
    text-color按钮形式的 Radio 激活时的文本颜色string#ffffff
    fill按钮形式的 Radio 激活时的填充色和边框色string#409EFF
属性的使用
1
2
<el-radio v-model="label" label="女" disabled border size="medium"></el-radio>
<el-radio v-model="label" label="女" border size="small"></el-radio>
参数说明类型可选值默认值
value / v-model绑定值string / number / boolean
labelRadio 的 valuestring / number / boolean
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
sizeRadio 的尺寸,仅在 border 为真时有效stringmedium / small / mini
name原生 name 属性string

官网: https://element.eleme.cn/#/zh-CN/component/radio

CheckBox 多选框

使用
  • 创建CheckBox多选框

    el-checkbox 需要使用v-model绑定Boolean值变量,选中为true

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
    <div>
    <el-checkbox v-model="check">上海</el-checkbox>
    </div>
    </template>

    <script>
    export default {
    name: "CheckBox",
    data(){
    return{
    check: true
    }
    }
    }
    </script>
  • 创建CheckBox多选框组

    使用el-checkbox-group+ el-checkbox

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <template>
    <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
    </template>

    <script>
    export default {
    data () {
    return {
    checkList: ['选中且禁用','复选框 A']
    };
    }
    };
    </script>
  • 绑定事件

    使用 @change

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <template>
    <div>
    <el-checkbox v-model="check" @change="checkbox">上海</el-checkbox>
    </div>
    </template>

    <script>
    export default {
    name: "CheckBox",
    data(){
    return{
    check: true
    }
    },
    methods:{
    checkbox(){
    console.log(this.check);
    }
    }
    }
    </script>
属性的使用
参数说明类型可选值默认值
label选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效)string / number / boolean
true-label选中时的值string / number
false-label没有选中时的值string / number
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
sizeCheckbox 的尺寸,仅在 border 为真时有效stringmedium / small / mini
name原生 name 属性string
checked当前是否勾选booleanfalse

官网: https://element.eleme.cn/#/zh-CN/component/checkbox

Input 输入框

使用
  • 创建input输入框

    使用el-input

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <el-input v-model="input" placeholder="请输入内容"></el-input>

    <script>
    export default {
    data() {
    return {
    input: ''
    }
    }
    }
    </script>
属性

常用属性

参数说明类型可选值默认值
type类型stringtext,textarea 和其他 原生 input 的 type 值text
maxlength原生属性,最大输入长度number
minlength原生属性,最小输入长度number
show-word-limit是否显示输入字数统计,只在 type = "text"type = "textarea" 时有效booleanfalse
placeholder输入框占位文本string
clearable是否可清空booleanfalse
show-password是否显示切换密码图标booleanfalse
disabled禁用booleanfalse
size输入框尺寸,只在 type!="textarea" 时有效stringmedium / small / mini
prefix-icon输入框头部图标string
suffix-icon输入框尾部图标string
rows输入框行数,只对 type="textarea" 有效number2
autosize自适应内容高度,只对 type="textarea" 有效,可传入对象,如,{ minRows: 2, maxRows: 6 }boolean / objectfalse
autocomplete原生属性,自动补全stringon, offoff
事件
事件名称说明回调参数
blur在 Input 失去焦点时触发(event: Event)
focus在 Input 获得焦点时触发(event: Event)
change仅在输入框失去焦点或用户按下回车时触发(value: string / number)
input在 Input 值改变时触发(value: string / number)
clear在点击由 clearable 属性生成的清空按钮时触发
方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h1>方法的使用</h1>
<el-input v-model="username" ref="inputs"></el-input>
<el-button @click="focusInputs">focus方法</el-button>
<el-button @click="blurInputs">blur方法</el-button>
<script>
export default {
name: " Input",
data() {
return{}
},
methods:{
//调用focus方法
focusInputs(){
this.$refs.inputs.focus();
},
//调用失去焦点方法
blurInputs(){
this.$refs.inputs.blur();
}
}
}
</script>

总结

  • 在使用组件的方法时需要在对应的组件中加入ref="组件别名"
  • 在调用方法时直接使用this.$refs.组件别名.方法名()

官网: https://element.eleme.cn/#/zh-CN/component/input

小总结

注意: 在elementui中所有组件都存在属性事件方法
属性: 直接写在对应的组件标签上使用方式:属性名=属性值方式
事件: 直接使用vue绑定事件方式写在对应的组件标签上、使用方式: @事件名=vue中事件处理函数
方法:

  1. 在对应组件标签上使用ref=组件别名
  2. 通过使用this.$refs.组件别名.方法名()进行调用

Select 选择器

使用

使用 el-select el-option 创建 、动态绑定数据

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
<template>
<div>
<el-select v-model="value" placeholder="请选择">
<el-option v-for="option in options" :value="option.value" :key="option.value" :label="option.label"></el-option>
</el-select>
</div>
</template>

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

注意:

  1. 要求下拉列表中必须存在optionvalue属性值
  2. 要求select中必须使用v-model进行数据绑定
属性

去官网看更佳

参数说明类型可选值默认值
value / v-model绑定值boolean / string / number
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
value-key作为 value 唯一标识的键名,绑定值为对象类型时必填stringvalue
size输入框尺寸stringmedium/small/mini
clearable是否可以清空选项booleanfalse
collapse-tags多选时是否将选中值按文字的形式展示booleanfalse
multiple-limit多选时用户最多可以选择的项目数,为 0 则不限制number0
nameselect input 的 name 属性string
autocompleteselect input 的 autocomplete 属性stringoff
auto-complete下个主版本弃用stringoff
placeholder占位符string请选择
filterable是否可搜索booleanfalse
allow-create是否允许用户创建新条目,需配合 filterable 使用booleanfalse
filter-method自定义搜索方法function
remote是否为远程搜索booleanfalse
remote-method远程搜索方法function
loading是否正在从远程获取数据booleanfalse
loading-text远程加载时显示的文字string加载中
no-match-text搜索条件无匹配时显示的文字,也可以使用slot="empty"设置string无匹配数据
no-data-text选项为空时显示的文字,也可以使用slot="empty"设置string无数据
popper-classSelect 下拉框的类名string
reserve-keyword多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词booleanfalse
default-first-option在输入框按下回车,选择第一个匹配项。需配合 filterableremote 使用boolean-false
popper-append-to-body是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 falseboolean-true
automatic-dropdown对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单boolean-false
事件
事件名称说明回调参数(默认传入参数)
change选中值发生变化时触发目前的选中值
visible-change下拉框出现/隐藏时触发出现则为 true,隐藏则为 false
remove-tag多选模式下移除tag时触发移除的tag值
clear可清空的单选模式下用户点击清空按钮时触发
blur当 input 失去焦点时触发(event: Event)
focus当 input 获得焦点时触发(event: Event)
方法

通过ref给组件取别名、this.$refs.别名.方法名() 调用

方法名说明
focus使 input 获取焦点
blur使 input 失去焦点,并隐藏下拉框
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
<template>
<div>
<el-select ref="select" v-model="value" placeholder="请选择">
<el-option v-for="option in options" :value="option.value" :key="option.value" :label="option.label"></el-option>
</el-select>

<el-button @click="selectFocus">focus</el-button>
</div>
</template>

<script>
export default {
name: "Select",
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
},
methods:{
selectFocus(){
this.$refs.select.focus();
}
}
}
</script>

官网: https://element.eleme.cn/#/zh-CN/component/select

Switch 开关

使用

通过使用el-switch创建、v-model绑定值实现切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div>
<el-switch v-model="value"></el-switch>
</div>
</template>

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

见官网

事件
事件名称说明回调参数
changeswitch 状态发生变化时的回调函数新状态的值
方法
方法名说明
focus使 Switch 获取焦点

官网: https://element.eleme.cn/#/zh-CN/component/switch

DatePicker日期选择器

使用

el-data-picker创建、v-model绑定值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div>
<el-date-picker v-model="createTime"></el-date-picker>
</div>
</template>

<script>
export default {
name: "DatePickers",
data(){
return{
createTime: ''
}
}
}
</script>
属性
参数说明类型可选值默认值
value / v-model绑定值date(DatePicker) / array(DateRangePicker)
readonly完全只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸stringlarge, small, mini
placeholder非范围选择时的占位内容string
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
type显示类型stringyear/month/date/dates/ week/datetime/datetimerange/ daterange/monthrangedate
format显示在输入框中的格式string日期格式yyyy-MM-dd
align对齐方式stringleft, center, rightleft
popper-classDatePicker 下拉框的类名string
picker-options当前时间日期选择器特有的选项参考下表object{}
range-separator选择范围时的分隔符string‘-‘
default-value可选,选择器打开时默认显示的时间Date可被new Date()解析
default-time范围选择时选中日期所使用的当日内具体时刻string[]数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻,不指定会使用时刻 00:00:00
value-format可选,绑定值的格式。不指定则绑定值为 Date 对象string日期格式
name原生属性string
unlink-panels在范围选择器里取消两个日期面板之间的联动booleanfalse
prefix-icon自定义头部图标的类名stringel-icon-date
clear-icon自定义清空图标的类名stringel-icon-circle-close
validate-event输入时是否触发表单的校验boolean-true
Picker Options 和 shortcuts使用
  • Picker Options: 用来对日期控件做自定义配置
  • Shortcuts: 用来增加日期组件的快捷键面板
shortcuts使用

shortcuts: [ text: 'xxx', onClick(picker){}]

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
<template>
<div>
<el-date-picker
v-model="value"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>

<script>
export default {
name: "DatePickers",
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value: '',
}
}
}
</script>
PickerOptions使用

pickerOptions: {}

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
<template>
<div>
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>

<script>
export default {
name: "DatePickers",
data() {
return {
pickerOptions: {
//不可用的日期
disabledDate(time) {
return time.getTime() > Date.now();
}
}
value: '',
}
}
}
</script>
事件
事件名称说明回调参数
change用户确认选定的值时触发组件绑定值。格式与绑定值一致,可受 value-format 控制
blur当 input 失去焦点时触发组件实例
focus当 input 获得焦点时触发组件实例
方法
方法名说明参数
focus使 input 获取焦点

官网: https://element.eleme.cn/#/zh-CN/component/date-picker

Upload 上传

使用

使用el-uoload创建 、一定要写action图片上传地址、否则会报错

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
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

<script>
export default {
name: 'Uploads',
data() {
return {
fileList: [{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}, {
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
}
}
}
</script>
属性

看官网了解更多

方法
方法名说明参数
clearFiles清空已上传的文件列表(该方法不支持在 before-upload 中调用)
abort取消上传请求( file: fileList 中的 file 对象 )
submit手动上传文件列表

官网: https://element.eleme.cn/#/zh-CN/component/upload

Form表单

使用
  • 使用el-form定义一个表单,el-form-item定义每一项、其属性label为输入框关联的label文字

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码">
    <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
    </el-form-item>
    </el-form>

    <script>
    export default {
    data(){
    return{
    form: {
    username: "",
    password: ""
    }
    }
    }
    }
    </script>
  • 行内表单

    :inline="true" 使得组件在一行显示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <el-form :inline="true" ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码">
    <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
    </el-form-item>
    </el-form>

    <script>
    export default {
    name: "Forms",
    data(){
    return{
    form: {
    username: "",
    password: ""
    }
    }
    }
    }
    </script>
属性

定义在el-input

参数说明类型可选值默认值
type类型stringtext,textarea 和其他 原生 input 的 type 值text
value / v-model绑定值string / number
maxlength原生属性,最大输入长度number
minlength原生属性,最小输入长度number
show-word-limit是否显示输入字数统计,只在 type = "text"type = "textarea" 时有效booleanfalse
placeholder输入框占位文本string
clearable是否可清空booleanfalse
show-password是否显示切换密码图标booleanfalse
disabled禁用booleanfalse
size输入框尺寸,只在 type!="textarea" 时有效stringmedium / small / mini
prefix-icon输入框头部图标string
suffix-icon输入框尾部图标string
rows输入框行数,只对 type="textarea" 有效number2
autosize自适应内容高度,只对 type="textarea" 有效,可传入对象,如,{ minRows: 2, maxRows: 6 }boolean / objectfalse
autocomplete原生属性,自动补全stringon, offoff
auto-complete下个主版本弃用stringon, offoff
name原生属性string
readonly原生属性,是否只读booleanfalse
max原生属性,设置最大值
min原生属性,设置最小值
step原生属性,设置输入字段的合法数字间隔
resize控制是否能被用户缩放stringnone, both, horizontal, vertical
autofocus原生属性,自动获取焦点booleantrue, falsefalse
form原生属性string
label输入框关联的label文字string
tabindex输入框的tabindexstring--
validate-event输入时是否触发表单的校验boolean-true
表单验证

通过给el-form绑定:rulesel-form-item绑定prop属性

个人总结(仅代表个人见解):

  • ref="xxx" 绑定form表单、用于表单提交时调用this.$refs.xxx.validate((valid)=>{})
  • :model=xx 绑定数据
  • :rules="xxx"绑定表单验证规则、定义在data(){ return{} }
    • xxx:{ xx1:[], xx2,[] }
    • 简单的表单验证:xxx1:[{required: true, message: '请输入用户名', trigger: 'blur'}, {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}]请按照字面意思理解
    • 自定义表单验证:xxx2: [{validator: checkPassword, trigger: 'blur'}]checkPassword自定义函数需要定义在data中、有三个参数: rule, value, callback、验证失败可以callback(new Error("错误信息"))、验证成功需要调用callback切记
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
<template>
<div>
<!-- :rules 绑定验证方法 -->
<el-form ref="formLogin" :model="formLogin" :rules="rulesLogin" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="formLogin.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formLogin.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<!-- 提交方法submitForm 需要传入 :rules绑定的方法 -->
<el-button type="primary" @click="submitForm('formLogin')">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script>
export default {
name: "Forms",
data() {
//自定义验证方法
let checkPassword = (rule, value, callback) => {
if (!(/^[\w_-]{6,16}$/).test(value)) {
return callback(new Error("密码不符合规范"))
}
//验证成功需要返回callback()
callback();
};
return {
formLogin: {
username: "",
password: ""
},
//这里是验证规则
rulesLogin: {
username: [
// trigger代表何时验证
{required: true, message: '请输入用户名', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
// validator定义自定义验证方法
password: {validator: checkPassword, trigger: 'blur'}
}
}
},
methods: {
submitForm(formName) {
// 调用验证
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>

官网: https://element.eleme.cn/#/zh-CN/component/form

Notice相关组件

Alert 警告

使用

el-alert创建、type指定样式

1
2
3
4
<el-alert title="成功提示的文案" type="success"></el-alert>
<el-alert title="消息提示的文案" type="info"></el-alert>
<el-alert title="警告提示的文案" type="warning"></el-alert>
<el-alert title="错误提示的文案" type="error"></el-alert>
属性
参数说明类型可选值默认值
title标题string
type主题stringsuccess/warning/info/errorinfo
description辅助性文字。也可通过默认 slot 传入string
closable是否可关闭booleantrue
center文字是否居中booleantrue
close-text关闭按钮自定义文本string
show-icon是否显示图标booleanfalse
effect选择提供的主题stringlight/darklight

官网: https://element.eleme.cn/#/zh-CN/component/alert

Message 消息提示

使用

通过this.$message("消息内容")显示消息

const h = this.$createElement可以创建自定义元素来自定义消息样式、this.$message({ message: h('标签名',样式,内容) })

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
<template>
<div>
<el-button :plain="true" @click="open">打开消息提示</el-button>
<el-button :plain="true" @click="openVn">VNode</el-button>
</div>
</template>

<script>
export default {
name: "Messages",
methods: {
open() {
this.$message('这是一条消息提示');
},
openVn() {
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('span', null, '内容可以是 '),
h('i', { style: 'color: teal' }, 'VNode')
])
});
}
}
}
</script>

还可以指定消息状态 this.$message({ messge:'消息内容',type:'sucess' }) type可以为sucess|warning|error、或者直接this.$message.sucess('消息内容')

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
<template>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
</template>

<script>
export default {
methods: {
open1() {
this.$message('这是一条消息提示');
},
open2() {
this.$message({
message: '恭喜你,这是一条成功消息',
type: 'success'
});
},

open3() {
this.$message({
message: '警告哦,这是一条警告消息',
type: 'warning'
});
},

open4() {
this.$message.error('错了哦,这是一条错误消息');
}
}
}
</script>
属性
参数说明类型可选值默认值
message消息文字string / VNode
type主题stringsuccess/warning/info/errorinfo
iconClass自定义图标的类名,会覆盖 typestring
dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理booleanfalse
customClass自定义类名string
duration显示时间, 毫秒。设为 0 则不会自动关闭number3000
showClose是否显示关闭按钮booleanfalse
center文字是否居中booleanfalse
onClose关闭时的回调函数, 参数为被关闭的 message 实例function
offsetMessage 距离窗口顶部的偏移量number20

官网: https://element.eleme.cn/#/zh-CN/component/message

Table 表格

使用

  • 基本使用

    使用el-table创建表格、:data绑定数据,el-table-column定义列label显示的标题prop属性写列内容的字段名`

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <template>
    <div>
    <el-table :data="tableData">
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
    </el-table>
    </div>
    </template>

    <script>
    export default {
    name: "Tables",
    data(){
    return{
    tableData:[
    {id:1,name:'zykj',age:18},
    {id:2,name:'skx',age:15}
    ]
    }
    }
    }
    </script>
  • 自定义列模板

    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
    <template>
    <div>
    <el-table :data="tableData" border stripe highlight-current-row>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age" sortable></el-table-column>
    <el-table-column label="操作">
    <template slot-scope="scope">
    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
    </el-table-column>
    </el-table>
    </div>
    </template>

    <script>
    export default {
    name: "Tables",
    data() {
    return {
    tableData: [
    {id: 1, name: 'zykj', age: 18},
    {id: 2, name: 'skx', age: 15}
    ]
    }
    },
    methods: {
    handleEdit(index, row) {
    console.log(index, row);
    },
    handleDelete(index, row) {
    console.log(index, row);
    }
    }
    }
    </script>
  • 自定义表头

    表头支持自定义、如搜索功能

    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
    <template>
    <div>
    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" border stripe highlight-current-row>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age" sortable></el-table-column>
    <el-table-column align="right">
    <template slot="header" slot-scope="scope">
    <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
    </template>
    <template slot-scope="scope">
    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
    </el-table-column>
    </el-table>
    </div>
    </template>

    <script>
    export default {
    name: "Tables",
    data() {
    return {
    tableData: [
    {id: 1, name: 'zykj', age: 18},
    {id: 2, name: 'skx', age: 15}
    ],
    search: ''
    }
    },
    methods: {
    handleEdit(index, row) {
    console.log(index, row);
    },
    handleDelete(index, row) {
    console.log(index, row);
    }
    }
    }
    </script>

属性

见官网

官网: https://element.eleme.cn/#/zh-CN/component/table