vue删除多条数据方法

0人阅读 评论(0) 收藏 举报
分类:


删除功能

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理模块</title>
<script src="vue.js"></script>
<style type="text/css">
tr:hover{
  background-color: #eee
}
.selInput{
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid #ccc;
  position: relative;
}
.select:after{
  content: '√';
  position: relative;
  top: -4px;
}
</style>
</head>
<body>
<div id="app">
  <h2>学生信息管理系统</h2>
  <hr>
  <table cellspacing='0'>
    <thead>
      <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for='item in students' @click='item.select = !item.select'>
        <td :class='item.select?"select":""' class='selInput'></td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.gender}}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button>添加</button>
    <button>修改</button>
    <button @click='deleteHandler'>删除</button>
  </div>
</div>
<script>
  var app = new Vue({
    el:'#app',
    methods:{
      deleteHandler:function(){
        for(let i=0; i<this.students.length; i++){
          if(this.students[i].select){
            this.students.splice(i,1)
            i--
          }
        }
      }
    },
    data() {
      return {
        students:[
          {id:1,name:'aaa',age:1,gender:'男',select: false},
          {id:2,name:'bbb',age:2,gender:'男',select: false},
          {id:3,name:'ccc',age:3,gender:'男',select: false},
          {id:4,name:'ddd',age:4,gender:'男',select: false},
          {id:5,name:'eee',age:5,gender:'男',select: false},
          {id:6,name:'fff',age:6,gender:'男',select: false},
          {id:7,name:'ggg',age:7,gender:'男',select: false},
          {id:8,name:'hh',age:8,gender:'男',select: false}
        ]
      }
    }
  });
</script>
</body>
</html>
查看评论

VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1398

hibernate批量删除多条记录

hibernate3貌似不支持一次删除多条记录,可以把多条记录放到一个List里面,然后循环删除,例: public void delMG(List mastergroup) {         ...
  • liujinwei2005
  • liujinwei2005
  • 2012-03-21 23:28:58
  • 4855

MySQL删除同一个字段的多条记录

MySQL删除同一个字段的多条记录           在开发过程中,遇到了一个问题,删除数据表中的脏数据,MySQL数据库,根据某个列的值删除同一个表中的多条记录。           首先,把...
  • nangeali
  • nangeali
  • 2017-03-19 19:27:43
  • 1836

mongo vue 批量删除表数据

在mongo vue 里面删除所筛选出来的批量数据, 当然这是在windows上的mongo vue才会出的问题。 要是mac的话,好像不是这个工具,可以没问题的删除。 如图下: 问题: Ser...
  • qq_27093465
  • qq_27093465
  • 2016-07-14 09:14:01
  • 3605

ibatis删除根据主键删除多条记录

DELETE FROM T_RealValue  Class_ID = #Class_ID[]#
  • murongliuhuang
  • murongliuhuang
  • 2016-08-01 15:54:46
  • 211

选择多个数据进行删除的 javaScript

    分为两种情况:1.当用户只选择了其中的一个数据 2.用户选择了多个数据进行删除。当用户只选择了一个数据时,判断checkbox是否被选择,如果选择则进行删除。当用户选择了多个数据时,从页面中读...
  • jianbo99
  • jianbo99
  • 2007-10-26 11:00:00
  • 508

SSM框架------删除多条数据

对于初学mybatis的同学来说,在后台删除多条数据是一个比较棘手的事情,在这里分享一下自己操作过的后台删除数据Controller层@RequestMapping(value = &quot;/de...
  • ZGHXH
  • ZGHXH
  • 2018-03-31 10:35:59
  • 64

vue里面删除数据

mui.confirm("您确定删除吗?", ({ index }) => {                     if (index == 1) {                       ...
  • qq_33769914
  • qq_33769914
  • 2017-06-26 16:21:58
  • 1911

mysql批量删除多条记录的sql语句

mysql批量删除多条记录的sql语句
  • u013905744
  • u013905744
  • 2017-04-25 10:03:13
  • 2641

删除多条数据-解决方案

Struts1.2 全选、多选,一次性删除多条数据1、
  • Jason20075563
  • Jason20075563
  • 2010-12-17 14:18:00
  • 2468
    个人资料
    持之以恒
    等级:
    访问量: 4万+
    积分: 1665
    排名: 3万+
    最新评论