Vue.js实现可编辑的表格

 更新时间:2019年12月11日 14:50:13   作者:jimjiayu  
这篇文章主要为大家详细介绍了Vue.js实现可编辑的表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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项目初建和常见问题总结

    VUE项目初建和常见问题总结

    在本篇文章里小编给大家整理的是关于VUE 项目初建和常见问题以及相关知识点内容,有需要的朋友们学习下。
    2019-09-09
  • 深入理解vue中slot与slot-scope的具体使用

    深入理解vue中slot与slot-scope的具体使用

    这篇文章主要介绍了深入理解vue中slot与slot-scope的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue编译打包本地查看index文件的方法

    vue编译打包本地查看index文件的方法

    下面小编就为大家分享一篇vue编译打包本地查看index文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 关于ElementUI自定义Table支持render

    关于ElementUI自定义Table支持render

    这篇文章主要介绍了关于ElementUI自定义Table支持render,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue实现前端页面缓存的过程

    Vue实现前端页面缓存的过程

    这篇文章主要介绍了Vue实现前端页面缓存的过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue3 编译流程-源码解析

    Vue3 编译流程-源码解析

    今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥
    2021-09-09
  • antd design table更改某行数据的样式操作

    antd design table更改某行数据的样式操作

    这篇文章主要介绍了antd design table更改某行数据的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • elementUI实现级联选择器

    elementUI实现级联选择器

    这篇文章主要为大家详细介绍了elementUI实现级联选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue双向数据绑定原理分析、vue2和vue3原理的不同点

    vue双向数据绑定原理分析、vue2和vue3原理的不同点

    这篇文章主要介绍了vue双向数据绑定原理分析、vue2和vue3原理的不同点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue.js报错Failed to resolve filter问题的解决方法

    Vue.js报错Failed to resolve filter问题的解决方法

    这篇文章主要介绍了Vue.js报错Failed to resolve filter问题的解决方法,需要的朋友可以参考下
    2016-05-05

最新评论