<!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 全选的更多相关文章

  1. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  2. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 练习-checkbox 全选 ，反选， 单选，以及取值

    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  4. jQuery使用prop设置checkbox全选、反选

    $(function(){     var checkbox = $("input[type='checkbox']");     //全选     $('#select-all' ...

  5. TreeView checkbox 全选

    在使用TreeView 控件 ,进行权限管理的时候,需要使用 checkbox全选. 勾选父节点,子节点全部选中.取消父节点,子节点不选中. 勾选子节点,父节点也选中. 以下是在使用的例子: < ...

  6. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  7. checkbox全选，反选，取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  8. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  9. checkbox全选与反选

    用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. Oracle 11g 单实例到单实例OGG同步实施文档-OGG initial load

    Oracle 11g 单实例到单实例OGG同步实施文档-OGG initial load 2018-06-07 00:514730原创GoldenGate 作者: leo 本文链接:https://w ...

  2. 初识html与css

    ---恢复内容开始--- PS应用量尺寸w.h- 操作方式: 窗口,信息,右上角面板选项,标尺单位,像素切图- 操作方式: 切片工具, 文件 ,另存为web所有格式,jpeg,存储,切片:选中的切片, ...

  3. Python之OS内置模块

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os.curd ...

  4. Python知识体系思维导图：

    基础知识 数据类型 1.序列 2.字符串 3.列表和元组 4.字典和集合 循环 & 判断

  5. DevExpress VCL Controls 2019发展路线图（No.3)

    [DevExpress VCL Controls下载] ExpressFlowChart 允许最终用户修改形状(v19.1) 允许开发人员以XML格式定义自定义形状(v19.1) 使用30多个新形状扩 ...

  6. wifi编辑 centos

    ifconfig -a sudo iw dev 设置名称 scan

  7. Java与C/C++有什么区别？

    (1)Java为解释型语言,其运行过程为:程序源代码经过Java编译器编译成字节码,然后由JVM解释执行.而C/C++为编译型语言,源代码经过编译和链接生成可执行的二进制代码,因此,Java的执行速度 ...

  8. Redis高可用方案----Redis主从+Sentinel+Haproxy

    安装环境 这里使用三台服务器,每台服务器上开启一个redis-server和redis-sentinel服务,redis-server端口为6379,redis-sentinel的端口为26379. ...

  9. DAY5：字典

    无序性: # -*- coding:utf-8 -*- # Author: TanJincheng room = { "s2": "han meimei", & ...

  10. 微信小程序拒绝授权，反复调起原生授权框。

    最近堕落了,有一阵子没有更新博客园了.一是比较忙,其次也没什么好的题材和工作中的解决方案可以分享的,想想还是把罕见的反复调起原生小程序授权框的方案拿出来说说.   市面上常见的解决方案是第一次拒绝后, ...