利用Vue.js实现简单员工管理系统（增删查）的功能

员工管理系统

注意！！此篇博客没有涉及后台数据库，所有数据自己设定，不经过数据库来增删改查！！

我们想要实现一个简单的员工管理系统案例需要以下几个步骤，我们一起来康康叭~~

第一步：首先先实现基础的表单结构，将一些“假”数据显示在页面表单中(一般数据会从后端数据库中提取，这里只是简单地实现一些基本功能)

<div id="app"><table><thead><th>员工编号</th><th>员工姓名</th><th>入职日期</th></thead><tbody><tr v-for='item in list' :key='item.id'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#">删除</a></td></tr></tbody></table>
</div>
<script>new Vue({el:'#app',data:{id:'',name:'',list:[{id:1,name:'f(x)',ctime:new Date()},{id:1,name:'NCT',ctime:new Date()},{id:1,name:'aespa',ctime:new Date()},]}})
</script>

忘记表单知识的‘童鞋’就阔以移步：HTML表单基础
忘记v-for指令用法的‘童鞋’请移步：Vue指令----v-for

现在的效果就是这样子啦~是不是有丢丢丑不拉几的，请看第二步！！

第二步：利用bootstrap渲染表格（虽然我渲染出来的样子也不好看！！但是比刚刚好多了）

<div id="app"><div class="container"><table class="table table-hover table-bordered table-striped"><thead><th>员工编号</th><th>员工姓名</th><th>入职日期</th><th>操作</th></thead><tbody><tr v-for='item in list' :key='item.id'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#">删除</a></td></tr></tbody></table></div>
</div>

是不是稍微变好看了呢！

感觉还是少了点啥…经过不断的尝试最终表单的长这样：

<div id="app"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加员工</h3></div><div class="panel-body form-inline"><label>Id:<input type="text" class="form-control" ></label><label>Name:<input type="text" class="form-control" ></label><input type="button" value="添加" class="btn btn-primary" ><label>搜索名称关键字：<input type="text" class="form-control" ></label></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th>Id</th><th>Name</th><th>Ctime</th><th>Operation</th></tr></thead><tbody><tr v-for='item in list' :key='item.id'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" >删除</a></td></tr></tbody></table></div></div>

第三步：实现添加员工的功能。输入员工信息，点击添加按钮，将新添加的员工信息显示在表单上。

给添加按钮绑定事件实现添加功能---->@click

<script>new Vue({el:'#app',data:{id:'',name:'',list:[{id:1,name:'f(x)',ctime:new Date()},{id:2,name:'NCT',ctime:new Date()},{id:3,name:'aespa',ctime:new Date()},]},methods:{add(){var car = {id:this.id,name:this.name,ctime:new Date()}this.list.push(car);}}})
</script>

将输入的信息显示在表单中，也就是需要实现数据的双向绑定---->v-model

<label>Id:<input type="text" class="form-control" v-model="id" v-model='id'>
</label><label>Name:<input type="text" class="form-control" v-model="name" v-model='name'>
</label><input type="button" value="添加" class="btn btn-primary" @click='add'>

在输入框输入信息，点击添加按钮，实现功能

第四步：实现删除功能。点击删除按钮，对应的员工表单信息被删除

给删除按钮添加删除事件---->@click.prenvent
利用id传递数据，注意此处是a标签，需要添加事件修饰符.prevent阻止默认事件

<a href="#" @click.prevent='del(item.id)'>删除</a>methods:{add(){var car = {id:this.id,name:this.name,ctime:new Date()}this.list.push(car);},del(id){this.list.some((item,i)=>{if(item.id==id){this.lst.splice(i,1);return true;}})}
}

第五步：实现输入关键字进行查找功能。

自定义search方法，把所有的关键字，通过传参的方式传递给search方法

search(key){var newList = [];this.list.forEach(item=>{if(item.name.indexOf(key)!=-1){newList.push(item);}})return newList;
}

2.给搜索关键字框绑定数据---->v-model

<label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords">
</label>
<!-- vue实例中的对象 -->
data:{id:'',name:'',keywords:'',list:[{id:1,name:'f(x)',ctime:new Date()},{id:2,name:'NCT',ctime:new Date()},{id:3,name:'aespa',ctime:new Date()},]
},

