Vue.js实现可编辑的表格


Posted in Javascript onDecember 11, 2019

本文实例为大家分享了Vue.js实现可编辑的表格的具体代码,供大家参考,具体内容如下

<!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>

Vue.js实现可编辑的表格

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
JavaScript实现音乐播放器
Aug 14 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 #Javascript
用JS实现一个简单的打砖块游戏
Dec 11 #Javascript
js消除图片小游戏代码
Dec 11 #Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 #Javascript
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
vue element自定义表单验证请求后端接口验证
Dec 11 #Javascript
You might like
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php查询及多条件查询
2017/02/26 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
浅谈python多线程和队列管理shell程序
2015/08/04 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
办公室文秘自我评价
2013/09/21 职场文书
银行职员思想汇报
2013/12/31 职场文书
财务科科长岗位职责
2014/03/10 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Java实现简易的分词器功能
2021/06/15 Java/Android
快速学习Oracle触发器和游标
2021/06/30 Oracle