【JavaWeb学习-第四章（3）】Vue组件库Element & Vue实际应用

---

1. Element介绍

    之前讲解过前端开发模式MVVM，之前学习的vue是侧重于VM开发的，主要用于数据绑定到视图的，那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架，主要用于开发 美观的页面。

    Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。
    Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是原始html标签构建的页面和ElementUI提供的效果对比：可以发现ElementUI提供的各式各样好看的按钮

    ElementUI的学习方式和我们之前的学习方式不太一样，对于ElementUI，我们作为一个后台开发者，只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中，并且做一些修改即可。其官网地址：https://element.eleme.cn/#/zh-CN。

    本篇文章主要学习的是ElementUI中提供的常用组件，至于其他组件大家可以通过本篇文章讲到的这几个组件的学习，掌握到ElementUI的学习技巧，然后课后自行学习。

2. 快速入门

掌握ElementUI的快速入门

    首先，先要安装ElementUI的组件库，打开VS Code，停止之前的项目，然后在命令行输入如下命令：

npm install [email protected]

具体操作如下图所示：

    然后我们需要在main.js这个入口js文件中引入ElementUI的组件库，其代码如下：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

    具体操作如图所示：

    然后我们需要按照vue项目的开发规范，在src/views目录下创建一个vue组件文件，注意组件名称后缀是.vue，并且在组件文件中编写之前介绍过的基本组件语法，代码如下：

<template>

template>
<script>
export default {

};

script>

<style>

style>

    具体操作如图所示：

    最后我们只需要去ElementUI的官网，找到组件库，然后找到按钮组件，抄写代码即可，具体操作如下图所示：

    然后找到按钮的代码，如下图所示：

    紧接着我们复制组件代码到我们的vue组件文件中，操作如下图所示：

    最后，我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件，具体操作步骤如下：

    然后，App.vue组件中的具体代码如下，代码是我们通过上述步骤引入element-view组件时自动生成的。

<template> 
	<div id="app">
		
		<element-view>element-view>
	div>
template>
<script>
import ElementView from './views/Element/ElementView.vue'
export default {
	components: { ElementView },
	data(){
		return {
			"message":"hello world"
		}
	}
}
script>

<style>
style>

    然后运行我们的vue项目，浏览器直接访问之前的7000端口，展示效果如下图所示：

到此，我们ElementUI的入门程序编写成功。

3. Element组件

接下来学习一下ElementUI的常用组件，对于组件的学习比较简单，我们只需要参考官方提供的代码，然后复制粘贴即可。

3.1. Table表格

3.1.1. 组件演示

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

接下来通过代码来演示：

首先我们需要来到ElementUI的组件库中，找到表格组件，如下图所示：

    然后复制代码到我们之前的ElementVue.vue组件中，需要注意的是，我们组件包括了3个部分，如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示：

template模板部分：

script脚本部分

ElementView.vue组件文件整体代码如下：

<template>
  <div>
    
    <el-row>
      <el-button>默认按钮el-button>
      <el-button type="primary">主要按钮el-button>
      <el-button type="success">成功按钮el-button>
      <el-button type="info">信息按钮el-button>
      <el-button type="warning">警告按钮el-button>
      <el-button type="danger">危险按钮el-button>
    el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> el-table-column>
      <el-table-column prop="address" label="地址"> el-table-column>
    el-table>
  div>
template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
script>

<style>
style>

此时回到浏览器，我们页面呈现如下效果：

3.2. Pagination分页

3.2.1. 组件演示

Pagination: 分页组件，主要提供分页工具条相关功能。其展示效果图下图所示：

接下来通过代码来演示功能：

首先在官网找到分页组件，选择带背景色分页组件，如下图所示：

然后复制代码到我们的ElementView.vue组件文件的template中，拷贝如下代码：

<el-pagination
	background
	layout="prev, pager, next"
	:total="1000">
el-pagination>

