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

发布时间：2023年12月28日

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 element-ui@2.15.3

具体操作如下图所示：

在这里插入图片描述

????然后我们需要在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">
		<!-- {{message}} -->
		<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>
    <!-- Button按钮 -->
    <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>
    <!-- Button按钮 -->
    <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>
    <!-- table表格 -->
    <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>
    <!-- pagination分页 -->
    <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完整代码如下：

<!-- Pagination分页 -->
<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>
<!--Dialog 对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-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>
<!-- Dialog对话框-Form表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的Dialog</el-button>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible"></el-dialog>

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

dialogFormVisible: false,

完整代码如下：

<template>
  <div>
    <!-- Button按钮 -->
    <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>
    <!-- table表格 -->
    <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>
    <!-- pagination分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="sizes,prev, pager, next,jumper,total"
      :total="1000"
    >
    </el-pagination>

    <br /><br />
    <!--Dialog 对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
    <br /><br />
    <!-- Dialog对话框-Form表单 -->
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-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>
    <!-- Button按钮 -->
    <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>
    <!-- table表格 -->
    <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>
    <!-- pagination分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="sizes,prev, pager, next,jumper,total"
      :total="1000"
    >
    </el-pagination>

    <br /><br />
    <!--Dialog 对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-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 />
    <!-- Dialog对话框-Form表单 -->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套Form的 Dialog</el-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 文件，~~ 浏览器打开参考资料，点击页面中的左侧栏的员工管理，如下所示：

在这里插入图片描述
需求说明：

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

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

在这里插入图片描述
数据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">
    <!-- {{message}} -->
    <!-- <element-view></element-view> -->
    <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>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

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

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

<!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
<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>
    <!-- 容器 -->
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <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">Aside</el-aside>
        <el-main>Main</el-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">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
</el-menu>

删减前后对比图：

在这里插入图片描述
然后我们打开浏览器，展示如下内容：

在这里插入图片描述
最后我们只需要替换文字内容即可。

此时整体代码如下：

<template>
  <div>
    <!-- 容器 -->
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <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-group>
          <template slot="title">分组一</template> -->
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <!-- </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu> -->
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>Main</el-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>
    <!-- 容器 -->
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <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">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-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>
    <!-- 容器 -->
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <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-group>
          <template slot="title">分组一</template> -->
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
              <!-- </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu> -->
            </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>
    <!-- 容器 -->
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <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-group>
          <template slot="title">分组一</template> -->
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
              <!-- </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu> -->
            </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个非常重要的点：
????<template> : 用于自定义列的内容
????slot-scope : 通过属性的row获取当前行的数据

所以接下来，我们可以通过上述的标签自定义列的内容即可，修改性别列的内容代码如下：

			<el-table-column label="性别" width="140">
              <template slot-scope="scope">
                {{ scope.row.gender == 1 ? "男" : "女" }}
              </template>
            </el-table-column>

此时打开浏览器，效果如下图所示：性别一列的值修复成功

在这里插入图片描述

4.3.6.3. 图片内容展示修复

????图片内容的修复和上述一致，需要借助<template>标签自定义列的内容，需要需要展示图片，直接借助标签即可，并且需要设置图片的宽度和高度，所以直接修改图片列的代码如下：

<el-table-column prop="image" label="图像" width="180">
<template slot-scope="scope">
<img :src="scope.row.image" width="100px" height="70px">
</template>
</el-table-column>

此时回到浏览器，效果如下图所示：图片展示修复成功

在这里插入图片描述
此时整个案例完整，其完整代码如下：

<template>
  <div>
    <!-- 容器 -->
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <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="230px" style="border: 1px solid #eee">
          <!-- 导航栏 -->
          <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">
              <template slot-scope="scope">
                <img :src="scope.row.image" width="100px" height="70px" />
              </template>
            </el-table-column>

            <el-table-column label="性别" width="140">
              <template slot-scope="scope">
                {{ scope.row.gender == 1 ? "男" : "女" }}
              </template>
            </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>
import axios from "axios";
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("查询数据");
    },
  },
  mounted() {
    axios
      .get("http://mock.apifox.cn/m1/3128855-0-default/emp/list")
      .then((resp) => {
        this.tableData = resp.data.data; //响应数据赋值给数据模型
      });
  },
};
</script>

<style>
</style>

5. Vue路由

5.1. 路由介绍

DeptView.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="230px" style="border: 1px solid #eee">
                    <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-table :data="tableData" border>
                        <el-table-column prop="name" label="名称" width="250"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="250"></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: [{
                id:1,
                name:"学工部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:2,
                name:"教研部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:3,
                name:"就业部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:4,
                name:"人事部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:5,
                name:"行政部",
                updatetime:"2010-01-01 12:00:00"
            }]
        }
    },
    methods: {
        
    }
}
</script>

<style>

</style>

~~将资代码/vue-project(路由)/vue-project/src/views/tlias/~~ DeptView.vue拷贝到我们当前EmpView.vue同级，其结构如下：

在这里插入图片描述

其DeptView.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="230px" style="border: 1px solid #eee">
                    <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-table :data="tableData" border>
                        <el-table-column prop="name" label="名称" width="250"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="250"></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: [{
                id:1,
                name:"学工部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:2,
                name:"教研部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:3,
                name:"就业部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:4,
                name:"人事部",
                updatetime:"2010-01-01 12:00:00"
            },{
                id:5,
                name:"行政部",
                updatetime:"2010-01-01 12:00:00"
            }]
        }
    },
    methods: {
        
    }
}
</script>

