vue day7 table checkbox 全选
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>
<body> <div id="app-4" class="col-xs-12 main-table-wrapper">
<table class="table table-striped table-hover table-bordered" id="main-table">
<thead>
<tr>
<th><input type="checkbox" v-model="checkall" v-on:click='checkAll'></th>
<th>商品名称</th>
<th>商品单价</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in tableData">
<td><input type="checkbox" v-model="checked" :value="item.id" /> </td>
<td>{{ item.name }}</td>
<td>{{ item.address }}</td>
<td>{{ item.date }}</td>
<td><button @click="handleRemove(index)">移除</button></td> </tr> </tbody>
</table>
<div>{{checked}}</div>
</div> <script> var app = new Vue({
el: '#app-4',
data: {
tableData: [{
id:,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄', }, {
id:,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id:,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id:,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
checkall:false,
checked:[]
},
methods: {
handleRemove: function(index){
this.tableData.splice(index,);
},
checkAll: function () {
var _this = this
if (this.checkall) {
// 实现反选
this.checked = []
} else {
// 实现全选
this.checked = []
this.tableData.forEach(function (item) {
_this.checked.push(item.id)
})
}
if (this.checked.length === this.tableData.length) {
this.checkall = true
// console.log(this.checkall)
// console.log(this.checked)
}
}
}
}); </script>
</body>
</html>
vue day7 table checkbox 全选的更多相关文章
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 练习-checkbox 全选 ，反选， 单选，以及取值
1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- jQuery使用prop设置checkbox全选、反选
$(function(){ var checkbox = $("input[type='checkbox']"); //全选 $('#select-all' ...
- TreeView checkbox 全选
在使用TreeView 控件 ,进行权限管理的时候,需要使用 checkbox全选. 勾选父节点,子节点全部选中.取消父节点,子节点不选中. 勾选子节点,父节点也选中. 以下是在使用的例子: < ...
- JS checkbox 全选 全不选
/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
- checkbox全选，反选，取消选择 jquery
checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- checkbox全选与反选
用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...
随机推荐
- 常见类 Object
1.在Java类继承结构中Java.lang.Object类位于顶端 2.如果定义一个Object类没有使用extends关键字声明其父类,则其父类为Java.lang.Object类 3.Objec ...
- webstorm使用YUIcompressor压缩js css并指定目录
YUI插件下载地址: https://github.com/yui/yuicompressor/releases 配置教程: 注意:这里用 ..\ 代表上级目录, '\' 千万别写成 '/'
- cvte春招测试面试记录
cvte春招测试面试记录,挂在了综合面试(hr面)...尽量回忆面试的问题(可能不完全). 技术面一面: 1.自我介绍 2.根据实习项目问,智能客服怎么测正确率之类的. 3.测试人脸解锁 4.测试微信 ...
- @EnableHystrix
@EnableHystrix 启动熔断降级服务 @Component把普通的pojo类实例到spring容器中去,相当于配置文件中的<bean id="" class=&qu ...
- maven profile实现多环境配置
每次项目部署上线都需要手动去修改配置文件(比如数据库配置,或者一个自定义的配置)然后才能打包,很麻烦,网上找到 maven profile可以完成这个工作,记录如下: 环境:eclipse + spr ...
- Jenkins 随笔
window是 随笔 修改端口 : <arguments>-Xrs -Xmx256m -Dhudson.lifecycle=hudson.lifecycle.WindowsService ...
- Asp.Net Core通过HttpStatusCode状态处理响应结果
在我的一个Asp.Net Core 2.1 的项目中,我们需要通过获得服务器返回的状态,去实现不用的操作,经过多方资料查询和实践,个人总结一种方法 一.修改控制器 在要返回值的控制器Action中,R ...
- 【转】Android-Input 触控笔
https://source.android.com/devices/accessories/stylus 触控笔 Android 6.0 及更高版本支持蓝牙 (BT).蓝牙低功耗 (BTLE) 或 ...
- react中Redux应用框架学习
1. 最普通的react-redux 2.应用context的傻瓜组件和聪明组件的redux框架 3. 精简版react-redux,利用react-redux模块的redux(推荐) 4.多个模 ...
- Labview学习笔记-条件结构的两个问题
数组:“创建数组控件“用于连接数组 输入端:数组+元素 或数组+数组 右键创建数组控件 在连接数组项上打钩或取消,改变连接的数组维度 簇:就是C语言中的结构体 簇和数组的转换 必须保证各元素数据类型一 ...