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

ゞ浴缸里的玫瑰 2022-12-20 02:23 56阅读 0赞

### 员工管理系统 ###

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

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

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

<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表单基础][HTML]  
忘记v-for指令用法的‘童鞋’请移步：[Vue指令----v-for][Vue_----v-for]

![在这里插入图片描述][20201111133818336.png_pic_center]

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

第二步：利用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>

是不是稍微变好看了呢！  
![在这里插入图片描述][20201111133907133.png_pic_center]  
感觉还是少了点啥…经过不断的尝试最终表单的长这样：

<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]  
第三步：实现添加员工的功能。输入员工信息，点击添加按钮，将新添加的员工信息显示在表单上。

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

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

1.  在输入框输入信息，点击添加按钮，实现功能  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

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

*  给删除按钮添加删除事件---->`@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;
                }
            })
        }
    }

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

1.  自定义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>
    
    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方法详解：将输入搜索关键字框的数据作为形参传入方法中，循环遍历实例中存放所有数据的数组，判断传递进来的形参是否在每个对象中存在，如果存在，则将其添加至一个新数组中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]

**完整代码**

<!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过滤器][filter]来修改时间格式

--------------------

大功告成！！！

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

[HTML]: https://blog.csdn.net/PILIpilipala/article/details/107382135
[Vue_----v-for]: https://blog.csdn.net/PILIpilipala/article/details/109581902
[20201111133818336.png_pic_center]: /images/20221120/d268d37ead87456592dd444ca7e6be65.png
[20201111133907133.png_pic_center]: /images/20221120/71b6ce5711574c6191b2601eac96e16e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1ed1ee3f5456418e814fbe478a5715ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201111135653839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201111144137162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201111144235977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[filter]: https://blog.csdn.net/PILIpilipala/article/details/109584920