ElementUi学习(上)

ElementUi 学习(上)

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

视频教程: https://www.bilibili.com/video/BV1NK4y187XH

ElementUi引言

• 什么时ElementUI？

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

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

• 定义

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

安装与使用

• 使用vuecli4创建项目

  vue create elementui

• npm 安装

  npm i element-ui -S

• 使用

  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,
    netder: h => h(App)
  }).$mount('#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>

按钮组件详细使用

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

• 创建按钮

  <el-button>默认按钮</el-button>

• 按钮的属性使用

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

  <el-button type="sucess" size="medium" plain round circle icon="el-icon-loading"></el-button>

• 按钮组的使用

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

  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>

• 下划线: :underline="false" 默认为true 有下划线

  文字链接下划线

  <div>
    <!-- 需要绑定属性 -->
    <el-link :underline="false">无下划线</el-link>
    <el-link>有下划线</el-link>
  </div>

• 图标 icon

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

  <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 代表 占用的份数

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

  <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: 栅格向左移动格数

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

使用

• 创建布局容器

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

• 容器中的子元素

  <el-header>：顶栏容器。
  
  <el-aside>：侧边栏容器。
  
  <el-main>：主要区域容器。
  
  <el-footer>：底栏容器。

• 容器嵌套

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

  <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-header 或 el-footer 时为 vertical

  <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-model和label属性

  <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可以实现单选组

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

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

  <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 有效	string	medium / small / mini	—
  disabled	是否禁用	boolean	—	false
  text-color	按钮形式的 Radio 激活时的文本颜色	string	—	#ffffff
  fill	按钮形式的 Radio 激活时的填充色和边框色	string	—	#409EFF

属性的使用

<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	—	—
label	Radio 的 value	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Radio 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—

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

CheckBox 多选框

使用

• 创建CheckBox多选框

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

  <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

  <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

  <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	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Checkbox 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—
checked	当前是否勾选	boolean	—	false

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

Input 输入框

使用

• 创建input输入框

  使用el-input

  <el-input v-model="input" placeholder="请输入内容"></el-input>
  
  <script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
  </script>

属性

常用属性

参数	说明	类型	可选值	默认值
type	类型	string	text，textarea 和其他 原生 input 的 type 值	text
maxlength	原生属性，最大输入长度	number	—	—
minlength	原生属性，最小输入长度	number	—	—
show-word-limit	是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效	boolean	—	false
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
show-password	是否显示切换密码图标	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 type!="textarea" 时有效	string	medium / small / mini	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
rows	输入框行数，只对 type="textarea" 有效	number	—	2
autosize	自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	false
autocomplete	原生属性，自动补全	string	on, off	off

事件

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	仅在输入框失去焦点或用户按下回车时触发	(value: string / number)
input	在 Input 值改变时触发	(value: string / number)
clear	在点击由 clearable 属性生成的清空按钮时触发	—

方法

<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 创建 、动态绑定数据

<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. 要求下拉列表中必须存在option的value属性值
2. 要求select中必须使用v-model进行数据绑定

属性

去官网看更佳

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
autocomplete	select input 的 autocomplete 属性	string	—	off
auto-complete	下个主版本弃用	string	—	off
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
allow-create	是否允许用户创建新条目，需配合 filterable 使用	boolean	—	false
filter-method	自定义搜索方法	function	—	—
remote	是否为远程搜索	boolean	—	false
remote-method	远程搜索方法	function	—	—
loading	是否正在从远程获取数据	boolean	—	false
loading-text	远程加载时显示的文字	string	—	加载中
no-match-text	搜索条件无匹配时显示的文字，也可以使用slot="empty"设置	string	—	无匹配数据
no-data-text	选项为空时显示的文字，也可以使用slot="empty"设置	string	—	无数据
popper-class	Select 下拉框的类名	string	—	—
reserve-keyword	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	false
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用	boolean	-	false
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	-	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 失去焦点，并隐藏下拉框

<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绑定值实现切换

<template>
    <div>
        <el-switch v-model="value"></el-switch>
    </div>
</template>

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

属性

见官网

事件

事件名称	说明	回调参数
change	switch 状态发生变化时的回调函数	新状态的值

方法

方法名	说明
focus	使 Switch 获取焦点

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

DatePicker日期选择器

使用

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

<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	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large, small, mini	—
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时结束日期的占位内容	string	—	—
type	显示类型	string	year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange	date
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd
align	对齐方式	string	left, center, right	left
popper-class	DatePicker 下拉框的类名	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	在范围选择器里取消两个日期面板之间的联动	boolean	—	false
prefix-icon	自定义头部图标的类名	string	—	el-icon-date
clear-icon	自定义清空图标的类名	string	—	el-icon-circle-close
validate-event	输入时是否触发表单的校验	boolean	-	true

Picker Options 和 shortcuts使用

• Picker Options: 用来对日期控件做自定义配置
• Shortcuts: 用来增加日期组件的快捷键面板

shortcuts使用

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

<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: {}

<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图片上传地址、否则会报错

<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.elemegcore.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemegcore.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文字

  <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" 使得组件在一行显示

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

表单验证

通过给el-form绑定:rules、el-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、切记

<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指定样式

<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	主题	string	success/warning/info/error	info
description	辅助性文字。也可通过默认 slot 传入	string	—	—
closable	是否可关闭	boolean	—	true
center	文字是否居中	boolean	—	true
close-text	关闭按钮自定义文本	string	—	—
show-icon	是否显示图标	boolean	—	false
effect	选择提供的主题	string	light/dark	light

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

Message 消息提示

使用

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

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

<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('消息内容')

<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	主题	string	success/warning/info/error	info
iconClass	自定义图标的类名，会覆盖 type	string	—	—
dangerouslyUseHTMLString	是否将 message 属性作为 HTML 片段处理	boolean	—	false
customClass	自定义类名	string	—	—
duration	显示时间, 毫秒。设为 0 则不会自动关闭	number	—	3000
showClose	是否显示关闭按钮	boolean	—	false
center	文字是否居中	boolean	—	false
onClose	关闭时的回调函数, 参数为被关闭的 message 实例	function	—	—
offset	Message 距离窗口顶部的偏移量	number	—	20

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

Table 表格

使用

• 基本使用

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

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

• 自定义列模板

  <template>
      <div>
          <el-table :data="tableData" border stripe highlight-curnett-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>

• 自定义表头

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

  <template>
      <div>
          <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" border stripe highlight-curnett-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