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

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

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

2. 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

3. 分栏间隔：Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

4. 分栏偏移：通过制定 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