elementUI使用

安装

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

npm i element-ui -S
复制代码

引入 Element

可以引入整个 Element，或是根据需要仅引入部分组件。

Element

我用到的element的组件

全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 2000 });
复制代码

Layout 布局

使用单一分栏创建基础的栅格布局。col组件的span控制分栏的大小

 <el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row>
复制代码

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
分栏间隔：Row 组件提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

分栏偏移：通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

 <el-row :gutter="20"><!--分栏为6/24--><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><!--分栏为6/24,分栏的偏移栏数是6--><el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col></el-row>
复制代码

Container 布局容器

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

<el-container> // 外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。<el-header> // 顶栏容器。<el-aside> // 侧边栏容器。<el-main> // 主要区域容器。<el-footer> // 底栏容器。
复制代码

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外, el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container。

Icon图标

直接通过设置类名为 el-icon-iconName 来使用即可。例如：

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
复制代码

Table表格

列内容过长时，可以通过设置show-overflow-tooltip防止表格内容溢出。

<el-table-column show-overflow-tooltip label="名称" prop="name"></el-table-column>复制代码

转载于:https://juejin.im/post/5c1b71f3e51d4548ec65cf11

elementUI使用相关推荐

织梦引用html,html直接引用vue和element-ui的方法
短视频,站群系统,自媒体,达人种草一站服务这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细,采集软件,对大家的学习或工作具有一定的参考借鉴价 ...
在vue中使用Element-UI
Element-UI是一套基于Vue2.0的UI组件库,http://element.eleme.io/#/zh-CN/component/carousel 首先npm install element ...
Java项目:仿小米电子产品售卖商城系统(java+SpringBoot+Vue+MySQL+Redis+ElementUI)
源码获取:博客首页 "资源" 里下载! 项目描述:这是一个基于SpringBoot+Vue框架开发的仿小米电子产品售卖商城系统.首先,这是一个前后端分离的项目,代码简洁规范,注释说 ...
Java项目:角色权限后台脚手架系统(java+Springboot+Maven+myBaits-Plus+Vue+Element-UI+Mysql)
源码获取:博客首页 "资源" 里下载! Springboot框架+myBaits-Plus+MySQL实现的角色权限后台管理脚手架系统实战项目,实现的是所有系统最基础的后台管理功能 ...
elementUI源码修改的爬坑之旅
今天由于项目需要,想在Tree组件的前面增加一个icon图标,根据不同类型增加不同的图标,我修改了elementUI的源代码,发布到npm上去成功使用,记录下过程中所碰到的问题, 首先看下最后的效果: ...
vue实战(1)——解决element-ui中upload组件使用多个时无法绑定对应的元素
解决element-ui中upload组件使用多个时无法绑定对应的元素以前写的项目关于图片上传的都是单张或几张图片上传(主要是基于vue的element),图片路径都是固定写的,所以遇见过列表中多个 ...
editor修改样式 vue_vue+element-ui项目搭建实战
1.使用vue ui创建vue工程利用vue-cli提供的图形化工具快速搭建vue工程: 命令行运行:vue ui 工程结构说明 build:项目构建webpack(打包器)相关代码 config: ...
基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
Vue2.0中引入element-ui
1.在项目的Terminal中查看vue版本 vue -V 2.安装Element-UI模块 cnpm install element-ui --save 3.在项目的src/main.js中加入如 ...
Vue之Element-ui和Vue-cli的使用
Element-ui 单文件组件就像是一个个封装好的页面样板,我们可一把这些样板组合在一起形成一个完整的页面.就像QQ空间装扮一样,将个个样板放入QQ空间页面中组成自己风格的页面.而Element-u ...