b站视频演示效果:
效果图:
完整代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人事管理系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.sidebar {
width: 220px;
background-color: #2c3e50;
height: 100vh;
position: fixed;
top: 0;
left: 0;
color: white;
padding: 20px;
}
.sidebar h3 {
color: white;
margin-bottom: 30px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 20px;
}
.sidebar ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}
.topbar {
background-color: #007BFF;
color: white;
padding: 15px;
font-size: 18px;
text-align: center;
}
.content {
margin-left: 240px;
padding: 20px;
}
.search-section {
background-color: white;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.table-section {
background-color: white;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
</style>
</head>
<body>
<div id="app">
<!-- 左侧导航栏 -->
<div class="sidebar">
<h3>人事管理系统</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">员工管理</a></li>
<li><a href="#">部门管理</a></li>
<li><a href="#">考勤管理</a></li>
<li><a href="#">薪资管理</a></li>
<li><a href="#">设置</a></li>
</ul>
</div>
<!-- 主内容区域 -->
<div class="content">
<!-- 顶部导航栏 -->
<div class="topbar">人事管理系统</div>
<!-- 搜索区域 -->
<div class="search-section">
<el-form :inline="true" :model="searchForm">
<el-form-item label="员工姓名">
<el-input v-model="searchForm.name" placeholder="请输入员工姓名"></el-input>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="searchForm.department" placeholder="请输入部门"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.status" placeholder="请选择状态">
<el-option label="在职" value="在职"></el-option>
<el-option label="离职" value="离职"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">搜索</el-button>
<el-button type="success" @click="openDialog('add')">新增员工</el-button>
</el-form-item>
</el-form>
</div>
<!-- 表格区域 -->
<div class="table-section">
<el-table
:data="paginatedData"
stripe
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="员工姓名"
width="180">
</el-table-column>
<el-table-column
prop="department"
label="部门"
width="180">
</el-table-column>
<el-table-column
prop="position"
label="职位"
width="180">
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<el-button @click="openDialog('edit', scope.row)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
layout="prev, pager, next"
:total="filteredData.length"
:page-size="rowsPerPage"
@current-change="handlePageChange"
:current-page.sync="currentPage">
</el-pagination>
</div>
<!-- 新增和修改弹框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
<el-form :model="formData">
<el-form-item label="员工姓名" :label-width="formLabelWidth">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="部门" :label-width="formLabelWidth">
<el-input v-model="formData.department"></el-input>
</el-form-item>
<el-form-item label="职位" :label-width="formLabelWidth">
<el-input v-model="formData.position"></el-input>
</el-form-item>
<el-form-item label="状态" :label-width="formLabelWidth">
<el-select v-model="formData.status">
<el-option label="在职" value="在职"></el-option>
<el-option label="离职" value="离职"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</el-dialog>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
searchForm: {
name: '',
department: '',
status: ''
},
currentPage: 1,
rowsPerPage: 10,
data: [
{ id: 1, name: '张三', department: '技术部', position: '前端开发', status: '在职' },
{ id: 2, name: '李四', department: '人事部', position: '人事专员', status: '在职' },
{ id: 3, name: '王五', department: '市场部', position: '市场经理', status: '离职' },
{ id: 4, name: '赵六', department: '财务部', position: '财务总监', status: '在职' },
{ id: 5, name: '陈七', department: '技术部', position: '后端开发', status: '在职' },
],
dialogVisible: false,
dialogTitle: '',
formLabelWidth: '100px',
formData: {
id: null,
name: '',
department: '',
position: '',
status: ''
}
},
computed: {
filteredData() {
return this.data.filter(row => {
const matchesName = row.name.includes(this.searchForm.name);
const matchesDepartment = row.department.includes(this.searchForm.department);
const matchesStatus = this.searchForm.status === '' || row.status === this.searchForm.status;
return matchesName && matchesDepartment && matchesStatus;
});
},
paginatedData() {
const start = (this.currentPage - 1) * this.rowsPerPage;
const end = start + this.rowsPerPage;
return this.filteredData.slice(start, end);
}
},
methods: {
search() {
this.currentPage = 1;
},
handlePageChange(val) {
this.currentPage = val;
},
openDialog(action, row = null) {
if (action === 'add') {
this.dialogTitle = '新增员工';
this.formData = {
id: null,
name: '',
department: '',
position: '',
status: ''
};
} else if (action === 'edit' && row) {
this.dialogTitle = '编辑员工';
this.formData = { ...row };
}
this.dialogVisible = true;
},
handleSave() {
if (this.formData.id) {
// 修改操作
const index = this.data.findIndex(item => item.id === this.formData.id);
if (index !== -1) {
this.data.splice(index, 1, { ...this.formData });
}
} else {
// 新增操作
this.formData.id = this.data.length + 1; // 模拟ID自增
this.data.push({ ...this.formData });
}
this.dialogVisible = false;
}
}
});
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
各位同学们:还有啥想看的功能或者特效不?欢迎在评论区留言哦!
本人承接网网站开发,如有需要,欢迎私信咨询!
如果您感觉文章对您有帮助~
那就打赏一下,请笔者喝杯咖啡吧~
给新手学习前端开发的建议:
-
了解基础知识:
- 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心,构成了网页的基本结构和样式,以及交互功能。
- 掌握HTML的标签和语义化,了解CSS的选择器和布局技巧,熟悉JavaScript的基本语法和DOM操作。
-
实践项目:
- 不要仅仅停留在理论学习上,通过实践项目来巩固和应用所学知识。
- 可以从简单的静态页面开始,逐渐尝试添加交互效果和动态数据。
- 参与开源项目或自己动手创建一个个人网站,将所学知识应用到实际场景中。
-
学习工具和框架:
- 了解并学习前端开发中常用的工具和框架,如构建工具(Webpack、Gulp等)、版本控制工具(Git)、前端框架(React、Vue、Angular等)。
- 这些工具和框架能够提高开发效率,简化开发流程,是前端开发的重要组成部分。
-
关注前端趋势:
- 前端开发是一个快速发展的领域,新的技术和工具不断涌现。
- 关注前端社区、博客和会议,了解最新的技术趋势和发展方向,保持学习的热情和动力。
-
培养解决问题的能力:
- 前端开发常常会遇到各种问题和挑战,学会独立思考和解决问题是非常重要的。
- 遇到问题时,可以先尝试自己解决,通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决,可以向同事或社区求助,但也要学会总结和分享自己的经验和教训。
-
不断学习和提升:
- 前端开发是一个不断学习和提升的过程,要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时,也要关注自己的职业发展,了解行业的需求和趋势,规划自己的职业道路。
-
注重代码质量和可维护性:
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范,使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑,避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性,尽量编写可复用和可扩展的代码。
-
参与社区和交流:
- 加入前端开发的社区和论坛,与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式,不仅可以提升自己的技能水平,还可以结识更多的同行和朋友。
总之,学习前端开发需要耐心和毅力,要保持对技术的热情和兴趣,不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式,你可以逐渐成为一名优秀的前端开发者。
加油吧!