Vue整合ElementUI，组件使用教程，适合新手

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

虫链Java Library

14271人浏览 · 2021-08-06 10:22:02

虫链Java Library · 2021-08-06 10:22:02 发布

官网：Element

在这里插入图片描述

文章目录

Vue整合ElementUI
一. 按钮组件
二. Link 文件链接组件
三. Layout(栅格) 布局组件的使用
四. Container 布局容器
五. Radio 单选框
六. Checkbox 多选框
七. Input 输入框
八. Select选择器组件

Vue整合ElementUI

提示：这里我使用的Vue是2.0版本
在这里插入图片描述

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

下载elementui的依赖

 npm i element-ui -S

在src下的main.js中指定当前项目中使用elementui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

将elementui注册到vue实例上

 Vue.use(ElementUI);

在这里插入图片描述

一. 按钮组件

1.默认样式按钮
  <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>

2.简洁按钮 plain 鼠标移动上去才会显示背景颜色
  <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>

3.使用圆角按钮 round
  <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>

4.图标按钮  idco：具体要显示的图标
  <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>

在这里插入图片描述
按钮组件的详细使用

日后使用element ui的相关组件时需要注意的是所有组件都是el-组件名称开头

创建按钮：<el-button>默认按钮</el-button>

组件属性使用

总结：在element中所有的组件的属性使用都是直接将属性名=属性值方式写在对应的组件标签上，boolean类型的属性默认为false可以简写一个属性名字表示为true。

在这里插入图片描述
示例

    <div>
      <h1>创建简单的按钮</h1>   
      <el-button>默认按钮</el-button>

      <h1>使用按钮的属性</h1>
      <el-button type="primary" size="mini" round="true"  loading>primary</el-button>
      <el-button type="primary" size="small" round="true" disabled>primary</el-button>
      <el-button type="primary" size="medium" circle icon="el-icon-delete-solid"></el-button>
    </div>

在这里插入图片描述
按钮组的使用

按钮组的使用就是通过<el-button-group>把多个按钮包裹起来

 	  <el-button-group>
        <el-button type="primary" plain round icon="el-icon-back"></el-button>
        <el-button type="primary" plain round icon="el-icon-right"></el-button>
      </el-button-group>

在这里插入图片描述

二. Link 文件链接组件

文字链接组件的创建

 <el-link>默认链接</el-link>

文字链接组件属性的使用
在这里插入图片描述
示例

  <div>
    <h1>使用文字链接组件</h1>
    <el-link type="primary" disabled icon="el-icon-eleme">默认链接</el-link>
    <el-link type="success" icon="el-icon-eleme">默认链接</el-link>
    <el-link type="warning" icon="el-icon-eleme">默认链接</el-link>
    <el-link type="info" :underline="false" icon="el-icon-eleme">默认链接</el-link>
  </div>

注意：有些属性需要通过Vue的绑定语法给组件赋值 :underline="false" 否则则会抛出异常

在这里插入图片描述

三. Layout(栅格) 布局组件的使用

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

使用Layout组件

el-row代表一行，行里面放的自然就是列el-col，span代表栅格占据的列数，是el-col的一个属性由于它是我们elementui中的一个属性这个属性必须要求我们写数字所以赋值的时候需要带上：。如果span等于8表示一列占用8份如果超过8份则会换行显示。

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

<el-row>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
    </el-row>

    <el-row>
      <el-col :span="7"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="5"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="4"><div style="border: 1px red solid">占用6份</div></el-col>
    </el-row>

    <el-row>
      <el-col :span="3"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="1"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="14"><div style="border: 1px red solid">占用6份</div></el-col>
 </el-row>

在这里插入图片描述

注意：

在一个布局组件好是由row和col组合而成
在使用时要区分 row属性和col属性

行属性的使用
在这里插入图片描述

    <el-row :gutter="10" tag="span">
      <el-col :span="6" ><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
    </el-row>

