Element组件案例 Vue路由 前端打包部署步骤

Element组件案例

案例需求与分析

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

数据使用yapi测试接口。

由上图可以看出，整个页面可以分为3个部分，主要步骤如下：

1. 创建页面，完成页面的整体布局规划
2. 然后分别针对3个部分进行各自组件的具体实现
3. 针对于右侧核心内容展示区域，需要使用异步加载数据，以表格渲染数据
1
2
3

环境搭建

在views目录下创建 tlias/EmpView.vue这个vue组件，并且编写组件的基本模板代码，App.vue这个组件之前是引入了element-view这个组件，此时我们需要修改成引入emp-view这个组件。

整体布局

抄ElementUI组件：

<el-container style="height: 700px; border: 1px solid #eee">
  <el-header>Headerel-header>
  <el-container>
    <el-aside width="200px">Asideel-aside>
    <el-main>Mainel-main>
  el-container>
el-container>
1
2
3
4
5
6
7
8

顶部标题

修改顶部的文本内容，并且提供背景色的css样式

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

左侧导航栏

继续抄刚刚上述布局组件中提供的案例：

搬运代码，然后做简单修改即可

此时整体代码如下：

<div>

<el-container style="height: 700px; border: 1px solid #eee">
    <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统el-header>
    <el-container>
        <el-aside width="200px">
             <el-menu :default-openeds="['1']">
                <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-main>
    el-container>
el-container>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

核心-右侧导航栏

根据实际示例效果，右侧显示的是表单、表格还有分页栏。

表格编写

表格的制作，我们同样在官方直接找表格组件，也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例：

然后找到表格的代码，复制到我们布局容器的主题区域，修改表格，添加列，并且修改列名。

<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>
1
2
3
4
5
6
7
8
9
10
11
12

然后在data里return一个空的tableData:

<script>
export default {
    data() {
        return {
        tableData:[]
        }
    },
};
script>
1
2
3
4
5
6
7
8
9

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

表单编写

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

去ElementUI官网，在表单组件中找到与之类似的示例，加以修改

直接拷贝代码到主体区域的table组件的上方即可

<el-form :inline="true" :model="searchForm" class="demo-form-inline">
    <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="姓名">el-input>
    el-form-item>
    <el-form-item label="性别">
        <el-select v-model="searchForm.gender" placeholder="性别">
            <el-option label="男" value="1">el-option>
            <el-option label="女" value="2">el-option>
        el-select>
    el-form-item>
    <el-form-item>
        <el-button type="primary" @click="onSubmit">查询el-button>
    el-form-item>
el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
    };
},
methods: {
    onSubmit: function () {
      console.log(this.searchForm);
    },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

表单的提交按钮，绑定了onSubmit函数，所以我们还需要在methods中定义onSubmit函数

效果：

可以发现我们还缺少一个时间，所以可以从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>
1
2
3
4
5
6
7
8
9

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

 searchForm:{
            name:'',
            gender:'',
            entrydate:[]
}
1
2
3
4
5

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

到此为止完整代码：

<template>
  <div>
    
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >tlias 智能学习辅助系统el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <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">
            <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);
    },
  },
};
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

分页工具栏编写

分页条我们之前做过，所以我们直接找到之前的案例，复制即可

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  background
  layout="sizes,prev, pager, next,jumper,total"
  :total="1000"
>
el-pagination>
1
2
3
4
5
6
7
8
9

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

handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
1
2
3
4
5
6

此时效果：

异步数据加载

异步加载数据

对于案例，我们只差最后的数据了,数据使用该地址作为测试。

使用axios发送ajax请求。
在vue项目中，对于axios的使用，分为如下2步：

1. 安装axios: npm install axios
2. 需要使用axios时，导入axios: import axios 'axios'
1
2

接下来我们先来到项目的执行终端，然后输入命令，安装axios

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

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

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

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

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

性别展示修复

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

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