vue人力管理_Vue-员工管理系统

大二暑假进行了两周Vue的入门学习,主要内容就是关于前端的入门学习,在两周内学习了Vue的一些简单使用

主要就是使用数据的双向绑定,使用Vue进行数据处理,使用Bootstrap进行布局搭建,下面是我的代码

员工管理系统

table {

table-layout: fixed;

}

员工信息管理

添加用户

员工ID

员工姓名

薪资

添加

员工编号员工姓名薪资创建时间操作

{{item.id}}{{item.name}}{{item.salary}}{{item.createtime}}

修改

删除

修改员工信息

员工ID

员工姓名

员工薪资

保存修改

//创建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

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;

}

}

});