完整代码如下：

<template>
  <div>
    
    <el-row>
      <el-button>默认按钮el-button>
      <el-button type="primary">主要按钮el-button>
      <el-button type="success">成功按钮el-button>
      <el-button type="info">信息按钮el-button>
      <el-button type="warning">警告按钮el-button>
      <el-button type="danger">危险按钮el-button>
    el-row>
    
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> el-table-column>
      <el-table-column prop="address" label="地址"> el-table-column>
    el-table>
    
    <el-pagination background layout="prev, pager, next" :total="1000">
    el-pagination>
  div>
template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
script>

<style>
style>

浏览器打开呈现如下效果：

3.2.2. 组件属性详解

对于分页组件我们需要关注的是如下几个重要属性（可以通过查阅官网组件中最下面的组件属性详细说明得到）：
    background: 添加背景颜色，也就是上图蓝色背景色效果。
    layout: 分页工具条的布局，其具体值包含 sizes , prev , pager , next , jumper , -> , total , slot 这些值
    total: 数据的总数量
    
然后根据官方分页组件提供的layout属性说明，如下图所示：

修改layout属性如下：

layout="sizes,prev, pager, next,jumper,total" 

浏览器打开呈现如下效果：

发现在原来的功能上，添加了一些额外的功能，其具体对应关系如下图所示：

3.2.3. 组件事件详解

对于分页组件，除了上述几个属性，还有2个非常重要的事件我们需要去学习：
    size-change ： pageSize 改变时会触发
    current-change ：currentPage 改变时会触发

其官方详细解释含义如下图所示：

对于这2个事件的参考代码，我们同样可以通过官方提供的完整案例中找到，如下图所示：

然后我们找到对应的代码，首先复制事件，复制代码如下：

@size-change="handleSizeChange"
@current-change="handleCurrentChange"

此时Panigation组件的template完整代码如下：

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="sizes,prev, pager, next,jumper,total"
      :total="1000"
    >
    el-pagination>

紧接着需要复制事件需要的2个函数，需要注意methods属性和data同级，其代码如下：

 methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },

此时Panigation组件的script部分完整代码如下：

<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
script>

回到浏览器中，我们F12打开开发者控制台，然后切换当前页码和切换每页显示的数量，呈现如下效果：

3.3. Dialog对话框

3.3.1. 组件演示

Dialog: 在保留当前页面状态的情况下，告知用户并承载相关操作。其企业开发应用场景示例如下图所示：

首先我们需要在ElementUI官方找到Dialog组件，如下图所示：

然后复制如下代码到我们的组件文件的template模块中

<br><br>

    
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialogel-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        >el-table-column>
        
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        >el-table-column>
        
        <el-table-column property="address" label="地址">el-table-column>
      el-table>
    el-dialog>

并且复制数据模型script模块中：

      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,

其完整的script部分代码如下：

<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
script>

然后我们打开浏览器，点击按钮，呈现如下效果：

3.3.2. 组件属性详解

那么ElementUI是如何做到对话框的显示与隐藏的呢？是通过如下的属性：

• visible.sync ：是否显示 Dialog

具体释意如下图所示：

    visible属性绑定的dialogTableVisble属性一开始默认是false，所以对话框隐藏，然后我们点击按钮，触发事件（显示对话框）；修改属性值为true，然后对话框visible属性值为true，网页打开后对话框会直接呈现出来。

3.4. Form表单

3.4.1. 组件演示

Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
    表单在我们前端的开发中使用的还是比较多的，接下来我们学习这个组件，与之前的流程一样，我们首先需要在ElementUI的官方找到对应的组件示例：

如下图所示

我们的需求效果是：在对话框中呈现表单内容，类似如下图所示：

所以，首先我们先要根据上一小结所学习的内容，制作一个新的对话框，其代码如下：

<br><br>

<el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的Dialogel-button>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">el-dialog>

    还需要注意的是，针对这个新的对话框，我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示，代码如下：