search方法详解：将输入搜索关键字框的数据作为形参传入方法中，循环遍历实例中存放所有数据的数组，判断传递进来的形参是否在每个对象中存在，如果存在，则将其添加至一个新数组中。

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head><body><div id="app"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加员工</h3></div><div class="panel-body form-inline"><label>Id:<input type="text" class="form-control" v-model="id"></label><label>Name:<input type="text" class="form-control" v-model="name"></label><input type="button" value="添加" class="btn btn-primary" @click='add'><label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords"></label></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th>Id</th><th>Name</th><th>Ctime</th><th>Operation</th></tr></thead><tbody><!--  --><tr v-for='item in search(keywords)' :key='item.id'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" @click.prevent='del(item.id)'>删除</a></td></tr></tbody></table></div></div><script>new Vue({el: '#app',data: {id: '',name: '',keywords: '',list: [{ id: 1, name: 'f(x)', ctime: new Date() },{ id: 2, name: 'NCT', ctime: new Date() },{ id: 3, name: 'aespa', ctime: new Date() },]},methods: {add() {var car = { id: this.id, name: this.name, ctime: new Date() }this.list.push(car);},del(id) {this.list.some((item, i) => {if (item.id == id) {this.lst.splice(i, 1);return true;}})},search(key) {var newList = [];this.list.forEach(item => {if (item.name.indexOf(key) != -1) {newList.push(item);}})return newList;}}})</script>
</body></html>

head标签中的vue.js和bootstrap文件可自行百度查找合适的连接，利用src属性添加进来即可

如果觉得表单中的时间格式不太好，可以参考filter过滤器来修改时间格式

大功告成！！！

反思：此案例没有连接数据库，所有数据都是自定义的，且每次刷新页面，vue实例就会重新被创建，所以所有添加和删除的数据都会在刷新之后就不会显示在页面上。

利用Vue.js实现简单员工管理系统（增删查）的功能相关推荐

利用Vue.js实现简单的留言板功能
此案例主要实现点击发送留言的按钮,将我们的留言以及留言人的信息展示在留言板上,下面就是具体的步骤: 一 .搭建整个留言板页面结构为了页面整体效果稍微好看一点,此案例运用bootstrap框架对页面表 ...
vue.js更改颜色_如何使用Vue.js实现简单的标题更改应用程序
vue.js更改颜色 by Anoob Bava 通过Anoob Bava 如何使用Vue.js实现简单的标题更改应用程序 (How to implement a simple title chang ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...
仿vue.js实现简单模板引擎（2kB）
仿vue.js实现简单模板引擎(2kB) 点击预览 index.html <!DOCTYPE html> <html lang="zh-CN"> <h ...
【超详细Django网站开发过程7】便利店管理系统之——利用管理员用户对客户数据进行增删查改
提到数据库,就免不了对信息的增删查改,今天来做一个管理员用户对顾客数据的增删查改功能. 导航 1.增删查改中的--"查"操作如下: 2.增删查改中的--"增"操 ...
利用auto.js实现FIFAol3手机端截卡器功能
利用auto.js实现FIFAol3手机端截卡器功能利用空闲时间写了个小脚本给自己使用,现在分享给大家.最近使用截卡器的人越来越多,导致现在几乎买不到球员了,既失望又无奈.费话不多说,直接上方法. ...
django mysql开发_基于django框架web项目实战开发四 django+mysql实现增删查改功能
第一步:编写增删查改功能代码打开项目myweb目录下view.py, 并编写以下代码 view.py from django.shortcuts import render, redirect fr ...
android开发课程表app数据库,基于Android studio 的课程表增删查改功能(基于sqlite)
[实例简介]Android studio 用SQLite实现课程表的增删查改功能,:实现详情浏览.编辑.及新增功能.课程编号可以实现正则检查(编号规则XX00000,XX表示两位大写的字母,00000 ...
基于javaweb的简单员工管理系统
一.系统简介本项目采用eclipse工具开发,jsp+servlet+jquery技术编写,数据库采用的是mysql,navicat开发工具. 系统一共分为1个角色分别是:员工二.模块简介员工 ...

利用Vue.js实现简单员工管理系统（增删查）的功能

员工管理系统

利用Vue.js实现简单员工管理系统（增删查）的功能相关推荐

最新文章

热门文章