當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue-员工管理系统

發布時間：2025/7/14 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue-员工管理系统小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

大二暑假進行了兩周Vue的入門學習,主要內容就是關于前端的入門學習,在兩周內學習了Vue的一些簡單使用

主要就是使用數據的雙向綁定,使用Vue進行數據處理,使用Bootstrap進行布局搭建,下面是我的代碼

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>員工管理系統</title>

<link rel="stylesheet" href="css/bootstrap.min.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<style>
table {
table-layout: fixed;
}
</style>
</head>

<body>
<div id="app">
<div class="container">
<h1>員工信息管理</h1>

<div class="panel panel-primary">

<div class="panel-heading">
<h3 class="panel-title">添加用戶</h3>
</div>

<div class="panel-body form-inline">

<div class="form-group">
<label for="addID">員工ID</label>
<input v-model="addId" type="text" class="form-control" id="addID" placeholder="員工ID" />
</div>

<div class="form-group">
<label for="addName">員工姓名</label>
<input v-model="addName" type="text" class="form-control" id="addName" placeholder="員工姓名" />
</div>
<div class="form-group">
<label for="addSalary">薪資</label>
<input v-model="addSalary" type="number" class="form-control" id="addSalary" placeholder="4000" />
</div>
<button type="submit" class="btn btn-primary" @click="addEmpFun">添加</button>

<div class="form-group pull-right">
<input v-model="searchValue" type="text" class="form-control" id="searchInput" placeholder="搜索" />
</div>
</div>
</div>

<table class="table table-striped table-bordered">
<thead>
<tr>
<th>員工編號</th>
<th>員工姓名</th>
<th>薪資</th>
<th>創建時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>

<tr v-for="(item,index) of searchEmpFun(searchValue)" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.salary}}</td>
<td>{{item.createtime}}</td>
<td>
<button @click="updateEmpFun(index)" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal">修改</button>
<button @click="deleteEmpFun(index)" class="btn btn-danger btn-xs">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">修改員工信息</h4>
</div>
<div class="modal-body form-horizontal">

<div class="form-group">
<label for="updateId" class="col-sm-2 control-label">員工ID</label>
<div class="col-sm-10">
<input v-model="updateEmpObj.id" type="text" class="form-control" id="updateId" readonly>
</div>
</div>

<div class="form-group">
<label for="updateName" class="col-sm-2 control-label">員工姓名</label>
<div class="col-sm-10">
<input v-model="updateEmpObj.name" type="text" class="form-control" id="updateName">
</div>
</div>

<div class="form-group">
<label for="updateSalary" class="col-sm-2 control-label">員工薪資</label>
<div class="col-sm-10">
<input v-model="updateEmpObj.salary" type="number" class="form-control" id="updateSalary">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">保存修改</button>
</div>
</div>
</div>
</div>
</div>
<script>
//創建vue實例對象
new Vue({
//掛載點
el: "#app",
//model數據
data: {
//三個屬性進行雙向綁定
addId:"",
addName:"",
addSalary:"",
//更新對象
updateEmpObj:{
id:"",
name:"",
salary:""
},
//定義搜索綁定值
searchValue:"",
//原始數據
empDataArray: [{
id: "1001",
name: "小黑",
salary: "3000",
createtime: new Date().toLocaleDateString()
},
{
id: "1002",
name: "王二",
salary: "5000",
createtime: new Date().toLocaleDateString()
},
{
id: "1003",
name: "張三",
salary: "5000",
createtime: new Date().toLocaleDateString()
},
{
id: "1004",
name: "李四",
salary: "7000",
createtime: new Date().toLocaleDateString()
},
{
id: "1005",
name: "阿波羅",
salary: "9000",
createtime: new Date().toLocaleDateString()
}
]
},
//函數集合
methods: {
//點擊添加按鈕
addEmpFun() {
var addId = this.addId;
var addName = this.addName;
var addSalary = this.addSalary;
if(addId == "" || addName == "" || addSalary == "") {
alert("員工信息不能為空");
} else {
var addEmp = {
id: addId,
name: addName,
salary: addSalary,
createtime: new Date().toLocaleDateString()
}
//新數據添加到數組中
this.empDataArray.push(addEmp);
}
},
//刪除函數
deleteEmpFun(deleteIndex) {
var tf = confirm("確定刪除?");
if(tf) {
this.empDataArray.splice(deleteIndex, 1);
}
},
//更新函數
updateEmpFun(updateIndex){
this.updateEmpObj=this.empDataArray[updateIndex];
},
searchEmpFun(sv){
//我們創建數組用來保存查詢的結果
var newEmpDataArray=[];//如果查詢到,則給它添加數據
var empDataArray=this.empDataArray;//獲取到原數組
for(var i=0;i<empDataArray.length;i++){
if(empDataArray[i].id.indexOf(sv)!=-1||empDataArray[i].name.indexOf(sv)!=-1||empDataArray[i].salary.indexOf(sv)!=-1||empDataArray[i].createtime.indexOf(sv)!=-1){
newEmpDataArray.push(empDataArray[i]);
}
}
return newEmpDataArray;
}
}
});
</script>
</body>
</html>

轉載于:https://www.cnblogs.com/wangxiaokui/p/11329387.html

總結

以上是生活随笔為你收集整理的Vue-员工管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。