dialogFormVisible: false,

完整代码如下：

<template>
  <div>
    
    <el-row>
      <el-button>默认按钮el-button>
      <el-button type="primary">主要按钮el-button>
      <el-button type="success">成功按钮el-button>
      <el-button type="info">信息按钮el-button>
      <el-button type="warning">警告按钮el-button>
      <el-button type="danger">危险按钮el-button>
    el-row>
    
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> el-table-column>
      <el-table-column prop="address" label="地址"> el-table-column>
    el-table>
    
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="sizes,prev, pager, next,jumper,total"
      :total="1000"
    >
    el-pagination>

    <br /><br />
    
    
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialogel-button>
    <br /><br />
    
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialogel-button>
    <el-dialog title="Form表单" :visible.sync="dialogFormVisible"> el-dialog>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        >el-table-column>

        <el-table-column
          property="name"
          label="姓名"
          width="200"
        >el-table-column>

        <el-table-column property="address" label="地址">el-table-column>
      el-table>
    el-dialog>
  div>
template>
<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
script>

<style>
style>

打开浏览器，此时呈现如图所示的效果：

    然后复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中，但是，此处官方提供的表单项标签太多，所以我们只需要保留前面3个表单项组件，其他多余的删除，所以最终template部分代码如下：

<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name">el-input>
        el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai">el-option>
            <el-option label="区域二" value="beijing">el-option>
          el-select>
        el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            >el-date-picker>
          el-col>
          <el-col class="line" :span="2">-el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            >el-time-picker>
          el-col>
        el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建el-button>
          <el-button>取消el-button>
        el-form-item>
      el-form>
el-dialog>

    观察上述代码，我们发现其中表单项标签使用了v-model双向绑定，所以我们需要在vue的数据模型中声明变量，同样可以从官方提供的代码中复制粘贴，但是我们需要去掉我们不需要的属性，通过观察上述代码，我们发现双向绑定的属性有4个，分别是form.name，form.region，form.date1，form.date2，所以最终数据模型如下：

//表单案例的数据双向绑定
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
      },

    同样，官方的代码中，在script部分中，还提供了onSubmit函数，表单的立即创建按钮绑定了此函数，我们可以输入表单的内容，而表单的内容是双向绑定到form对象的，所以我们修改官方的onSubmit函数如下即可，而且我们还需要关闭对话框，最终函数代码如下：

 onSubmit() {
      console.log(this.form); //输出表单内容到控制台
      this.dialogFormVisible = false; //关闭表案例的对话框
    },

然后打开浏览器，我们打开对话框，并且输入表单内容，点击立即创建按钮，呈现如下效果：

最终vue组件完整代码如下，同学们可以针对form表单案例，参考该案例对应的template部分和script部分代码

<template>
  <div>
    
    <el-row>
      <el-button>默认按钮el-button>
      <el-button type="primary">主要按钮el-button>
      <el-button type="success">成功按钮el-button>
      <el-button type="info">信息按钮el-button>
      <el-button type="warning">警告按钮el-button>
      <el-button type="danger">危险按钮el-button>
    el-row>
    
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> el-table-column>
      <el-table-column prop="address" label="地址"> el-table-column>
    el-table>
    
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="sizes,prev, pager, next,jumper,total"
      :total="1000"
    >
    el-pagination>

    <br /><br />
    
    
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialogel-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        >el-table-column>

        <el-table-column
          property="name"
          label="姓名"
          width="200"
        >el-table-column>

        <el-table-column property="address" label="地址">el-table-column>
      el-table>
    el-dialog>
    <br /><br />
    
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套Form的 Dialogel-button
    >

    <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name">el-input>
        el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai">el-option>
            <el-option label="区域二" value="beijing">el-option>
          el-select>
        el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            >el-date-picker>
          el-col>
          <el-col class="line" :span="2">-el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            >el-time-picker>
          el-col>
        el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建el-button>
          <el-button>取消el-button>
        el-form-item>
      el-form>
    el-dialog>
  div>