:gutter=“10”:表示格栅间隔
在这里插入图片描述
:tag=“span”：表示当前行使用哪种标签去构建

列属性的使用

在这里插入图片描述
偏移属性offset

   <el-row>
      <el-col :span="12" offset="4"><div style="border: 1px blue solid">我是占用12份</div></el-col>
      <el-col :span="12"><div style="border: 1px blue solid">我是占用12份</div></el-col>
    </el-row>

在这里插入图片描述
向右移动push

    <el-row>
      <el-col :span="12" push="6"><div style="border: 1px blue solid">我是占用12份</div></el-col>
      <el-col :span="12" push="0"><div style="border: 1px red solid">我是占用12份</div></el-col>
    </el-row>

在这里插入图片描述

注意以上两者的区别

四. Container 布局容器

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

创建一个布局容器

    <el-container>
    
    </el-container>

容器中包含的子元素

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

嵌套容器

    <el-container>
      <el-header><div><h1>我是标题</h1></div></el-header>
      <el-container>
        <el-aside><div><h1>我是菜单</h1></div></el-aside>
        <el-main><div><h1>我是内容</h1></div></el-main>
      </el-container>
      <el-footer><div><h1>我是底部</h1></div></el-footer>
    </el-container>

在这里插入图片描述
容器的属性

注意：当子元素中没有 el-header 或 el-footer 时容器排列为水平

在这里插入图片描述

五. Radio 单选框

在一组备选项中进行单选

创建一个单选按钮

   <el-radio >男</el-radio>
   <el-radio>女</el-radio>

在这里插入图片描述

此时虽然创建出来两个单选按钮但是不能进行选中和取消，这里必须配合我们的value / v-model和label属性进行使用。

<template>
    <div>
      <h1>radio组件的使用</h1>
      <!--组件创建-->
      <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 v-model="label" name="sex" disabled label="男">男</el-radio>
   <el-radio v-model="label" name="sex" label="女">女</el-radio>

总结：属性的使用还是直接写在对应的组件标签上以 属性名 = 属性值 的方式使用。

Radio事件的使用

在这里插入图片描述

事件的使用也和属性的使用是一致的都是写在对应的组件标签上
事件在使用时必须使用vue中绑定事件方式进行使用如@事件名=事件处理函数(绑定在vue组组件中对应函数)

      <el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
      <el-radio v-model="label" @change="aa" name="sex" label="女">女</el-radio>

<script>
    export default {
        methods:{
            aa(){
              console.log(this.label)
            }
        }
    }
</script>

在这里插入图片描述
Radio单选按钮组的使用

在这里插入图片描述

    <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>
    
    <script>
    export default {
        data(){
          return{
            radio: '3'
          }
       },

        methods:{
            bb(){
              console.log(this.radio)
            }
        }
    }
</script>

在这里插入图片描述

六. Checkbox 多选框

一组备选项中进行多选

创建Checkbox

  <el-checkbox>北京</el-checkbox>

使用<el-checkbox>标签去构建我们的checkbox日后我们checkbox的值可以通过v-model进行绑定(true|false)。

属性和事件的使用

 	  <el-checkbox v-model="checked" @change="aa" :true-label=1>北京</el-checkbox>
      <el-checkbox v-model="checked" @change="aa" :true-label=2>洛阳</el-checkbox>
      <el-checkbox v-model="checked" @change="aa" :true-label=3>上海</el-checkbox>
      <el-checkbox v-model="checked" @change="aa" :true-label=4>曹县</el-checkbox>
      
      <script>
    export default {
        name: "Checkbox",
        data(){
          return{
            checked:1
          }
        },
        methods:{
          aa(){
            console.log("选中节点的true-label为："+this.checked)
          }
        }
    }
</script>

在这里插入图片描述
复选框组的使用

适用于多个复选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

 <el-checkbox-group v-model="checkList" @change="aa" :max="2">
      <el-checkbox :label=1>北京</el-checkbox>
      <el-checkbox :label=2>洛阳</el-checkbox>
      <el-checkbox :label=3>上海</el-checkbox>
      <el-checkbox :label=4>曹县</el-checkbox>
 </el-checkbox-group>
 
