转载

基于Vue的人力资源管理平台(原表格中修改数据)

Html部分:

<!doctype html>
<html lang="zh">

<head>
    <title>Vue在原表格中修改数据</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 内网Vue.js -->
    <script src="D:\WebCode\Vue.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <!-- UI -->
    <!-- 容器 -->
    <div id="app" class="container-fluid">


        <!-- 展板 -->
        <div class="jumbotron">
            <h1 class="display-3">人力资源管理</h1>
            <p class="lead">表单与表格</p>

        </div>

        <!-- 表单 -->
        <!-- 行 -->
        <div class="row">

            <!-- 列 -->
            <div class="col">
                <!--卡片 -->
                <div class="card">

                    <div class="card-body">
                        <h4 class="card-title">表单</h4>

                        <div v-show="isshow" class="alert alert-danger" role="alert">
                            <strong>表单各个字段必须填写!</strong>
                        </div>
                        <!-- 输入框 -->
                        <div class="form-group">
                            <label for="">姓名</label>
                            <!-- 绑定名字 -->
                            <input v-model="name" type="text" class="form-control" name="" id=""
                                aria-describedby="helpId" placeholder="员工姓名">

                        </div>
                        <!-- 下拉框 -->
                        <div class="form-group">
                            <label for="">位置</label>
                            <!-- 绑定位置 -->
                            <select v-model="job" class="custom-select" name="" id="">
                                <!-- 通过循环获得值 -->
                                <option v-for="(item, index) of jobList" :key="index">{{item}}</option>

                            </select>
                        </div>

                        <!-- 单选按钮 -->
                        <div class="form-group">
                            <label for="">性别</label>
                            <div class="row ml-2">


                                <div class="form-check form-check-inline col">
                                    <label class="form-check-label">
                                        <input v-model="gender" class="form-check-input" type="radio" value="男">
                                        男
                                    </label>
                                </div>
                                <div class="form-check form-check-inline col">
                                    <label class="form-check-label">
                                        <input v-model="gender" class="form-check-input" type="radio" name="" id=""
                                            value=" 女">
                                        女
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- 多选按钮 -->
                        <div class="form-group">
                            <label for="">专业技能</label>

                            <div class="row">

                                <!-- v-bind:value="data" :value -->

                                <div v-for="item of skillList" class="form-check form-check-inline col">
                                    <label class="form-check-label">
                                        <input v-model="skills" class="form-check-input" type="checkbox"
                                            :value="item">{{item}}

                                    </label>
                                </div>

                            </div>



                        </div>

                        <!-- 创建按钮 -->
                        <button @click="add()" type="button" name="" id=""
                            class="btn btn-primary btn-lg btn-block">创建新员工</button>
                    </div>
                </div>
            </div>


            <!-- 列 -->
            <div class="col">
                <!-- 表格 -->
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th style="width: 15%;">姓名</th>
                            <th style="width: 15%;">性别</th>
                            <th style="width: 15%;">职业</th>
                            <th style="width: 30%;">专业技能</th>
                            <th style="width: 30%;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(s, index) in staffList" :key="index">
                            <td>
                                <!-- 编辑模式 -->
                                <input v-if="index===editIndex" v-model="editItem.name" type="text">
                                <!-- 显示 -->
                                <label v-else for="">{{s.name}}</label>
                            </td>
                            <td> <select v-if="index===editIndex" v-model="editItem.gender">
                                    <option>男</option>
                                    <option>女</option>
                                </select>
                                <label v-else for="">{{s.gender}}</label>
                            </td>
                            <td> <select v-if="editIndex === index" class="form-control" v-model="editItem.job">
                                
                                    <option v-for="item of jobList">{{item}}</option>
                                </select>
                                <label v-else>{{s.job}}</label>
                            </td>
                            <td>
                                <!-- <select v-if="editIndex === index" class="form-control" v-model="editItem.skills"
                                multiple='multiple'>
                                
                                <option v-for="item of skillList">{{item}}</option>
                            </select> -->

                            <div
                            v-if="editIndex === index"  
                             class="form-check form-check-inline col">
                                    <label 
                                    v-for="item of skillList"  class="form-check-label">
                                        <input
                                       
                                        v-model="editItem.skills" class="form-check-input" type="checkbox"
                                            :value="item">{{item}}

                                    </label>
                                </div>
                          
                            <span v-else v-for="item of s.skills" v-bind:class="skillsColor[item]"
                                class="badge badge-pill  mx-2">{{item}}</span>


                              
                            </td>
                            <td>
                                <!-- 模态框 -->
                                <!-- 编辑按钮 -->
                                <button v-if="index!==editIndex" @click="edit(index)" type="button"
                                    class="btn btn-primary">
                                    编辑</button>
                                <button v-else @click="update()" type="button" class="btn btn-primary">
                                    更新</button>

                                <button @click="del(index)" type="button" class="btn btn-primary">删除</button>

                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>

        </div>
    </div>

Vue部分:


    <!-- Vue -->
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                editIndex: -1,
                editItem: {},
                isshow: false,
                name: '',
                gender: '',
                job: '',
                skills: [],

                jobList: ['产品', '研发', '测试', '运营'],
                skillList: ['HTML', 'CSS', 'JS', 'C', 'Rust'],
                staffList: [
                    {
                        name: 'alice',
                        gender: '女',
                        job: '产品',
                        skills: ['HTML', 'JS'],
                    },

                    {
                        name: 'BOB',
                        gender: '男',
                        job: '运营',
                        skills: ['C', 'Rust'],
                    }

                ],

                skillsColor: {

                    HTML: 'badge-primary',
                    CSS: 'badge-success',
                    JS: 'badge-dark',
                    C: 'badge-info',
                    Rust: 'badge-warning'
                }

            },

            methods: {


                edit: function (i) {
                    // 获得编辑项的索引,
                    this.editIndex = i;
                    // 编辑时创建一个新的对象装载要编辑的对象
                    this.editItem = {};
                    this.editItem.name = this.staffList[i].name;
                    this.editItem.job = this.staffList[i].job;
                    this.editItem.gender = this.staffList[i].gender;
                    this.editItem.skills = this.staffList[i].skills;



                },

                update: function () {
                    this.staffList.splice(this.editIndex, 1, this.editItem);
                    this.editIndex = -1;

                },




                add: function () {
                    if (!this.name || !this.gender) {
                        this.isshow = true;

                    } else {
                        isshow = false;
                        this.staffList.push(
                            {
                                name: this.name,
                                gender: this.gender,
                                job: this.job,
                                skills: this.skills
                            }
                        );
                    }

                    this.clear();
                },

                clear: function () {
                    ythis.name = '',
                        this.gender = '',
                        this.job = this.jobList[1],
                        this.skills = []
                },

                del: function (index) {
                    this.staffList.splice(index, 1);
                }
            },

            mounted() {
                this.job = this.jobList[1];
            },

        });

    </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

 

正文到此结束
本文目录