template>
<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit() {
      console.log(this.form); //输出表单内容到控制台
      this.dialogFormVisible = false; //关闭表案例的对话框
    },
  },

  data() {
    return {
      //表单案例的数据双向绑定
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
      },
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false, //控制form表单案例的对话框
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
script>

<style>
style>

4. 案例

4.1. 案例需求

资料/页面原型/tlias智能学习辅助系统/首页.html 文件 ， 浏览器打开参考资料，点击页面中的左侧栏的员工管理，如下所示：

需求说明：

1. 制作类似格式的页面，即上面是标题，左侧栏是导航，右侧是数据展示区域
2. 右侧需要展示搜索表单
3. 右侧表格数据是动态展示的，数据来自于后台

实际示例效果如下图所示：

数据Mock地址：http://mock.apifox.cn/m1/3128855-0-default/emp/list，浏览器打开，数据格式如下图所示：

通过观察数据，我们发现返回的json数据的data属性中的内容，才是返回的人员列表信息

4.2. 案例分析

整个案例相对来说功能比较复杂，需求较多，所以我们需要先整体，后局部细节。整个页面我们可以分为3个部分，如下图所示：

一旦这样拆分，那么我们的思路就清晰了，主要步骤如下：
    ① 创建页面，完成页面的整体布局规划
    ② 然后分别针对3个部分进行各自组件的具体实现
    ③ 针对于右侧核心内容展示区域，需要使用异步加载数据，以表格渲染数据

4.3. 代码实现

4.3.1. 环境搭建

    首先打开VS Code软件，在views目录下创建 tlias/EmpView.vue 这个vue组件，并且编写组件的基本模板代码，其效果如下图所示：其中模板代码在之前的案例中已经提供，此处不再赘述

    并且需要注意的是，我们默认访问的是App.vue这个组件，而我们App.vue这个组件之前是引入了element-view这个组件，此时我们需要修改成引入emp-view这个组件，并且注释掉之前的element-view这个组件，此时App.vue整体代码如下：

<template>
  <div id="app">
    
    
    <emp-view>emp-view>
  div>
template>
<script>
// import ElementView from "./views/Element/ElementView.vue";
import EmpView from './views/tlias/EmpView.vue'
export default {
  // components: { ElementView },
  components: { EmpView },
  data() {
    return {
      message: "hello world",
    };
  },
};
script>

<style>
style>

4.3.2. 整体布局

此处肯定不需要我们自己去布局的，我们直接来到ElementUI的官网，找到布局组件，如下图所示：

从官网提供的示例，我们发现由现成的满足我们需求的布局，所以我们只需要做一位代码搬运工即可。

拷贝官方提供的如下代码直接粘贴到我们EmpView.vue组件的template模块中即可：

	
    <el-container>
      <el-header>Headerel-header>
      <el-container>
        <el-aside width="200px">Asideel-aside>
        <el-main>Mainel-main>
      el-container>
    el-container>

打开浏览器，此时呈现如下效果：

    因为我们没有拷贝官方提供的css样式，所以和官方案例的效果不太一样，但是我们需要的布局格式已经有，具体内容我们有自己的安排。首先我们需要调整整体布局的高度，所以我们需要在上添加一些样式，代码如下：

<el-container style="height: 700px; border: 1px solid #eee">

到此我们布局功能就完成了

4.3.3. 顶部标题

对于顶部，需要实现的效果如下图所示：

所以需要修改顶部的文本内容，并且提供背景色的css样式，具体代码如下：

<el-header style="font-size:40px;background-color: rgb(238, 241,246)">tlias 智能学习辅助系统el-header>

此时浏览器打开，呈现效果如下图所示：

至此，顶部标题就搞定了

此时，整体代码如下：

<template>
  <div>
    
    
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size:40px;background-color: rgb(238, 241,246)">tlias 智能学习辅助系统el-header>
      <el-container>
        <el-aside width="200px">Asideel-aside>
        <el-main>Mainel-main>
      el-container>
    el-container>

  div>
template>  

<script>
export default {};
script>

<style>
style>

4.3.4. 左侧导航栏

接下来我们来实现左侧导航栏，那么还是在上述布局组件中提供的案例，找到左侧栏的案例，如下图所示：

    所以我们依然只需要搬运代码，然后做简单修改即可。官方提供的导航太多，我们不需要，所以我们需要做删减，在我们的左侧导航栏中粘贴如下代码即可：

<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message">i>导航一
template>
<el-menu-item index="1-1">选项1el-menu-item>
<el-menu-item index="1-2">选项2el-menu-item>
el-submenu>
el-menu>

删减前后对比图：

然后我们打开浏览器，展示如下内容：

最后我们只需要替换文字内容即可。

此时整体代码如下：

<template>
  <div>
    
    
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统
    el-header>
      <el-container>
        <el-aside width="200px">
          
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message">i>导航一template
              >
              
              <el-menu-item index="1-1">选项1el-menu-item>
              <el-menu-item index="1-2">选项2el-menu-item>
              
            el-submenu>
          el-menu>
        el-aside>
        <el-main>Mainel-main>
      el-container>
    el-container>
  div>
template>  

<script>
export default {

};
script>

<style>
style>

4.3.5. 右侧核心内容

4.3.5.1. 表格编写

    右侧显示的是表单和表格，首先我们先来完成表格的制作，我们同样在官方直接找表格组件，也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例，如下图所示：

然后找到表格的代码，复制到我们布局容器的主题区域，template模块代码如下

 <el-table :data="tableData">
   <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>

表格是有数据模型的绑定的，所以我们需要继续拷贝数据模型，代码如下：

  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },

浏览器打开，呈现如下效果：

但是这样的表格和数据并不是我们所需要的，所以，接下来我们需要修改表格，添加列，并且修改列名。代码如下：

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

需要注意的是，我们列名的prop属性值的内容并不是乱写的，因为我们将来需要绑定后台的数据的，所以如下图所示：

并且此时我们data()中之前的数据模型就不可用了，所以需要清空数据，设置为空数组，代码 如下：

  data() {
    return {
      tableData: [
        
      ],
    };
  },

此时打开浏览器，呈现如下效果：

此时整体页面代码如下：

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

              <el-menu-item index="1-1">选项1el-menu-item>
              <el-menu-item index="1-2">选项2el-menu-item>

            el-submenu>
          el-menu>
        el-aside>
        <el-main>
          <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>

4.3.5.2. 表单编写

在表格的上方，还需要如下图所示的表单：

所以接下来，需要去ElementUI官网，在表单组件中找到与之类似的示例，加以修改从而打成我们希望的效果，官方示例如下图所示：

所以我们直接拷贝代码主体区域的table组件的上方即可，并且我们需要修改数据绑定的的变量名，最终代码如下：

<el-form :inline="true" :model="searchForm" class="demo-forminline">
<el-form-item label="姓名">
<el-input v-model="searchForm.name" placeholder="姓名">elinput>
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>

代码修改前后对比图：

既然我们表单使用v-model进行数据的双向绑定了，所以我们紧接着需要在data中定义searchForm的数据模型，代码如下：

  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
    };
  },

    而且，表单的提交按钮，绑定了onSubmit函数，所以我们还需要在methods中定义onSubmit函数，代码如下：

    注意的是methods属性需要和data属性同级

  methods: {
    onSubmit: function () {
      console.log(this.searchForm);
    },
  },

浏览器打开如图所示：

可以发现我们还缺少一个时间，所以可以从elementUI官网找到日期组件，如下图所示：

