Day2_vue集成elementUI完善布局

上一节，实现了从O到vue页面主体框架的搭建，这一节补充完善搜索框；新增、删除、导入、导出等按钮；表格设置；分页；面包屑的实现！

目录

搜索框

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

表格设置

设置边框：

设置表头颜色：

添加表格内操作：

Pagination 分页

页签/Breadcrumb 面包屑

---

同样参考官网： Element - The world's most popular Vue UI framework

 搜索组件，找到源代码，适配我们的页面布局！

搜索框

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