<script>
    export default {
        name: "Checkbox",
        data(){
          return{
            checkList:[]
          }
        },
        methods:{
          aa(){
            console.log("选中节点的true-label为："+this.checkList)
          }
        }
    }
</script>

在这里插入图片描述

七. Input 输入框

通过鼠标或键盘输入字符

创建

<el-input> </el-input>

Input属性的使用

在这里插入图片描述

 	<el-input type="textarea" v-model="name" disabled show-password></el-input>
    <el-input type="textarea" show-word-limit textarea :maxlength="10000" v-model="age"></el-input>
    <el-input type="text" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="userName"></el-input>
    <el-input type="text" prefix-icon="el-icon-paperclip"></el-input>

在这里插入图片描述
事件的使用

在这里插入图片描述

    <el-input v-model="userSex" @input="ccc"></el-input>
   
    <script>
    export default {
        name: "Input",
        methods:{
            ccc(value){
              console.log(value)
            },
        }
    }
</script>

在这里插入图片描述
方法的使用

在这里插入图片描述

 <el-button @click="focusInputs">focus方法</el-button>

 <script>
    export default {
        methods:{
            focusInputs(){
              this.$refs.inputs.select();
          }
        }
    }
</script>

在这里插入图片描述

总结：

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

注意：在elementui中所有组件都存在属性和方法
属性：直接写在对应的组件标签上使用方式：属性名=属性值方式
事件：直接使用vue绑定事件方式写在对应的组件标签上使用方式：@事件名=vue中事件处理函数
方法：1.在对应组件标签上使用 ref=组件别名 2.通过使用this.$refs.组件别名.方法名() 进行调用。

八. Select选择器组件

当选项过多时，使用下拉菜单展示并选择内容。

选择器组件的使用

数据写死在页面上

  	 <el-select v-model="cityName">
        <el-option value="北京">北京</el-option>
        <el-option value="北京">上海</el-option>
        <el-option value="北京">澳门</el-option>
        <el-option value="北京">曹县</el-option>
      </el-select>

注意：要求下拉列表中必须存在option的value属性值，select中必须使用v-modek进行数据绑定

如何动态获取数据

      <el-select v-model="cityId">
        <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
      </el-select>
      
      <script>
    export default {
        data(){
          return{
            cityId:'',
            
            options:[
              {id:'1',name:'研发部'},
              {id:'2',name:'开发部'},
              {id:'3',name:'小卖部'},
              {id:'4',name:'销售部'},
            ]
          }
        },
    }
</script>

在这里插入图片描述

事件与属性的使用


	  <el-select v-model="cityId" @change="aa" multiple clearable>
        <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
      </el-select>
      
      <script>
    export default {
        name: "Select",
        data(){
          return{
            cityId:'',
            options:[
              {id:'1',name:'研发部'},
              {id:'2',name:'开发部'},
              {id:'3',name:'小卖部'},
              {id:'4',name:'销售部'},
            ]
          }
        },

        methods:{
          aa(value){
            console.log(value)
          }
        }

    }
</script>

在这里插入图片描述
方法的使用

      <el-select v-model="city" ref="selects">
        <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
      </el-select>
      <el-button @click="bbb">测试方法</el-button>
      
      <script>
    export default {
        name: "Select",
        data(){
          return{
            city:'',

            options:[
              {id:'1',name:'研发部'},
              {id:'2',name:'开发部'},
              {id:'3',name:'小卖部'},
              {id:'4',name:'销售部'},
            ]
          }
        },

        methods:{
          bbb(){
            this.$refs.selects.focus();
          }
        }

    }
</script>

在这里插入图片描述

剩下的组件大家可以下去自行练习！感谢观看！ 在这里插入图片描述

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

vue+element ui实现好看的登录界面

ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...