参考官方代码，然后在我们之前的表单中添加一个日期表单，具体代码如下：

   <el-form-item label="入职日期">
     <el-date-picker
       v-model="searchForm.entrydate"
       type="daterange"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
     >
     el-date-picker>
   el-form-item>

我们添加了双向绑定，所以我们需要在data的searchForm中定义出来，需要注意的是这个日期包含2个值，所以我们定义为数组，代码如下：

      searchForm: {
        name: "",
        gender: "",
        entrydate: [],
      },

此时我们打开浏览器，填写表单，并且点击查询按钮，查看浏览器控制台，可以看到表单的内容，效果如下图所示：

此时完整代码如下所示：

<template>
  <div>
    
    
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >tlias 智能学习辅助系统
      el-header>
      <el-container>
        <el-aside width="200px">
          
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message">i>系统信息管理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 label="入职日期">
              <el-date-picker
                v-model="searchForm.entrydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              el-date-picker>
            el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询el-button>
            el-form-item>
          el-form>
          
          <el-table :data="tableData" border>
            <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: [],
      searchForm: {
        name: "",
        gender: "",
        entrydate: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      console.log(this.searchForm);
      //   alert("查询数据");
    },
  },
};
script>

<style>
style>

4.3.5.3. 分页工具栏

分页条我们之前做过，所以我们直接找到之前的案例，复制到表格代码的下方即可，代码如下：
其中template模块代码如下：

  <br>
  
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    background
    layout="sizes,prev, pager, next,jumper,total"
    :total="1000"
  >
  el-pagination>

同时methods中需要声明2个函数，代码如下：

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

此时打开浏览器，效果如下图所示：

此时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)"
        >tlias 智能学习辅助系统
      el-header>
      <el-container>
        <el-aside width="200px">
          
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message">i>系统信息管理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 label="入职日期">
              <el-date-picker
                v-model="searchForm.entrydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              el-date-picker>
            el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询el-button>
            el-form-item>
          el-form>
          
          <el-table :data="tableData" border>
            <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>
          <br>
          
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="sizes,prev, pager, next,jumper,total"
            :total="1000"
          >
          el-pagination>
        el-main>
      el-container>
    el-container>
  div>
template>  

<script>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entrydate: [],
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit: function () {
      console.log(this.searchForm);
      //   alert("查询数据");
    },
  },
};
script>

<style>
style>

4.3.6. 异步数据加载

列表数据异步加载，并渲染展示

4.3.6.1. 异步加载数据

对于案例，我们只差最后的数据了，而数据的mock地址已经提供：http://mock.apifox.cn/m1/3128855-0-default/emp/list
我们最后要做的就是异步加载数据，所以我们需要使用axios发送ajax请求。

在vue项目中，对于axios的使用，分为如下2步：
    ① 安装axios: npm install axios
    ② 需要使用axios时，导入axios: import axios ‘axios’

接下来我们先来到项目的执行终端，然后输入命令，安装axios，具体操作如下图所示：

然后重启项目，来到我们的EmpView.vue组件页面，通过import命令导入axios，代码如下：

import axios 'axios';

    那么我们什么时候发送axios请求呢？页面加载完成，自动加载，所以可以使用之前的mounted钩子函数，并且我们需要将得到的员工数据要展示到表格，所以数据需要赋值给数据模型tableData，所以我们编写如下代码：

  mounted() {
    axios
      .get("http://mock.apifox.cn/m1/3128855-0-default/emp/list")
      .then((resp) => {
        this.tableData = resp.data.data; //响应数据赋值给数据模型
      });
  },

此时浏览器打开，呈现如下效果：

但是很明显，性别和图片的内容显示不正确，所以我们需要修复。

4.3.6.2. 性别内容展示修复

首先我们来到ElementUI提供的表格组件，找到如下示例：

我们仔细对比效果和功能实现代码，发现其中涉及2个非常重要的点：