vue实现单选多选全选全不选功能

单选
当用v-for渲染一组数据的时候，可以带上index来区分他们，这里利用这个index来简单地实现单选

根据点击的index,添加class属性:bgcolor

data() {
     return {
     	checkid:''
     }
 }
 methods:{
      checktrans(index){
          this.cleckid=index;
      },
 }

多选
多选的原理和单选一样，只不过这次要维护的是一个数组，不是单个的checkid

data() {
    return {
       transArr: [],
    }
}

点击一次push一次index到transArr[]中，如果这个transArr[]中有这个index了那就不要它了，实现了点一次选中再点一次取消。

methods:{
   	Listchoose(i){
         var idx = this.transArr.indexOf(i);
         if(idx>-1){
             this.transArr.splice(idx,1);
         }else{
             this.transArr.push(i);
         }
     },
}

全选

全选

methods:{
   //全选
   checkAll(){
        var len = this.translist.length;
        this.transArr = [];
        for(var i=0;i

经常遇到一个按钮控制全选/全不选，下面在全选的基础上附上 全选/全不选 代码
全选/取消全选

{{isCheckAll?'清空':'全选'}}

methods:{
//全选/取消全选转换
   choosecheck(){
       if(this.isCheckAll){
           this.clearCheckbox();
       }else{
           this.checkAll()
       }
   },
   //全选
   checkAll(){
        var len = this.translist.length;
        this.transArr = [];
        for(var i=0;i