<style>

</style>

????此时，我们希望基于4.案例中的功能，实现点击侧边栏的部门管理，显示部门管理的信息，点击员工管理，显示员工管理的信息，效果如下图所示：

在这里插入图片描述

在这里插入图片描述
这就需要借助我们的vue的路由功能了。

前端路由：URL中的hash(#号之后的内容）与组件之间的对应关系，如下图所示：

在这里插入图片描述
当我们点击左侧导航栏时，浏览器的地址栏会发生变化，路由自动更新显示与url所对应的vue组件。

而我们vue官方提供了路由插件Vue Router，其主要组成如下：
????VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
????<router-link>：请求链接组件，浏览器会解析成<a>
????<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

其工作原理如下图所示：
在这里插入图片描述
????首先，VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;
????然后，我们页面提供一个<router-link>组件,用户点击，发出路由请求;
????接着，我们的VueRouter根据路由请求，在路由表中找到对应的vue组件；
????最后，VueRouter会切换<router-view>中的组件，从而进行视图的更新

5.2. 路由入门

接下来演示vue的路由功能

首先如果没有安装vue-router，需要先安装vue-router插件，可以通过如下命令

npm install vue-router@3.5.1

~~但是我们不需要安装，因为当初我们再创建项目时，已经勾选了路由功能，已经安装好了。~~

然后需要在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改，最终代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp', //地址hash
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue') //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

在main.js中，我们已经引入了router功能，如下图所示：

在这里插入图片描述
????路由基本信息配置好了，路由表已经被加载，此时我们还缺少2个东西，就是<router-link>和<router-view>,所以我们需要修改2个页面（EmpView.vue和DeptView.vue）我们左侧栏的2个按钮为router-link,其代码如下：

<el-menu-item index="1-1">
	<router-link to="/dept">部门管理</router-link>
</el-menu-item>

<el-menu-item index="1-2">
	<router-link to="/emp">员工管理</router-link>
</el-menu-item>

然后我们还需要在内容展示区域即App.vue中定义route-view，作为组件的切换，其App.vue的完整代码如下：

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

<style>
</style>

????但是我们浏览器打开地址： http://localhost:7000/ ，发现一片空白，因为我们默认的路由路径是 / ,但是路由配置中没有对应的关系，所以我们需要在路由配置中 /对应的路由组件，代码如下：

const routes = [{
    path: '/emp', //地址hash
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue') //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect: '/emp' //表示重定向到/emp即可
  },
]

此时我们打开浏览器，访问http://localhost:7000 发现直接访问的是emp的页面，并且能够进行切换了，其具体如下图所示：

在这里插入图片描述
到此我们的路由实现成功。

6. 打包部署

我们的前端工程开发好了，但是我们需要发布，那么如何发布呢？主要分为2步：
????第一步：前端工程打包
????第二部：通过nginx服务器发布前端工程

6.1. 前端工程打包

接下来我们先来对前端工程进行打包

????直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：

在这里插入图片描述
????然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：

在这里插入图片描述

6.2. 部署前端工程

6.2.1. nginx介绍

????nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。官网：http://nginx.org/

????niginx在windows中的安装是比较方便的，直接解压即可。所以我们直接将~~资料中的~~ nginx.zip压缩文件拷贝到无中文的目录下，直接解压即可，如下图所示就是nginx的解压目录以及目录结构说明：

在这里插入图片描述
很明显，我们如果要发布，直接将资源放入到html目录中。

6.2.2. 部署

将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下，如下图所示：

在这里插入图片描述

然后我们通过双击nginx下得nginx.exe文件来启动nginx，如下图所示：

在这里插入图片描述

nginx服务器的端口号是80，所以启动成功之后，我们浏览器直接访问http://localhost:80 即可，其中80端口可以省略，其浏览器展示效果如图所示：

在这里插入图片描述

到此，我们的前端工程发布成功。

PS: 如果80端口被占用，nginx就无法启动，我们需要通过 conf/nginx.conf配置文件 来修改端口号。如下图所示：
????

文章来源:https://blog.csdn.net/weixin_44883789/article/details/135247407
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！

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

文章目录

1. Element介绍

2. 快速入门

3. Element组件

3.1. Table表格

3.1.1. 组件演示

3.2. Pagination分页

3.2.1. 组件演示

3.2.2. 组件属性详解

3.2.3. 组件事件详解

3.3. Dialog对话框

3.3.1. 组件演示

3.3.2. 组件属性详解

3.4. Form表单

3.4.1. 组件演示

4. 案例

4.1. 案例需求

4.2. 案例分析

4.3. 代码实现

4.3.1. 环境搭建

4.3.2. 整体布局

4.3.3. 顶部标题

4.3.4. 左侧导航栏

4.3.5. 右侧核心内容

4.3.5.1. 表格编写

4.3.5.2. 表单编写

4.3.5.3. 分页工具栏

4.3.6. 异步数据加载

4.3.6.1. 异步加载数据

4.3.6.2. 性别内容展示修复

4.3.6.3. 图片内容展示修复

5. Vue路由

5.1. 路由介绍

5.2. 路由入门

6. 打包部署

6.1. 前端工程打包

6.2. 部署前端工程

6.2.1. nginx介绍

6.2.2. 部署