目录

步骤

基本页面布局

基本框架

页面布局

CSS样式

完善布局

效果展示

完整代码 

---

Element 的基本使用方式以及常见的组件已经了解完了，接下来要完成一个案例，通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。

案例：根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。

页面列表中的数据不是写死的，而是要基于 Axios 发送请求动态加载展示的，提供了服务端数据获取的地址，即 YAPI Pro平台提供的 MOCK 地址，访问后返回 JSON 格式的数据，需要将其渲染展示在列表页面中，最终制作出来的页面分为三个部分，上面是页头部分，下面分为左侧菜单栏和右侧主展示区域。 

MOCK地址：https://yapi.pro/mock/401965/user/getById

该地址来源于互联网，如有侵权请联系删除。

制作页面的思路是从全局到细节推进，具体操作步骤如下：

步骤

• 创建页面，完成页面的整体布局规划
• 布局中各个部分的组件实现
• 列表数据的异步加载，并渲染展示

基本页面布局

接下来着手开发页面，先创建一个页面并完成整体布局规划。

基本框架

打开 VS Code，在“View”目录下创建“tlias”目录，在该目录下创建“EmpView.vue”组件，组件包含“templates”（定义 HTML 页面模板，先定义根标签 div）、“script”（定义 view 中的数据模型和方法，即编写 JS 文件）、“style”（定义 CSS 样式代码）。

完成基本框架：

创建好组件后，在浏览器中访问，由于在 main.js 入口文件中引用的是之前的组件，现在要开发新的员工管理组件，所以在App.vue组件中将之前的引用注释掉

定义新的“emp-view”标签，访问项目时即为“emp-view”组件，但此时组件内无内容。 

页面布局

接下来编写页面布局，页面布局分为三个部分，可使用 Element 提供的布局组件，其中有“el_container”（外层容器）、“el_header”（顶栏容器）、“el_aside”（侧边栏容器）、“el_main”（主要区域容器）、“el_footer”（底栏容器）。

找到所需页面布局，点击显示代码将布局拷贝过来粘贴在 div 区域，由于未加样式和组件，页面无效果。

CSS样式

接着加入 CSS 样式，在外层布局容器“el_container”中通过 style 设置样式，指定容器高度和边框，将设置高度为 700，将顶栏替换为项目标题“tlias智能学习辅助系统”，设置字体大小为 40 像素，再设置顶栏背景颜色。（都可在官网参考）

完善布局

准备好顶栏结构后，准备侧边栏菜单，参照实例将菜单复制到“el_aside”区域，只保留需要的“选项一”和“选项二”，并修改菜单名字为“系统信息管理”、“部门管理”、“员工管理”。

然后制作右侧主展示区域，参考 Element 官网实例将表格内容复制到“el_main”区域，调整表格列名，

将资料中准备好的表格列内容复制过来，在表格渲染时要展示“data”数据模型，定义一个数组“tableData”。

效果展示

最后打开浏览器确认，页面最上面是页头部分，左侧是菜单，右侧是表格，基本网页布局完成。

完整代码 

EmpView.vue

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tlias 智能学习辅助系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1" style="background-color: rgb(215, 215, 215)">
              <template slot="title"><i class="el-icon-message"></i>系统信息管理 &nbsp;&nbsp; >></template>

              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table :data="tableData">
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180"></el-table-column>
            <el-table-column prop="gender" label="性别" width="140"></el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entryDate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updateTime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:[],
    };
  },
};
</script>

<style> </style>

---

END

---

学习自：黑马程序员——JavaWeb课程