表格实现数据的增删改

    <button @click="han">添加</button>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in stu" :key="item.on">
                <td>{{item.on}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button @click="getone(index)">修改</button>
                    <button @click="shan(index)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <div v-show="showBox" class="box">
        <table class="biao">
            <tr>
                <td>学号</td>
                <td><input v-model="on" type="text"> </td>
            </tr>
            <tr>
                <td>姓名</td>
                <td><input v-model="name" type="text"> </td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input v-model="sex" type="text"> </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input v-model="age" type="text"> </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <button v-show="isAdd" @click="add">添加</button>
                    <button v-show="!isAdd" @click="update">修改</button>
                    <button v-on:click="remov">取消</button>
                </td>

            </tr>
        </table>
        <div @click="guanbi" class="close">X</div>
    </div>

</div>

<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    new Vue({
        el: "#box",
        data: {
            showBox: false,
            isAdd: true,
            upidex: 0,
            stu: [
                {
                    on: 1001,
                    name: "张三",
                    age: 18,
                    sex: "男",


                }, {
                    on: 1002,
                    name: "李四",
                    age: 21,
                    sex: "男",


                }, {
                    on: 1003,
                    name: "王五",
                    age: 22,
                    sex: "男",


                }, {
                    on: 1004,
                    name: "许云鹤",
                    age: 25,
                    sex: "女",


                },
            ],

            on: "",
            name: "",
            sex: "",
            age: ""
        },

        methods: {


            guanbi() {
                this.showBox = false;
                this.on = ""
                this.name = ""
                this.sex = ""
                this.age = ""


            },


            //点击大添加的时候
            han() {

                //让隐藏的大盒子显示
                this.showBox = true,
                    //当isAdd时true的时候显示添加按钮  可以看上面按钮结构
                    this.isAdd = true
            },





            //点击删除时执行的函数
            //点击删除的时候 传入点击的哪一个索引 
            shan(i) {
                //以点击的这个为索引删除一个
                this.stu.splice(i, 1)
            },



            //点击小添加的时候执行的操作
            add() {
                //把data里自定义的 on name age sex。push（）进stu数组里      
                //因为 on name age sex身上有v-model绑定 所以可以把文本框里的内容添加进数组里
                this.stu.push({
                    on: this.on,
                    name: this.name,
                    age: this.age,
                    sex: this.sex,


                })
            },



            //点击取消时执行的操作
            remov() {

                //点击取消时 让所有的input内容清空
                this.on = ""
                this.name = ""
                this.sex = ""
                this.age = ""
                //让盒子隐藏
                this.showBox = false
            },



            //点击修改的时候执行的操作
            getone(sy) {

                //根据数组中的下标 获取点击的这个对象
                let stus = this.stu[sy];
                //然后把点击对象里面的内容展示在input框里面
                this.on = stus.on
                this.name = stus.name
                this.sex = stus.sex
                this.age = stus.age

                //点击修改的时候让盒子显示
                this.showBox = true
                //当isAdd时false的时候显示修改按钮  可以看上面按钮结构
                this.isAdd = false
                //在data里定义一个变量 把当前点击的索引存起来
                this.upidex = sy

            },








            //修改学生

            update() {
                //点击修改的时候把点击的索引存起来了 在这直接引用点击的那个索引（存起来的索引）
                //this.stu[this.upidex]就是点击的那个数组里面的对象 
                //把input里面输入的每一项值赋给stu
                let stu = this.stu[this.upidex]
                stu.no = this.no
                stu.name = this.name
                stu.sex = this.sex
                stu.age = this.age
            }
        },

    })
</script>