一.引入入element ui的方式

1.在main.js中全局引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2.按需引入

1.下载包

npm install babel-plugin-component -D

2.在babel.config.js添加配置项

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.在创建的js文件中导入并且注册，在main.js中完成引入

 导入
  import Vue from 'vue';
按需导入
  import {
  Pagination,
  Dialog,} from 'element-ui'; 
挂载注册
Vue.use(Pagination);
Vue.use(Dialog);

二.表格的使用

参数:

1.data关联数据 (使用的时候用:data)

2.prop用来关联数据，关联的是一列

3.label 关联的是表头的信息

三.表单的使用

1. :model 关联数据（在data中return中进行定于，使用 :model ）

2. :label 显示内容

3. :rules （在rules定义规则使用:rules）

4. v-model：用来双向绑定数据

5.prop :用来关联定义的规则（关联的是rules中的每一个数组）

6.自定义校验规则一个重复验证密码

1.在相应的数组里面添加一个对象

 在rules:{ validator: validatePass2, trigger: 'blur' },

2.在于return平级处定义:


 var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('输入不能为空,请再次输入密码'))
      } else if (value !== this.loginForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
 参数解析:rule=>规则对象，value=>用户输入的值，cllback=>回调函数

参数解析:rule=>规则对象，value=>用户输入的值，cllback=>回调函数

7.点击按钮时候的预定校验通过validate

    this.$refs.form.validate(async(result) => {
        if (result) {
          const res = await sysLogin(this.form)
          console.log(res)
          this.$message.success('验证成功')
        }

解析:result是一个布尔值，true代表成功，this.form是提交的参数。

四.分页的使用

引入element ui

1.图示:

函数:

1. 显示每页多少条  
handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
2.显示当前页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }

1.current-page:默认页码

2. page-sizes:页容量选项,默认页容量一定要在页容量选项中存在

3.page-size:默认页容量

4.layout:total总数,sizes页容量,prev上一页pager:页码 next:下一页jumper:跳转到哪一页

5.total:总数

6.size-change:页容量改变

7.current-change：页码改变

五.提示信息

1.代码:

  <el-button :plain="true" @click="open2">成功</el-button>
   open2() {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });

2.参数:

(1):参数message 文字的提示信息

(2):参数type 关联的是颜色样式

element ui 还有许多的工具，具体参考element ui官网进行使用。

六.下拉菜单

1.代码

    <el-dropdown-item command="home">首页</el-dropdown-item>
    <el-dropdown-item command="exit">退出登录</el-dropdown-item>

   <el-dropdown @command="commandEvent">
   </el-dropdown>

 commandEvent(command) {
      switch (command) {
        case 'home':
          console.log('首页')
          break
        case 'exit':
          console.log('退出')
          break
      }
    }

绑定@command事件，并且要给绑定的元素添加属性， commandEven()接收一个形参，就是当前点击的元素。

Element ui一些常见的使用