利用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实现简单员工管理系统（增删查）的功能

员工管理系统

猜你喜欢