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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
学生安全责任书
2014/04/15 职场文书
新兵入伍心得体会
2014/09/04 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
golang 语言中错误处理机制
2021/08/30 Golang