vue.js简单实现checkbox全选,反选,多选

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caiyongshengCSDN/article/details/83892798

1.html

<table>
  <tr>
    <th class=""> 
      <div class=""> 
        <input type="checkbox" id="checkAll" @click="clickCheckAll()" v-model="checkAll"> 全选 
      </div> 
    </th>
  </tr>
  <tr v-for="(item,index) in tableList">
   <td>
      <input type="checkbox" name="checkBoxs" v-model="item.isChecked"
        @click="clickCheckbox(item,item.id)">
   </td>
</tr>
</table>

2.js

var app= new Vue({
    el: "#iframeRegCheck",
    data: {     
        tableList:[], //表格数组
        isChecklist:[], //被选中的
        checkAll:false  //全选的v-model值
    },
    mounted:function (){
        this.initTable();
    },
    methods: {
        initTable:function () {
            var that = this;
            $.ajax({
                type: 'post',
                url: "yxChecklistController.do?getDateRectification",
                dataType: 'json',
                data: {
                    "id":'${id}',
                    "tag":that.tag
                },
                success: function (data) {              
                    for (var i = 0; i < data.length; i++) { 
                       var objData= data[i]; 
                       objData.isChecked = false; //添加是否选中字段,用来控制选择情况 
                       that.tableList.push(objSta) 
                  }                 
                },
                error:function (e) {
                    alert('获取内容失败,请检查网络情况')
                }
            });
        },
        //全选 反选
        clickCheckAll:function () {
            var _this = this;
            _this.checkAll = !_this.checkAll;   //取反
            for (var i=0;i<_this.tableList.length;i++){  //循环所有checkbox,添加选中状态
                var checkedData = _this.tableList[i];
                checkedData.isChecked = _this.checkAll;               
            }
        },
        //点击单个复选框
        clickCheckbox:function (item,id) {
            var _this = this;
            item.isChecked = !item.isChecked;
            if(item.isChecked){
                _this.isChecklist.push(id)   //随便放个参数到数组记录选中数量
            }else {
                var last =  _this.isChecklist.length-1;
                _this.isChecklist.splice(last,1);    //取消选中时删掉数组最后一个
            }
            if( _this.isChecklist.length == _this.tableList.length){  //比较选中的数组数量和总数据的数量来决定全选是否选中
                _this.checkAll = true;
            }else {
                _this.checkAll = false;
            }
        },
})