基于VUE实现的增删改查

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-...

爱吃rabbit的mq

5912人浏览 · 2019-06-03 17:36:50

爱吃rabbit的mq · 2019-06-03 17:36:50 发布

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="http://10.2.18.96:8011/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="http://10.2.18.96:8011/vue.js"></script>
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <button class="btn btn-default" @click="add">添加</button>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>id</th>
                        <th>指标1</th>
                        <th>指标2</th>
                        <th>省市</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="i,index in trees" :key="i.id">
                        <td>{{index}}</td>
                        <td>
                            <input type="text" v-model="i.id">
                        </td>
                        <td>
                            <input type="text" v-model="i.firname">
                        </td>
                        <td>
                            <input type="text" v-model="i.lasname">
                        </td>
                        <td>
                            <select v-model="i.city">
                                <option v-for="j in citys">{{j.name}}</option>
                            </select>
                        </td>
                        <td>
                            <button @click="del(i.id)">删除</button>
                            <button @click="see(i)" data-toggle="modal" data-target="#myModal">查看</button>
                            <button @click="upd(i)" data-toggle="modal" data-target="#myModal">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <label>id:</label>
                        <input type="text" v-model="id" disabled>
                        <label>firname:</label>
                        <input type="text" v-model="firname">
                        <label>lasname:</label>
                        <input type="text" v-model="lasname">
                        <label>city:</label>
                        <select v-model="city">
                            <option v-for="i in citys">{{i.name}}</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" v-if="seen" @click="save">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    trees: [{
                        id: 1,
                        firname: 'f1',
                        lasname: 'l1',
                        city: '沈阳'
                    }, {
                        id: 2,
                        firname: 'f2',
                        lasname: 'l2',
                        city: '大连'
                    }, {
                        id: 3,
                        firname: 'f3',
                        lasname: 'l3',
                        city: '鞍山'
                    }],
                    citys: [{
                            name: '沈阳'
                        },
                        {
                            name: '大连'
                        },
                        {
                            name: '鞍山'
                        }
                    ],
                    id: '',
                    firname: '',
                    lasname: '',
                    city: '',
                    seen: false
                }
            },
            methods: {
                add() {
                    this.trees.push({
                        id: '',
                        firname: '',
                        lasname: '',
                        city: '沈阳'
                    })
                },
                del(id) {
                    if (confirm("确认删除？")) {
                        var index = this.trees.findIndex(item => {//根据id获取当前被删除对象在数据中的索引
                            return id = item.id
                        })
                        this.trees.splice(index, 1)
                        alert("删除成功！")
                    }
                },
                see(obj) {
                    this.id = obj.id
                    this.firname = obj.firname
                    this.lasname = obj.lasname
                    this.city = obj.city
                    this.seen = false
                },
                upd(obj) {
                    this.see(obj)
                    this.seen = true
                },
                save() {
                    var index=0;
                    for(var i=0;i<this.trees.length;i++){
                        if(this.trees[i].id==this.id){
                            index=i;
                            break;
                        }
                    }
                    this.trees[index].firname=this.firname
                    this.trees[index].lasname=this.lasname
                    this.trees[index].city=this.city
                    alert("修改成功！")
                    $('#myModal').modal('hide')
                }
            }
        })
    </script>
    <script src="http://10.2.18.96:8011/assets/js/jquery-3.2.1.min.js"></script>
    <script src="http://10.2.18.96:8011/assets/js/bootstrap.min.js"></script>
</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^