Element UI组件库在Vue中的使用方法详解

近期有些网友想要了解Element的相关情况，小编通过整理给您分析，同时介绍一下有关信息。

随着前端技术的不断发展，Vue.js作为一种轻量级且易于上手的前端框架，受到了越来越多开发者的青睐。为了提高开发效率和统一界面风格，许多开发者会选择使用组件库。Element UI作为一款基于Vue 2.0开发的桌面端组件库，提供了丰富的组件和灵活的配置选项，极大地简化了开发流程。本文将详细介绍Element UI组件库在Vue中的使用方法，并通过具体的示例来演示其应用。

一、引言

官方网站，element.eleme.cn

Element UI 是 Vue 的 UI 框架，是一个网站快速成型的工具和桌面端的组件库。该框架中提供的全部都是封装好的组件，方便我们快速地开发页面，底层其实就是对 vue 的封装。

二、安装并使用

1. 安装

① 先创建一个脚手架项目

② 下载 element-ui 依赖

npmielement-ui-S

③ 在 main.js 中引入 Element

importVuefrom'vue';
importElementUIfrom'element-ui';
import'element-ui/lib/theme-chalk/index.css';
importAppfrom'./App.vue';

Vue.use(ElementUI);

newVue({
el:'#app',
render:h=>h(App)
});

Vue.use(ElementUI) 声明在 Vue 脚手架中使用 ElementUI。

2. 使用

① 所有的 UI 都在这里，使用的时候直接在官网的组件里面去找就可以了。

② 复制代码，并粘贴到自己的 div 中。

Element UI 中所有的组件都是以 el-组件名开头的，所有的属性都写在组件标签上，组件属性可以在官方文档中查询！

三、常见组件说明

1. 基础组件

2. 布局组件

通过基础的 24 分栏（栅格），迅速简便地创建布局。在 Element UI 中布局组件将页面划分为多个行 row，每行最多分为 24 列 col。

注意区分行的属性和列的属性，它们是不一样的！

offset 用于设置栅格的偏移量，指定栅格从第几列起开始排列，属性值为栅格空开的列数。push 属性用于指定栅格右移的列数，它和 offset 有点像，不过它的移动并不会影响到后面栅格的位置（碰到后面的栅格，那就直接压上去重合），而 offset 的移动则会推着后面的栅格往后走（碰到后面的栅格，直接挤走）。

3. 布局容器

在实际开发中，需要将布局组件放到布局容器中去使用，布局容器 Container 可以帮助我们快速搭建页面的基本结构。

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

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container，el-container 可以嵌套使用，嵌套是为了把多个模块放在一起。

4. 选择框组件

① 单选框

男
女



备选1
备选2
备选3

data(){
return{
label:'2',
radio:'3'
}
},
methods:{
	fn(){
		alert()
	}
}

v-model 中的属性值与 标签属性 label 的属性值相对应时，就会选中当前按钮，label 里面的值必须是字符串，所以 data 中定义的所有数据，都必须加引号！

② 多选框

<template>
<div>
<el-checkbox-groupv-model="checkList">
<el-checkboxlabel="复选框A"></el-checkbox>
<el-checkboxlabel="复选框B"></el-checkbox>
<el-checkboxlabel="复选框C"></el-checkbox>
<el-checkboxlabel="禁用"disabled></el-checkbox>
<el-checkboxlabel="选中且禁用"disabled></el-checkbox>
</el-checkbox-group>
</div>
</template>

data(){
return{
checkList:['选中且禁用','复选框A']
}
}

多选框 label 选中状态的值，只有在 checkbox-group 或者绑定对象为 array 时才可以生效！

5. 输入框组件

给 A 组件加上ref=“组件别名”属性，当别的组件想调用 A 组件的方法时，可直接使用this.$ref.组件别名.方法名()进行调用！

6. 下拉框组件

注意点：
① v-model=“value”，可以绑定下拉框选中的值；
② :label，下拉框文本；
③ :value，一般为 item 的 id；
④ :key，一般为 item 的 id。

7. 日期选择器

8. 上传组件

将文件拖到此处，或点击上传