javaweb学习day3《Vue篇》--Vue实战项目员工管理页面（附带全套源代码）

@VON

发布于 2025-12-17 09:28:51

1990

一、前言

javeweb的学习来到了第三天，先吐槽一下，Vue相关组件的安装真的十分容易使人头大。仅仅是准备工作就用了三个小时，更别说是代码的调试了。每次的错误都是那么的微不足道，但是很难发现，鬼知道视频和弹幕小编反复观看了多少遍。

准备工作推荐大家还是直接去看黑马程序员的吧，他讲的特别详细。

二、效果图展示

三、案例分析

实现声明：由于代码部分大都是从参考文档中copy过来的，就不做过多赘述了。

参考文档地址给大家附上点我查看参考文档

话不多说直接上干货。

3.1 页面布局

<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-aside 组件：

设置了宽度为 230px，样式上有一个1px实线边框（border: 1px solid #eee）。
这是 Element UI 提供的侧边栏组件，用于在页面布局中放置侧边导航或其他辅助性内容。

el-menu 组件：

使用了属性 :default-openeds="['1', '3']"，这意味着默认展开了索引为 '1' 和 '3' 的子菜单项。在你的示例中，只有一个子菜单项，所以这里的 '1' 对应的是 el-submenu 的索引。
这是 Element UI 提供的菜单组件，用于展示垂直或水平的菜单结构。

el-submenu 组件：

设置了索引为 '1' 的子菜单。
包含一个模板（template）作为标题，里面嵌套了一个带有图标的标题文本，使用了 el-icon-message 图标。
子菜单项 el-menu-item 分别具有索引 '1-1' 和 '1-2'，显示了两个具体的管理选项，分别是 "部门管理" 和 "员工管理"。

3.2 表单

<!-- 表单 -->
                    <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="男"></el-option>
                                <el-option label="女" value="女"></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-form 组件：

使用了属性 :inline="true"，表示这是一个内联表单，即表单项在同一行显示，而不是传统的块级显示。
使用了 :model="searchForm"，将表单数据与 Vue 实例中的 searchForm 对象进行绑定，这样表单输入的值会同步到 searchForm 中。

el-form-item 组件：

每个 el-form-item 表示一个表单项，其中的 label 属性指定了该表单项的标签名称。
每个表单项中嵌套了不同的表单控件，如 el-input 和 el-select。

el-input：

用于输入姓名，通过 v-model="searchForm.name" 将输入框的值与 searchForm 对象中的 name 字段进行双向绑定。

el-select：

用于选择性别，通过 v-model="searchForm.gender" 将选择的值与 searchForm 对象中的 gender 字段进行双向绑定。
包含了两个 el-option，分别表示 "男" 和 "女" 选项。

el-date-picker：

用于选择入职日期的时间范围，通过 v-model="searchForm.entrydate" 将选择的日期范围与 searchForm 对象中的 entrydate 字段进行双向绑定。
type="daterange" 表示选择日期范围，range-separator="至" 设置日期范围的分隔符，start-placeholder 和 end-placeholder 分别设置开始日期和结束日期的占位符。

el-button：

用于提交表单，设置了 type="primary" 表示主要的操作按钮，点击时触发 onSubmit 方法。

3.3 表格

<!-- 表格 -->
                    <el-table :data="tableData">
                        <el-table-column prop="name" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column 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>

el-table 组件：

使用了属性 :data="tableData"，将表格的数据绑定到 Vue 实例中的 tableData 数据源上，这样表格就可以展示这些数据。

el-table-column 组件：

每个 el-table-column 表示表格的一列，通过不同的属性配置和模板实现不同的展示效果和交互功能。

姓名列 (el-table-column prop="name" label="姓名" width="180")：

这一列显示每个条目的姓名，通过 prop="name" 指定数据源中的字段名为 name，label="姓名" 设置列头名称为 "姓名"，width="180" 设置列宽为 180 像素。

图像列 (el-table-column label="图像" width="180")：

