Vue.js实现可编辑的表格

来源：互联网发布：linux口令长度编辑：程序博客网时间：2024/05/22 10:46
<!DOCTYPE html><html><head>    <title></title>    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">    <style type="text/css">         table tr td{            text-align: center;         }        .btn-info{            margin-left: 5px;        }        .add,.addBox{            margin: 10px 0px 10px 10px;        }        .submit{            margin-left: 172px;        }        /*全删*/        .delAll{            margin-left: 10px;        }        /*新增*/        fieldset{            margin-left: 10px;        }    </style></head><body><div id="app"><button class="btn btn-primary btn-sm addBox" @click="addBox">添加</button><button class="btn btn-sm btn-danger delAll" @click="delAll">批量删除</button> <table class="table table-bordered" > <thead>    <tr>        <td><input type="checkbox" @click="allSelect"  v-model="checked"></td>        <td>学号</td>        <td>姓名</td>        <td>年纪</td>        <td>操作</td>    </tr> </thead>   <tbody>     <tr v-for="person,index in people">        <td><input type="checkbox" v-model="selected"  v-bind:value="person.sid"></td>        <td @click="edit(index)" contenteditable="true">{{person.sid}}</td>        <td @click="edit(index)" contenteditable="true">{{person.sname}}</td>        <td @click="edit(index)" contenteditable="true">{{person.sage}}</td>        <td><button @click="del(index)" class="btn btn-danger btn-sm">删除</button><button @click="update(index)" class="btn btn-info btn-sm">编辑</button></td>     </tr>   </tbody> </table><fieldset v-show="seen" >    <legend>新增用户</legend>    <div class="">    <p>        <label>学号：</label>        <input type="text" v-model="newPeople.sid">    </p>    <p>        <label>姓名：</label>        <input type="text" v-model="newPeople.sname">    </p>    <p>        <label>年龄：</label>        <input type="number" v-model="newPeople.sage">    </p>    <p>        <button class="btn btn-success btn-sm submit" @click="add">提交</button>    </p></div></fieldset> <!-- 编辑界面 --><fieldset v-show="editSeen">    <legend>编辑用户</legend><div class="">    <p>        <label>学号：</label>        <input type="text" v-model="editPeople.sid" value="{{sid}}">    </p>    <p>        <label>姓名：</label>        <input type="text" v-model="editPeople.sname" value="{{sname}}">    </p>    <p>        <label>年龄：</label>        <input type="number" v-model="editPeople.sage" value="{{sage}}">    </p>    <p>        <button class="btn btn-success btn-sm submit" @click="editSubmit">提交</button>    </p></div></fieldset> </div>  <script type="text/javascript" src="vue.min.js"></script>  <script type="text/javascript">  var data ={                people:[                      {'sid':'1043','sname':'张三','sage':18},                      {'sid':'2434','sname':'赵六','sage':43},                      {'sid':'3424','sname':'李四','sage':42},                      {'sid':'1231','sname':'王五','sage':35}                  ],                newPeople:{                    'sid':'','sname':'','sage':''                },                seen:false,                editSeen:false,                checked:false,                selected:[],                editPeople:{                    'sid':'','sname':'','sage':''                }            } ;     var app = new Vue({        'el':'#app',         data:data,         methods:{            // 添加            addBox:function(){                this.seen = this.seen == false ? true : false;            },            //删除            del:function(index){                console.log(11);               this.people.splice(index,1);            },            //提交            add:function(){                    //插入到people中                    this.people.push(this.newPeople);                    this.newPeople = {};                    this.seen = false            },            //全选            allSelect:function(){                if(this.selected.length != this.people.length){                    this.selected = [];                    for(var i = 0; i<this.people.length;i++){                        this.selected.push(this.people[i].sid);                        console.log(this.people[i].sid);                    }                }else{                    this.selected = [];                }            },            //批量删除            delAll:function(){                for(var j = 0; j< this.selected.length;j++){                    for(var i = 0; i< this.people.length; i++){                         if(this.selected[j] == this.people[i].sid){                            this.people.splice(i,1);                        }                    }                }            },             //编辑             update:function(index){                this.editSeen = true;                 this.editPeople = this.people[index];             },             //编辑后提交             editSubmit:function(){                this.editSeen = false;             }         },         watch:{            "selected":function(){                if(this.selected.length == this.people.length){                    this.checked = true;                }else{                    this.checked = false;                }            }         }     })  </script></body></html>
这里写图片描述
阅读全文
0 0