搜索框

<el-main>
  <div style="margin: 10px 0">
    <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
    <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message"></el-input>
    <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position"></el-input>
    <el-button class="ml-5" type="primary">搜索</el-button>
  </div>

新增删除、导入、导出按钮

table上添加代码如下：

<div style="margin: 10px 0">
  <el-button type="primary"><i class="el-icon-plus"></i> 新增</el-button>
  <el-button type="danger"><i class="el-icon-delete"></i> 批量删除</el-button>
  <el-button type="primary"><i class="el-icon-upload2"></i> 导入</el-button>
  <el-button type="primary"><i class="el-icon-download"></i> 导出</el-button>
</div>

注：搜索框和增删导入导出按钮的style设置为margin：10px 0 上下边距为10，左右边距为0 即默认值。

补充知识：

两行margin的10px上下边距会重叠，即上下相连的两个盒子之间的空白，需要相互抵消时使用margin，而padding则在上下相连的两个盒子之间的空白，希望等于两者之和时使用。如15px + 20px的padding，将得到35px的空白。

margin是用来隔开元素与元素的间距；

padding是用来隔开元素与内容的间隔。

margin用于布局分开元素使元素与元素互不相干；

padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

实现效果：

表格设置

<el-table :data="tableData" border stipe :header-cell-class-name="headerBg">
  <el-table-column prop="date" label="日期" width="140">
  </el-table-column>
  <el-table-column prop="name" label="姓名" width="120">
  </el-table-column>
  <el-table-column prop="address" label="地址">
  </el-table-column>
  <el-table-column label="操作">
    <el-button type="success"><i class="el-icon-edit"></i> 编辑</el-button>
    <el-button type="danger"><i class="el-icon-delete"></i> 删除</el-button>
  </el-table-column>
</el-table>

设置边框：

border stipe 带边框表格（border）和带斑马纹表格（stripe）方法

设置表头颜色：

在el-table中使用 :header-cell-class-name="headerBg"
在return中返回： headerBg: 'headerBg'

export default {
  name: 'HomeView',
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item),
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,  // 默认为true，显示logo后的项目名称
      headerBg: 'headerBg'
    }
  },

在style 中添加样式：

<style>
  .headerBg {
    background: #f8f8f9!important;
  }
</style>

添加表格内操作：

<el-table-column label="操作">
  <el-button type="success"><i class="el-icon-edit"></i> 编辑</el-button>
  <el-button type="danger"><i class="el-icon-delete"></i> 删除</el-button>
</el-table-column>

实现效果：

<div style="padding: 10px 0;">
  <el-pagination
          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
  </el-pagination>
</div>

page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[5, 10, 15, 20]表示四个选项，每页显示 5个，10 个，15 个或者 20 个。

page-size 表示当前每页显示的条数

使用了size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。

参考官方文档：Element - The world's most popular Vue UI framework

页签/Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">系统管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  </el-breadcrumb>
</div>

效果：