这一列显示每个条目的图像，使用了一个 template 模板来自定义内容显示。
slot-scope="scope" 定义了作用域插槽，通过 scope.row.image 取得每行数据中的 image 字段，作为 <img> 标签的 src 属性值，显示每个条目对应的图像。

性别列 (el-table-column label="性别" width="140")：

这一列显示每个条目的性别，也使用了 template 模板来根据数据内容显示。
{{ scope.row.gender == 1 ? '男' : '女' }} 通过条件判断，根据 gender 字段的值显示 "男" 或 "女"。

职位列 (el-table-column prop="job" label="职位" width="140")：

这一列显示每个条目的职位信息，通过 prop="job" 指定数据源中的字段名为 job，label="职位" 设置列头名称为 "职位"，width="140" 设置列宽为 140 像素。

入职日期列 (el-table-column prop="entrydate" label="入职日期" width="180")：

这一列显示每个条目的入职日期信息，通过 prop="entrydate" 指定数据源中的字段名为 entrydate，label="入职日期" 设置列头名称为 "入职日期"，width="180" 设置列宽为 180 像素。

最后操作时间列 (el-table-column prop="updatetime" label="最后操作时间" width="230")：

这一列显示每个条目的最后操作时间，通过 prop="updatetime" 指定数据源中的字段名为 updatetime，label="最后操作时间" 设置列头名称为 "最后操作时间"，width="230" 设置列宽为 230 像素。

特别说明一下，这个地方的width尽量大一些，防止出现滚动条

操作列 (el-table-column label="操作")：

这一列包含了操作按钮，用于执行编辑和删除操作。
使用了 el-button 组件来创建按钮，type="primary" 和 type="danger" 分别表示编辑按钮和删除按钮，size="mini" 设置按钮大小为迷你型。

3.4 分页

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

el-pagination 组件：

这是 Element UI 提供的分页组件，用于处理大量数据的分页显示。

属性和事件绑定：

background：设置分页组件的背景色为透明，可以根据具体的 UI 需求进行调整。
layout="sizes ,prev, pager, next, jumper"：指定了分页组件的布局，这些选项会影响分页组件的显示方式和顺序：
- sizes：显示每页条数选择器。
- prev：显示上一页按钮。
- pager：显示页码。
- next：显示下一页按钮。
- jumper：显示快速跳转到指定页的输入框。
@size-change="handleSizeChange"：当每页条数发生变化时触发 handleSizeChange 方法，用来处理用户选择的每页条数变化。
@current-change="handleCurrentChange"：当当前页码发生变化时触发 handleCurrentChange 方法，用来处理用户翻页操作。
:total="1000"：设置总条目数为 1000 条，这个值决定了分页组件显示的总页数和页码范围。

这个可以适当的记忆一下，参考文档中没有详解

三、源代码展示

EmpView.vue

<template>
    <div>
        <!-- 页面布局 -->
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="background-color: rgb(238, 241, 246);font-size:40px">VON智能学习辅助系统</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="男"></el-option>
                                <el-option label="女" value="女"></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 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><br>

                    <!-- pagination-分页 -->
                    <el-pagination background layout="sizes ,prev, pager, next, jumper" 
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" 
                        :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:
    {
        onSubmit:function(){
            alert("查询数据");
        },
        handleSizeChange:function(val){
            alert("每页记录数变化"+val)
        },
        handleCurrentChange:function(val){
            alert("页码变化"+val)
        },
    },
    mounted()
    {
        //发送异步请求，获取数据
        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
            this.tableData = result.data.data;
        });
    }
}
</script>

App.vue

<template>
  <div>
    <!-- <h1>{{ message }}</h1> -->
    <!-- <element-view></element-view> -->

    <!-- 员工管理 -->
    <emp-view></emp-view>
  </div>
</template>
<script>
import EmpView from './views/empsystem/EmpView.vue'


// import ElementView from './views/element/ElementView.vue'
  export default {
  components: { EmpView },
    data() {
      return {
        message:"Hello vue"
      }
    },
  }
</script>
<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入element模块
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-22，如有侵权请联系 cloudcommunity@tencent.com 删除