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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
Openlayers实现测量功能
Sep 25 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
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
关于jquery css的使用介绍
2013/04/18 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
浅析javascript的return语句
2015/12/15 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Django密码系统实现过程详解
2019/07/19 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Spy++的使用方法及下载教程
2021/01/29 Python
公务员政审材料
2014/12/23 职场文书
文明倡议书
2015/01/19 职场文书
2015年财政局工作总结
2015/05/21 职场文书
运动会运动员赞词
2015/07/22 职场文书
《静夜思》教学反思
2016/02/17 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技