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

已于 2023-12-28 15:53:42 修改
阅读量1k 收藏 10
点赞数 7
分类专栏： JavaWeb学习 文章标签： vue.js wps 前端
于 2023-12-28 15:46:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44883789/article/details/135247407
版权

文章目录

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 文件 ， 浏览器打开参考资料，点击页面中的左侧栏的员工管理，如下所示：

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

  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">
    <!-- {{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配置文件 来修改端口号。如下图所示：
    
在这里插入图片描述

Cpdr
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb项目-医疗管理系统（Vue.js、Element UI 、MySQL和 Servlet ）
04-24
该项目将采用 Vue.js、Element UI 和 Servlet 等技术进行构建，实现完整的医疗管理系统功能。整体项目包括登录、患者管理、类别管理、检查项管理以及检查组管理五大模块。 课程收获：  掌握 JavaWeb 开发的基础...
基于vue3、Element-Plus、JavaWeb、MySQL技术实现的学生选课管理系统
最新发布
05-07
基于vue3、Element-Plus、JavaWeb、MySQL技术实现的学生选课管理系统
Vue UI组件库(Element UI库)
薛定谔的猫
04-15 1602
这个Vue.component(Button.name, Button);定义全局组件，第一个参数是它的名字。就是我们这个是引入ElementUI全部样式和组件，这个组件的大小就特别的大了，因此我们就主要按需引入。最新版的 .babelrc 就是 .babel.config.js。想要修改icon图标，从下面的选择一个修改就可以了。长话短说，这里以Element UI库为主。跟cv工程师一样，复制粘贴就可以了。引入之后，就可以直接使用它了。而样式，它会自动帮我们解析。
Vue组件库 (一)：Element常用组件
m0_61598337的博客
08-16 685
Element基于Vue2.0的桌面端组件库组件：组成网页的部件。例如超链接、图片、按钮等。
Element-UI库：Web前端开发的强大助力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-03 1341
定义与背景Element-UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端UI组件库。它遵循Material Design设计规范，提供了一套丰富的组件和工具，帮助开发者快速构建美观、功能强大的Web应用。Element-UI由饿了么前端团队开发和维护，已经成为国内前端开发者广泛使用的UI库之一。特点与优势（1）丰富的组件库：Element-UI提供了包括按钮、表单、布局、导航、通知等在内的多种常用组件，满足了大部分Web应用的开发需求。
ElementUI 这套基于 Vue.js 的前端组件库，到底有什么？
技术探秘者的博客
01-20 426
ElementUI 是一套基于 Vue.js 的前端组件库，提供了丰富的可复用的 UI 组件，能够快速构建现代化的 Web 应用程序。它具有易用性、美观和高效的特点，并提供了丰富的组件和功能，如按钮、表单、表格、弹窗、导航栏等。ElementUI 支持主题和样式定制、国际化、响应式布局等特性，同时提供了文档和社区支持。ElementUI 是一套基于 Vue.js 的前端组件库，提供了丰富的可复用的 UI 组件，能够快速构建现代化的 Web 应用程序。
Vue引入并使用Element-UI组件库的两种方式
热门推荐
见证自己学习,成长的记录
01-10 1万+
在开发的时候，虽然我们可以自己写css或者js甚至一些动画特效，但是也有很多开源的组件库帮我们写好了。我们只需要下载并引入即可。vue和element-ui在开发中是比较般配的，也是我们开发中用的很多的，下面就介绍下如何在eue项目中引入element-ui组件库其他的组件库使用也是和上述步骤大同小异的。
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾的文件称为组件文件，包含三部分：template、script、style。template是...
基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码.zip
10-24
技术栈 后端：java+Spring+SpringMVC+Mybatis 前端：VueJs+Element
vue-admin:基于vue + vuex + element-ui构建的PC端后台管理系统
03-11
大家感兴趣的话，可以去瞧瞧，如果觉得还行得话，给个 :star: ，谢谢各位喽 :smiling_face_with_smiling_eyes:构建设置： # 将项目克隆到本地git clone https://github.com/luichooy/vue-admin.git# 进入到项目目录...
2024年十大Vue.js UI库精选：提升开发效率的必备工具
前端达人
02-06 1241
在2024年，随着Vue.js的不断普及和发展，这个轻量级、易于学习的JavaScript框架在前端开发者中的受欢迎程度日益上升。Vue.js之所以受到青睐，很大一部分原因是其庞大的生态系统，特别是众多的UI库，这些库提供了预先构建的组件和工具，帮助开发者快速高效地构建出既美观又响应迅速的用户界面。让我们来看看2024年最受欢迎的10个Vue.js UI库，这些库将帮助你提高开发效率，打造出令人印...
Vue 3和Element组件库的分页功能实现
chen520的博客
07-02 4884
Vue 3是一个灵活的JavaScript框架，采用虚拟DOM和响应式数据的概念，使开发者能够高效地构建用户界面。Element作为一套基于Vue.js的UI组件库，提供了丰富的UI组件和美观的样式，无论是数据展示还是用户交互都能发挥巨大作用。为了使用Vue 3和Element，需要正确安装和配置它们。Vue 3是一个用于构建用户界面的JavaScript框架，它具有更高的运行时性能和更好的开发体验。
【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例
量化Mike
04-09 1505
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。element-ui 提供了大量的组件，如：布局组件、表单组件、JS组件等等。如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在。引入 Element。
【前端Vue】Element UI：一站式前端组件库的简单入门指南
橘足轻重的博客
06-27 3445
Element UI是一个基于Vue.js的前端组件库，它提供了丰富的UI组件和工具，用于构建现代化的Web应用程序。Element UI的设计理念注重简洁、易用和美观，让开发者能够轻松构建出优雅的用户界面。它的特点包括：大量可定制的UI组件：Element UI提供了众多常用的UI组件，如按钮、表格、表单、弹窗等，每个组件都具有丰富的选项和样式定制能力。响应式布局系统：Element UI内置了灵活的响应式布局系统，可适应不同屏幕尺寸和设备。
Element快速入门
y_k_j_c的博客
08-02 156
Element是一套基于Vue2.0（需要在vue工程下使用）的组件库你可以认为就是帮我们快速搭建网页的组件库可以直接用他定义好的按钮和表单等等，有不同的效果，可以制作出比较精美的网页element官网。
element ui使用时候，和预期效果不一致的问题。
谁偷了我的小熊饼干
09-25 95
通过按照上述步骤，在整个 Vue.js 项目中引入并注册 Element UI，您就可以在项目中使用 Element UI 的各种组件了。在需要的地方，您可以按照 Element UI 文档中的说明来使用和配置这些组件。确保您的 Vue 组件可以使用 Element UI 组件。）中引入 Element UI 并在全局注册它，以便整个应用程序可以使用 Element UI 的组件。在 Vue.js 项目中引入 Element UI 库的最佳方式是在入口文件（通常是。可能是导入elment ui出了问题。
Javaweb之Vue组件库Element案例的详细解析
qq_69748833的博客
11-29 273
因为我们没有拷贝官方提供的css样式，所以和官方案例的效果不太一样，但是我们需要的布局格式已经有，具体内容我们有自己的安排。首先我们来到VS Code中，在views目录下创建 tlias/EmpView.vue这个vue组件，并且编写组件的基本模板代码，其效果如下图所示：其中模板代码在之前的案例中已经提供，此处不再赘述。从官网提供的示例，我们发现由现成的满足我们需求的布局，所以我们只需要做一位代码搬运工即可。通过观察数据，我们发现返回的json数据的data属性中，才是返回的人员列表信息。
Vue组件库Element
Cupid_kl的博客
11-23 71
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。
D:\JavaWeb\vue\vue-project01\src\views\element\ElementView.vue 77:8 error Unreachable code no-unreachable分析一下
09-02
根据给出的错误信息，这个错误是指在 `D:\JavaWeb\vue\vue-project01\src\views\element\ElementView.vue` 文件的第 77 行的代码存在无法访问的代码。一般来说，这是由于在前面的代码中存在 `return`、`throw`、`break` 或 `continue` 等会导致程序流程无法继续执行的语句，从而导致后续的代码无法被执行到。 要解决这个错误，你可以检查一下第 77 行之前的代码，确保没有意外的控制流语句或逻辑错误导致程序流程终止。可以使用调试器或在适当的位置添加日志输出来帮助你查找问题所在。另外，也可以考虑删除无法访问的代码行，或者对其进行重构以避免出现无法访问的情况。 请注意，这里提供的只是一般性的建议，具体解决方法可能需要根据代码的实际情况进行调试和分析。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cpdr

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值