Vue、layui实现简单的增删查改

淩亂°似流年 2021-12-12 13:11 255阅读 0赞

今天公司里不是很忙，忙里偷闲学了会Vue，做了个小demo，使用Vue和layui框架。全部代码如下：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>Vue+layui Demo</title>
        
        <link rel="stylesheet" href="layui/css/layui.css" />
        <script src="layui/layui.js"></script>
        <script src="vue.js"></script>
    </head>
    
    <body>
    
        <div id="app">
            <form class="layui-form" action="">
                <fieldset>
                    <legend>
                        添加新用户
                    </legend>
                    <div style="width: 30%">
                        <div class="layui-form-item">
                            <label class="layui-form-label">名字：</label>
                            <div class="layui-input-block">
                                <input type="text" placeholder="请输入名字" class="layui-input" v-model="newPerson.name">
                            </div>
                        </div>
    
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄：</label>
                            <div class="layui-input-block">
                                <input type="number" placeholder="请输入年龄" class="layui-input" v-model="newPerson.age">
                            </div>
                        </div>
    
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别:</label>
                            <div class="layui-input-block">
                                <select v-model="newPerson.sex">
                                    <option value=""></option>
                                    <option value="Male">男</option>
                                    <option value="Female">女</option>
                                </select>
                            </div>
                        </div>
    
    
                    </div>
                    <button @click="add" type="button" class="layui-btn layui-btn-normal">添加</button>
                    <button @click="find" type="button" class="layui-btn layui-btn-normal">查询</button>
                    <button @click="ref" type="button" class="layui-btn layui-btn-normal">重置</button>
                </fieldset>
            </form>
            <table class="layui-table" style="text-align: center">
                <thead>
                    <tr>
                        <th style="text-align: center">姓名</th>
                        <th style="text-align: center">年龄</th>
                        <th style="text-align: center">性别</th>
                        <th style="text-align: center">操作</th>
                    </tr>
                </thead>
                <tbody>
    
                    <tr v-for="(person,index) in people">
                        <td>{
       { person.name }}</td>
                        <td>{
       { person.age }}</td>
                        <td>
                            <span v-if="person.sex=='Male'">男</span>
                            <span v-else-if="person.sex=='Female'">女</span>
                            <span v-else></span>
                        </td>
                        <td :class="'text-center'"><button @click="del(index)"
                                class="layui-btn layui-btn-sm layui-btn-danger">删除</button></td>
                    </tr>
                </tbody>
            </table>
    
        </div>
    
    
    </body>
    
    <script>
        var vm = new Vue({
            el: '#app',
    
            data: {
                newPerson: {
                    name: '',
                    age: 0,
                    sex: 'Male'
                },
                datas: [{
                    name: 'Z',
                    age: 22,
                    sex: 'Male'
                }, {
                    name: 'W',
                    age: 22,
                    sex: 'Male'
                }, {
                    name: 'Q',
                    age: 19,
                    sex: 'Female'
                }, {
                    name: 'R',
                    age: 99,
                    sex: 'Male'
                }],
                people: [],
                onepeople:{}
    
            },
            created: function () {
                this.people = this.datas.slice(0);//数组赋值 问题一
            },
            methods: {
                ref: function () {
                    //绑定数据问题
                    this.newPerson = {
                        name: '',
                        age: 0,
                        sex: 'Male'
                    }
                    this.people.splice(0, this.people.length);
                    this.people = this.datas.slice(0);
    
                },
                add: function () {
                    if (this.newPerson.name == "" || this.newPerson.name == null) {
                        alert("名字不能为空");
                    } else if (this.newPerson.age == "" || this.newPerson.age == null) {
                        alert("年龄不能为空");
                    } else if (this.newPerson.sex == "" || this.newPerson.sex == null) {
                        alert("性别不能为空");
                    } else {
                        this.people.push(this.newPerson);
                        this.newPerson = {
                            name: '',
                            age: 0,
                            sex: 'Male'
                        }//问题二
                    }
                },
                del: function (index) {
                    this.people.splice(index, 1);//删除数组中的数据
                },
                find: function () {
                    for (let p of this.people) {
                        if (p.name == this.newPerson.name) {
                            this.onepeople = p;
                            break;
                        }
                    }
                    if (this.onepeople.name != null) {
                        this.people.length = 0;
                        this.people.push(this.onepeople);
                    } else {
                        alert("无数据");
                    }
                }
            }
        });
    </script>
    <script>
        layui.use('form', function () {
            var form = layui.form;
            form.render();//表单渲染 这里是针对select 问题三
        })
    </script>
    
    </html>

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

### 问题总结 ###

1、数组间赋值，使用slice方法，避免地址复用  
2、添加后改变输入框里的值，添加后的数据也会跟着变化，最直接的方法就是重新创建一个对象  
3、layui表单中有几个标签必须要使用form模块渲染才能使用