vue中全选按钮的操作

我们要实现的目的就是一个简单的全选按钮，但是当下方得有一个元素取消选中状态时，全选状态取消，下方的数据都选中时，全选自动选中，再加上一个功能为当下面没有数据，全选按钮不能选择。

解决的思路肯定还是监听数据变化，外加上一条控制可点击不能点击的变量；
直接上代码：

div class="table_list"> 
<table class="" id="table_list" v-loading="loading"> 
<thead class=""> 
<tr> 
<th><input type="checkbox" @click="checkall($event)" ref="allcheck" :disabled='isdisabledFn'>全选</th> 
<th>第一列</th> 
<th>第二列</th> 
<th>第三列</th> 
</tr> 
</thead> 
<tbody> 
<tr v-for="(i,a) in CustomerList"> 
<td><input type="checkbox" :id="a" :value="a" v-model="FrozenList"></td> 
<td>{{i.fri}}</td> 
<td>{{i.sec}}</td> 
<td>{{i.thr}}</td> 
</tr> 
</tbody> 
</table> 
</div> 

<script> 
export default { 
data: function() { 
return { 
isdisabledFn:true, 
CustomerList:[], 
FrozenList:[], 
thischeckall: [] 
}}, 
//监听事件 
watch: { 
FrozenList: { // 监视双向绑定的数组变化 
handler(){ 
if(this.FrozenList.length == this.thischeckall.length){ 
this.$refs.allcheck.checked = true; 
}else { 
this.$refs.allcheck.checked = false; 
} 
}, 
deep: true 
} 
}, 
//监听事件 
methods: { 
 getdata:function（）{
 let _this=this;
   _this.thischeckall = [];
          $.each(_data, function(a, b) {
            _this.thischeckall.push(a);
          });
        _this.$refs.allcheck.checked=false;   // 此处上来让全选按钮处于未点击状态
        if(_this.thischeckall.length==0){
          _this.isdisabledFn = true;
        }else{  
          _this.isdisabledFn = false;
        }
 }，
 //上面的函数是页面刚开始进来的获取数据的数据，首先判断页面上面的数据，如果数据为空，则全选按钮不能点击
checkall: function(a) {
      if ($(a.target).prop("checked")) {
        this.thischecked = this.thischeckall;
      } else {
        this.thischecked = [];
      }
    }
} 
} 
</script>