vue.js 批量删除跟全选，反选效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>退费</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js'></script>
</head>
<style>
.container {
width: 1200px;
margin: 150px auto;
font-size: 16px;
text-align: center;
}
.container table {
width: 100%;
}
.container table tr th,
.container table tr td {
padding: 10px;
}
.container table tr td input[type=checkbox] {
width: 20px;
height: 20px;
cursor: pointer;
}
.deleteAll {
float: right;
margin: 20px;
}
.addList input[type=text] {
border: 1px solid #999;
text-indent: 5px;
font-size: 14px;
padding: 5px;
}
</style>
<body>
<div id='test' class="container">
<table border="1">
<tr>
<th>
<button v-on:click='selectedAll'>全选</button>
</th>
<th>id</th>
<th>描述</th>
<th>删除</th>
</tr>
<tr v-for='tr in trArr'>
<td>
<input type="checkbox" v-model="selected" v-bind:value='tr.td1' />
</td>
<td>{{tr.td2}}</td>
<td>{{tr.td3}}</td>
<td>
<button v-on:click='removeTr($index)'>删除</button>
</td>
</tr>
</table>
<span>{{selected|json}}</span>
<button class="deleteAll" v-on:click='removeAll'>全部删除</button>
<button class="deleteAll" v-on:click='multipleSelected1'>选中删除</button>
<button class="addTr deleteAll" @click='showAdd'>{{addL}}</button>
<div class="addList" v-show='showT'>
<input type="text" v-model='addTd1' placeholder='请输入内容'>
<input type="text" v-model='addTd2' placeholder='请输入内容'>
<input type="text" v-model='addTd3' placeholder='请输入内容'>
<button @click='addList'>确定添加</button>
</div>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#test',
data: {
addTd1: '',
addTd2: '',
addTd3: '',
addL: '添加',
showT: false,
trArr: [{
td1: '44',
td2: '4545245',
td3: '描述',
td4: ''
}, {
td1: '32',
td2: '454dsds5245',
td3: '描述1',
td4: '<button>删除</button>'
}, {
td1: '76767',
td2: '454dsds5245',
td3: '描述1',
td4: '<button>删除</button>'
}],
selected: []
},
methods: {
removeTr: function(index) {
this.trArr.splice(index, 1);
},
selectedAll: function() {
//this.selected=this.selected==false?true:false;
if (this.selected.length != this.trArr.length) {
this.selected = [];
for (var i = 0; i < this.trArr.length; i++) {
this.selected.push(this.trArr[i].td1);
}
} else {
this.selected = [];
}
},
removeAll: function(e) {
if (this.selected.length <= 0) {
return false;
} else if (this.selected.length == this.trArr.length) {
this.trArr = [];
this.selected=[];
}
},
multipleSelected: function(e) {
var arr = [];
for (var i = 0; i < this.trArr.length; i++) {
//arr.push(this.trArr[i].td1)
for (var j = 0; j < this.selected.length; j++) {
if (this.trArr[i].td1 == this.selected[j]) {
arr.push(i)
}
}
}
return arr
},
multipleSelected1:function(){
var multipleSelected=this.multipleSelected().reverse();
console.log(multipleSelected)
for(var i=0;i<multipleSelected.length;i++){
this.trArr.splice(multipleSelected[i],1);
}
this.selected=[];
return console.log(this.trArr);
},
addList: function() {
if (this.addTd1 == '' || this.addTd2 == '' || this.addTd3 == '') {
alert('请输入完整内容')
return false;
} else {
this.trArr.push({
td1: this.addTd1,
td2: this.addTd1,
td3: this.addTd2,
td4: 'wewe'
});
}
this.addTd1 = '';
this.addTd2 = '';
this.addTd3 = '';
},
showAdd: function() {
this.showT = this.showT == false ? true : false;
}
}
})
</script>
vue.js 批量删除跟全选，反选效果的更多相关文章
- 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...
- js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
- Vue.js实现checkbox的全选和反选
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...
- 使用vue.js实现checkbox的全选和多个的删除功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- 分别用js和jq实现百度全选反选效果
js实现过程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- asp gridview批量删除和全选
本人新手刚学asp.net 全选和删除也是引用了他人的代码试了一试可以实现,感觉很好,就发了上来. 前台代码 <asp:GridView ID="GridView1" r ...
- Jquery 1.8全选反选删除选中项实现
JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...
- jQuery实现全选/反选和批量删除
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
随机推荐
- 【系统篇】从C/C++语言到进程启动背后的故事
我们需要运行一个程序或者软件,双击之即可完成.不过从你双击到程序的窗口产生的这“短暂”的时间内,Windows为你做了很多的工作. 首先,系统有一个进程监测到了你的双击操作,这个进程就是系统shell ...
- DEV 等待窗口
DevExpress.Utils.WaitDialogForm dlg = , )); System.Threading.Thread.Sleep(); dlg.Close();
- Liunx下的有关于tomcat的相关操作 && Liunx 常用指令
先记录以下liunx下的有关于tomcat的相关操作 查看tomcat进程: ps-ef|grep java (回车) 停止tomcat进程: kill -9 PID (进程号如77447) (回车) ...
- MySQL每天自动增加分区
有一个表tb_3a_huandan_detail,每天有300W左右的数据.查询太慢了,网上了解了一下,可以做表分区.由于数据较大,所以决定做定时任务每天执行存过自动进行分区. 1.在进行自动增加分区 ...
- ps工具箱总结
1.矩形工具 四个属性 1.选区2.重叠选区3.减去选区4.区域化缩小选区 样式:固定比例 固定大小 正常 //前两项可以设置宽高 3.快速选择工具.魔棒工具 快速选择工具: 三个属性 1.选区2.增 ...
- Windows2003远程桌面单会话登录
在使用远程桌面连接到Windows2003的时候默认设置是同一用户可以进行多会话登录. (在winxp.win7及以后版本的windows中已经变成单会话登录.) 同用户多会话登录在管理上带来诸多麻烦 ...
- ajax同步的实现
if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc. xmlhttp=new XMLHttpRequest(); }els ...
- Java将文件转为字节数组
Java将文件转为字节数组 关键字:文件,文件流,字节流,字节数组,二进制 摘要:最近工作中碰到的需求是,利用http传输二进制数据到服务器对应接口,需要传输userId, file(加密后)等一系列 ...
- 百度网盘生成二维码api
分享出自精神,灵感来自大脑,在百度云网盘分享每一个文件,都会在页面生成一个二维码扫描的图片: 我就进一步看了该图片的地址: 发现没有,圈圈内是不是有点眼熟,就跟其他二维码api接口一样,只要盗用这段东 ...
- Yii源码阅读笔记（三十）
Widget类是所有小部件的基类,开始,结束和渲染小部件内容的方法的注释: namespace yii\base; use Yii; use ReflectionClass; /** * Widget ...