<!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. 第四章css初识

    1.CSS(层叠样式表) 2.CSS语法 选择器{ 属性名1:属性值1: 属性名2:属性值2: } 3.引用CSS的三种方式 第一种:行内样式 例:<a style="color:re ...

  2. org.apache.commons.dbcp.DelegatingPreparedStatement.isClosed()Z和NewProxyPreparedStatement.isClosed()

    原文转:https://blog.csdn.net/qq_37909508/article/details/83028536 报错: NewProxyPreparedStatement.isClose ...

  3. 关于Linux时间设置的总结

    系统环境:centos Linux的时间有两种,一种是系统时间,一种是硬件时间. 系统时间的查看:#date 系统时间的设置:#date -set 时间同步工具准备 Linux进行时间同步要使用一个工 ...

  4. Java中常见的分页算法

    在查询数据的时候或者展示数据的时候经常会使用分页,介绍几种简单的分页算法: //总的页数 int total = 30: //每页个数 int pageSize = 6; 1.one     int ...

  5. poj1002总结

    1.之前一直是runtime error,没有找出具体原因,把冒牌排序改成了合并排序,当输入是100000行时,从大约10s变到1s内 2.感觉是atoi指针导致的,当判断atoi的入参不为NULL时 ...

  6. shell练习题7

    需求如下: 输入一串随机数字,然后按千分位输出. 例如:输入随机数字为"123456789",输出为123,456,789 参考解答如下 -方法1 [root@lanquark s ...

  7. shell练习题3

    需求如下: 请按照这样的日期格式(xxxx-xx-xx)每天生成一个文件,例如今天生成的文件为2018-10-19.log, 并把磁盘的使用情况入到这个文件,(不需要写cron,写脚本即可) 参考解答 ...

  8. 初读"Thinking in Java"读书笔记之第四章 ---控制执行流程

    true和false Java不允许将数字作为布尔值使用. 所有条件表达式都将布尔值作为判断条件,决定执行路径. if-lese 迭代 while,do-while,for为三个迭代语句. ,逗号操作 ...

  9. codeforces 1140D(区间dp/思维题)

    D. Minimum Triangulation time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  10. 关于Unity3D使用时Scene视图清楚，Game视图不清楚的问题

    1.自己不知道什么时候,将LowResolutioinAspectRatios给勾上了, 2.同样的Scale值大于1的时候也会造成模糊,但这个好像比1好发现一点